Build a Simple Next.js Interactive Code Snippet Sharing App

Written by

FixTechToday

in

In today’s fast-paced world of web development, sharing code snippets efficiently is crucial. Whether you’re collaborating with colleagues, helping out on a forum, or simply documenting your own projects, a dedicated platform can significantly streamline the process. Imagine the frustration of pasting code with broken formatting, losing syntax highlighting, or struggling to manage different versions. This is where a simple, interactive code snippet sharing app built with Next.js can revolutionize your workflow. This project offers a practical solution to a common problem, making code sharing a breeze.

Why Next.js? The Perfect Framework for the Job

Next.js, a React framework, is an ideal choice for this project due to several key features:

  • Server-Side Rendering (SSR) and Static Site Generation (SSG): This improves SEO and initial load times, making your app fast and accessible.
  • Built-in Routing: Simplifies navigation and page management.
  • API Routes: Easily create backend endpoints for handling data (e.g., saving snippets).
  • Developer Experience: Features like hot reloading and TypeScript support enhance productivity.
  • Optimized Performance: Next.js automatically optimizes images and code splitting for faster loading.

Project Overview: What We’ll Build

Our code snippet sharing app will allow users to:

  • Create new code snippets.
  • Paste code with syntax highlighting.
  • Add a title and description.
  • Save and share snippets with a unique URL.
  • View and edit existing snippets (optional, for a more advanced version).

We’ll keep the design clean and focused on functionality, ensuring ease of use. The backend will be minimal, likely using a simple in-memory storage or a basic database (like a local JSON file) for simplicity. We’ll focus on the core functionality of snippet creation, display, and sharing.

Setting Up Your Development Environment

Before we dive into the code, let’s set up your development environment. You’ll need:

  • Node.js and npm (or yarn): These are essential for managing packages and running your Next.js application. Download the latest LTS (Long Term Support) version from the official Node.js website.
  • A Code Editor: VS Code, Sublime Text, or any editor you prefer.
  • A Terminal: For running commands and managing your project.

Once you have Node.js and npm installed, create a new Next.js project using the following command in your terminal:

npx create-next-app code-snippet-app

This command will create a new directory called `code-snippet-app` with the basic structure of a Next.js project. Navigate into the project directory:

cd code-snippet-app

Now, start the development server:

npm run dev

This will start the development server, usually on `http://localhost:3000`. Open this address in your browser to see the default Next.js welcome page. You are now ready to start building!

Building the Snippet Creation Form

The core of our app is the form where users will enter their code snippets. We’ll create a simple form with the following fields:

  • Title: A text input for the snippet’s title.
  • Description: A text area for a brief description.
  • Code: A text area for the code itself.
  • Submit Button: To save the snippet.

Let’s start by modifying the `pages/index.js` file (or creating a new page if you prefer a separate route for creating snippets). Here’s an example implementation:

import { useState } from 'react';

export default function Home() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [code, setCode] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    // Implement the logic to save the snippet here (covered later)
    console.log({ title, description, code }); // Temporary: Log the data
  };

  return (
    <div style={{ maxWidth: '800px', margin: '20px auto' }}>
      <h2>Create a New Code Snippet</h2>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="title">Title:</label>
          <input
            type="text"
            id="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="description">Description:</label>
          <textarea
            id="description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            rows="3"
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="code">Code:</label>
          <textarea
            id="code"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            rows="10"
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px', fontFamily: 'monospace' }}
          />
        </div>
        <button type="submit" style={{ padding: '10px 15px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          Save Snippet
        </button>
      </form>
    </div>
  );
}

Key things to note:

  • State Variables: We use React’s `useState` hook to manage the form input values.
  • Controlled Components: The `value` prop of the input and textarea elements is bound to the state variables, making them controlled components. This ensures that the UI always reflects the current state.
  • `onChange` Handlers: These update the state variables whenever the user types in the input fields.
  • `handleSubmit` Function: This function, triggered on form submission, currently logs the form data to the console. We’ll replace this with the logic to save the snippet later.
  • Basic Styling: Inline styles are used for simplicity. In a real project, you’d likely use CSS modules, styled-components, or a similar styling solution for better organization and maintainability.

Save this file and check your browser. You should see the form rendered. When you type in the fields and submit the form, the data will be logged to your browser’s console. Now, let’s add the code for saving the snippet.

Saving the Code Snippet (Backend Integration)

Next.js makes it easy to create backend APIs using API routes. These routes live in the `pages/api` directory. Let’s create an API route to handle saving the snippet. Create a file named `pages/api/snippets.js` and add the following code:

import fs from 'fs/promises';
import path from 'path';

const snippetsFilePath = path.join(process.cwd(), 'data', 'snippets.json');

async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const { title, description, code } = req.body;

      if (!title || !code) {
        return res.status(400).json({ message: 'Title and code are required.' });
      }

      const newSnippet = {
        id: Date.now().toString(), // Simple ID generation
        title,
        description,
        code,
        createdAt: new Date().toISOString(),
      };

      // Read existing snippets (if any)
      let snippets = [];
      try {
        const snippetsData = await fs.readFile(snippetsFilePath, 'utf8');
        snippets = JSON.parse(snippetsData);
      } catch (error) {
        // File might not exist yet; ignore the error
        console.log('snippets.json not found, creating a new file.');
      }

      // Add the new snippet
      snippets.push(newSnippet);

      // Write the updated snippets back to the file
      await fs.writeFile(snippetsFilePath, JSON.stringify(snippets, null, 2));

      res.status(201).json({ message: 'Snippet created successfully', snippet: newSnippet });

    } catch (error) {
      console.error('Error saving snippet:', error);
      res.status(500).json({ message: 'Failed to save snippet' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

export default handler;

Let’s break down this code:

  • Import Statements: We import the necessary modules: `fs/promises` for file system operations and `path` to help with file paths.
  • `snippetsFilePath` Variable: This defines the path to the JSON file where we’ll store our snippets. It uses `process.cwd()` to get the current working directory, then joins it with ‘data’ and ‘snippets.json’. We’ll need to create a `data` directory in your project’s root.
  • `handler` Function: This is the main function that handles incoming requests. It checks the request method (`req.method`).
  • `POST` Request Handling: If the request method is `POST`, it attempts to save the snippet:
    • It extracts `title`, `description`, and `code` from the request body (`req.body`).
    • It checks if `title` and `code` are provided. If not, it returns a 400 Bad Request error.
    • It creates a `newSnippet` object with an ID (using `Date.now()`), the provided data, and a `createdAt` timestamp.
    • It reads existing snippets from `snippets.json`. If the file doesn’t exist, it catches the error and initializes an empty array.
    • It adds the `newSnippet` to the `snippets` array.
    • It writes the updated `snippets` array back to `snippets.json`, formatting the JSON for readability using `JSON.stringify(snippets, null, 2)`.
    • It returns a 201 Created status code and the created snippet in the response.
  • Error Handling: The code includes `try…catch` blocks to handle potential errors during file operations.
  • `Method Not Allowed` Handling: If the request method is not `POST`, it returns a 405 Method Not Allowed error.

Important: Create a directory named `data` in the root of your project. This is where the `snippets.json` file will be created.

Now, modify the `handleSubmit` function in `pages/index.js` to send a `POST` request to this API route:

import { useState } from 'react';

export default function Home() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [code, setCode] = useState('');
  const [message, setMessage] = useState(''); // For displaying success/error messages

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await fetch('/api/snippets', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ title, description, code }),
      });

      const data = await response.json();

      if (response.ok) {
        setMessage('Snippet saved successfully!');
        setTitle('');
        setDescription('');
        setCode('');
      } else {
        setMessage(data.message || 'Failed to save snippet.');
      }
    } catch (error) {
      console.error('Error saving snippet:', error);
      setMessage('An unexpected error occurred.');
    }
  };

  return (
    <div style={{ maxWidth: '800px', margin: '20px auto' }}>
      <h2>Create a New Code Snippet</h2>
      {message && <p style={{ color: response.ok ? 'green' : 'red', marginBottom: '10px' }}>{message}</p>}
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="title">Title:</label>
          <input
            type="text"
            id="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="description">Description:</label>
          <textarea
            id="description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            rows="3"
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="code">Code:</label>
          <textarea
            id="code"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            rows="10"
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px', fontFamily: 'monospace' }}
          />
        </div>
        <button type="submit" style={{ padding: '10px 15px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          Save Snippet
        </button>
      </form>
    </div>
  );
}

Key changes:

  • `fetch` API: We use the `fetch` API to send a `POST` request to `/api/snippets`.
  • Headers: We set the `Content-Type` header to `application/json` to indicate that we’re sending JSON data.
  • Body: We use `JSON.stringify()` to convert the form data into a JSON string and send it in the request body.
  • Error Handling: We check `response.ok` to see if the request was successful. If not, we handle the error.
  • Message Display: We added a `message` state variable to display success or error messages to the user.
  • Clear Form: On successful save, we clear the form fields.

Now, when you submit the form, the code snippet data will be sent to the API route, saved to the `snippets.json` file, and you’ll see a success or error message displayed.

Displaying Code Snippets with Syntax Highlighting

The next step is to display the saved code snippets, with proper syntax highlighting. We’ll need to:

  1. Fetch the snippets from the API (or read from the `snippets.json` file directly, depending on your design).
  2. Render each snippet with its title, description, and code.
  3. Use a library for syntax highlighting.

Let’s start by fetching the snippets. We can create a new component or modify the existing `Home` component to handle this. For simplicity, let’s modify `pages/index.js` to fetch and display the snippets. Add the following code inside the `Home` function, before the return statement:

  const [snippets, setSnippets] = useState([]);

  useEffect(() => {
    async function fetchSnippets() {
      try {
        const response = await fetch('/api/snippets');
        if (!response.ok) {
          throw new Error('Failed to fetch snippets');
        }
        const data = await response.json();
        setSnippets(data);
      } catch (error) {
        console.error('Error fetching snippets:', error);
        // Handle the error (e.g., display an error message)
      }
    }

    fetchSnippets();
  }, []); // The empty dependency array ensures this effect runs only once on component mount

Explanation:

  • `snippets` State: We use `useState` to store the fetched snippets.
  • `useEffect` Hook: The `useEffect` hook is used to perform side effects, such as fetching data.
  • `fetchSnippets` Function: This asynchronous function fetches the snippets from the `/api/snippets` endpoint. (Note: We’ll need to create a GET route in your `api/snippets.js` file.)
  • Error Handling: Includes error handling for failed API requests.
  • Empty Dependency Array (`[]`): This ensures that the `useEffect` hook runs only once, when the component mounts.

Now, let’s create the GET route in `pages/api/snippets.js` to handle the fetching of snippets:


import fs from 'fs/promises';
import path from 'path';

const snippetsFilePath = path.join(process.cwd(), 'data', 'snippets.json');

async function handler(req, res) {
  if (req.method === 'POST') {
    // ... (Existing POST request handling code)
  } else if (req.method === 'GET') {
    try {
      // Read snippets from the file
      const snippetsData = await fs.readFile(snippetsFilePath, 'utf8');
      const snippets = JSON.parse(snippetsData);
      res.status(200).json(snippets);
    } catch (error) {
      console.error('Error reading snippets:', error);
      res.status(500).json({ message: 'Failed to fetch snippets' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

export default handler;

This code adds a `GET` request handler to the API route. It reads the `snippets.json` file and returns the snippets in the response. If an error occurs, it returns a 500 status code.

Now, let’s render the snippets in `pages/index.js`. Modify the return statement as follows:


  return (
    <div style={{ maxWidth: '800px', margin: '20px auto' }}>
      <h2>Create a New Code Snippet</h2>
      {message && <p style={{ color: response.ok ? 'green' : 'red', marginBottom: '10px' }}>{message}</p>}
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="title">Title:</label>
          <input
            type="text"
            id="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="description">Description:</label>
          <textarea
            id="description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            rows="3"
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="code">Code:</label>
          <textarea
            id="code"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            rows="10"
            style={{ width: '100%', padding: '8px', marginBottom: '5px', border: '1px solid #ccc', borderRadius: '4px', fontFamily: 'monospace' }}
          />
        </div>
        <button type="submit" style={{ padding: '10px 15px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          Save Snippet
        </button>
      </form>
      <h2 style={{ marginTop: '30px' }}>Saved Snippets</h2>
      <div>
        {snippets.map((snippet) => (
          <div key={snippet.id} style={{ border: '1px solid #ddd', padding: '10px', marginBottom: '15px', borderRadius: '4px' }}>
            <h3>{snippet.title}</h3>
            <p>{snippet.description}</p>
            <pre style={{ backgroundColor: '#f4f4f4', padding: '10px', overflowX: 'auto', borderRadius: '4px' }}>
              <code>{snippet.code}</code>
            </pre>
          </div>
        ))}
      </div>
    </div>
  );

This code iterates over the `snippets` array and renders each snippet. It includes the title, description, and the code within a `

` and `` tags.  Currently, the code is displayed as plain text.  We'll add syntax highlighting next.</p>

<h2>Adding Syntax Highlighting with React Syntax Highlighter</h2>

<p>To add syntax highlighting, we'll use a library called `react-syntax-highlighter`.  Install it using:</p>

<pre><code class="language-bash">npm install react-syntax-highlighter

Import the necessary components and styles in `pages/index.js`:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/cjs/styles/prism'; // Or any other theme

Then, replace the `

` and `` tags in the render method with the `SyntaxHighlighter` component:</p>

<pre><code class="language-jsx">
            <pre style={{ backgroundColor: '#f4f4f4', padding: '10px', overflowX: 'auto', borderRadius: '4px' }}>
              <SyntaxHighlighter language="javascript" style={dark}  >{snippet.code}</SyntaxHighlighter>
            </pre>

Important points:

  • Import SyntaxHighlighter: Import the `SyntaxHighlighter` component from the library.
  • Import a Style Theme: Import a style theme (e.g., `dark`) to define the highlighting colors. You can choose other themes as well.
  • `language` Prop: Specify the programming language of the code snippet using the `language` prop. In this example, we’re assuming JavaScript (`javascript`). You’ll need to adjust this based on the language of each snippet. You could potentially add a language selection dropdown to your form.
  • `style` Prop: Apply the imported style theme using the `style` prop.
  • Code as Children: The code snippet is passed as children to the `SyntaxHighlighter` component.

Save the file and check your browser. You should now see the code snippets with syntax highlighting. If you don’t see highlighting, double-check that you’ve installed the library correctly, imported the styles, and specified the correct language for your code snippets.

Enhancements and Advanced Features

This is a basic implementation. Here are some ideas for enhancements and advanced features:

  • User Authentication: Implement user accounts to allow users to save and manage their own snippets. Use a library like NextAuth.js or Firebase Authentication for easy integration.
  • Database Integration: Instead of using a local JSON file, use a database like MongoDB, PostgreSQL, or Firebase Realtime Database for more robust storage and scalability.
  • Code Editing: Allow users to edit existing snippets.
  • Code Formatting: Integrate a code formatter (e.g., Prettier) to automatically format the code snippets.
  • Language Selection: Add a dropdown or other UI element to allow users to select the programming language for their snippets. This will allow the syntax highlighter to correctly format the code.
  • Tagging and Categorization: Allow users to tag their snippets to organize them by topic or project.
  • Search Functionality: Implement a search feature to help users find snippets.
  • Code Sharing: Generate unique URLs for each snippet to make it easy to share them.
  • Version Control: Implement version control for snippets, allowing users to track changes and revert to previous versions.
  • Comments: Allow users to add comments to snippets.
  • Code Folding: Implement code folding to allow users to collapse and expand sections of code.
  • Mobile Responsiveness: Ensure the app is responsive and works well on different screen sizes.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check the file paths for your API routes and the `snippets.json` file. Make sure the paths are relative to the project root.
  • CORS Errors: If you’re making API requests from a different domain, you might encounter CORS (Cross-Origin Resource Sharing) errors. You can usually fix this by configuring CORS in your Next.js API route. You can use the `cors` package to add CORS support.
  • Incorrect Syntax Highlighting: Make sure you’ve installed `react-syntax-highlighter` correctly, imported the styles, and specified the correct language for your code snippets. Experiment with different themes.
  • Data Not Saving: Verify that your API route is correctly handling `POST` requests and writing the data to the `snippets.json` file (or your database). Check the browser’s developer console for any errors.
  • State Not Updating: Ensure that your `useState` hooks are correctly updating the state variables when the user interacts with the form. Use `console.log()` to check the values of your state variables.
  • Typographical Errors: Carefully check your code for typos and syntax errors.
  • Missing Dependencies: Make sure you have all the necessary dependencies installed (e.g., `react-syntax-highlighter`).
  • Server-Side Rendering Issues: If you’re using server-side rendering, be mindful of any client-side-only code that might cause issues during the initial render.

Key Takeaways

  • Next.js is a powerful framework for building web applications with features like SSR, SSG, and API routes.
  • API routes make it easy to create backend endpoints for handling data.
  • React Syntax Highlighter provides syntax highlighting for code snippets.
  • State management with `useState` is crucial for handling form inputs and displaying data.
  • Understanding the basics of file system operations is essential for saving data to files.

By following these steps, you’ve created a functional code snippet sharing app using Next.js. You can now save, display, and share code snippets with syntax highlighting. This is a great starting point for a more complex application. Remember to experiment with different features, libraries, and styling techniques to customize the app to your specific needs. The process of building this app provides a solid foundation for understanding Next.js and how to create interactive, data-driven web applications. Further development will involve refining the user interface, enhancing the backend functionality, and exploring more advanced features to make the application even more useful and user-friendly. The journey of building a web application is a continuous learning process, and each project provides new opportunities to enhance your skills and expand your knowledge.

More posts