Build a Simple Next.js Interactive Code Snippet App

Written by

FixTechToday

in

In the ever-evolving landscape of web development, the ability to share and showcase code snippets effectively is crucial. Whether you’re a seasoned developer or just starting your coding journey, having a dedicated space to store, organize, and present code snippets can significantly boost your productivity and collaboration. This is where a code snippet app comes in handy. But why Next.js? Well, Next.js offers a fantastic blend of features, including server-side rendering (SSR), static site generation (SSG), and a smooth developer experience, making it an excellent choice for building interactive and performant web applications.

Why Build a Code Snippet App?

Imagine you’re working on a project and come across a particularly elegant solution to a tricky problem. Wouldn’t it be great to save that snippet for future use? Or perhaps you want to share your code with colleagues or the wider developer community. A code snippet app provides a centralized location for all your code snippets, complete with features like syntax highlighting, categorization, and the ability to add descriptions and tags. This not only helps you stay organized but also facilitates knowledge sharing and learning.

What You’ll Learn

In this tutorial, we’ll walk through the process of building a simple, yet functional, code snippet app using Next.js. We’ll cover the following key aspects:

  • Setting up a Next.js project
  • Creating components for displaying code snippets
  • Implementing syntax highlighting
  • Adding features for creating, editing, and deleting snippets (CRUD operations)
  • Using a simple data storage solution (e.g., local storage or a basic database)
  • Deploying your app

By the end of this tutorial, you’ll have a fully functional code snippet app that you can customize and expand to suit your specific needs. You’ll also gain valuable experience with Next.js and its core features.

Prerequisites

Before we dive in, make sure you have the following installed on your machine:

  • Node.js and npm (or yarn)
  • A code editor (e.g., VS Code, Sublime Text)
  • Basic knowledge of HTML, CSS, and JavaScript

Step-by-Step Guide

1. Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app code-snippet-app

This command will create a new directory called code-snippet-app with all the necessary files and dependencies. Navigate into the project directory:

cd code-snippet-app

Now, start the development server:

npm run dev

Your app should now be running on http://localhost:3000. Open this address in your browser to see the default Next.js welcome page.

2. Project Structure and Component Setup

Let’s create the basic structure of our app. We’ll start by creating a few components to handle different parts of the UI. Inside the components directory (you may need to create this directory in the root of your project), create the following files:

  • SnippetList.js: Displays a list of code snippets.
  • SnippetDetail.js: Shows the details of a single snippet.
  • SnippetForm.js: Allows users to create or edit snippets.

We’ll also modify the pages/index.js file to serve as our main app page. Here’s a basic outline of how these components will work together:

  • The index.js page will be the main entry point, displaying a list of snippets using the SnippetList component.
  • Clicking on a snippet in the list will navigate to a detail page (we’ll create this later), using the SnippetDetail component to show the full snippet and its details.
  • The SnippetForm component will be used for both creating and editing snippets.

3. Creating the SnippetList Component

Let’s start with SnippetList.js. This component will fetch and display a list of snippets. For now, we’ll use some dummy data. Later, we’ll replace this with data fetched from local storage or a database.

// components/SnippetList.js
import Link from 'next/link';

const SnippetList = ({ snippets }) => {
  return (
    <div>
      <h2>Code Snippets</h2>
      <ul>
        {snippets.map(snippet => (
          <li>
            
              <a>{snippet.title}</a>
            
          </li>
        ))}
      </ul>
    </div>
  );
};

export default SnippetList;

In this component, we’re mapping over an array of snippets (which we’ll pass as props from the main page) and rendering a list item for each snippet. We’re also using the Link component from Next.js to create links to the snippet detail pages (we’ll create these pages in the next steps).

4. Creating the SnippetDetail Component

Now, let’s create the SnippetDetail.js component. This component will display the details of a single snippet, including the code itself, a description, and any associated tags. This example will also use dummy data for demonstration purposes.

// components/SnippetDetail.js
import { useRouter } from 'next/router';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs';

const SnippetDetail = ({ snippet }) => {
  const router = useRouter();
  const { id } = router.query;

  if (!snippet) {
    return <p>Loading...</p>; // Or handle the case where the snippet isn't found
  }

  return (
    <div>
      <h2>{snippet.title}</h2>
      <p>Description: {snippet.description}</p>
      
        {snippet.code}
      
      <p>Tags: {snippet.tags.join(', ')}</p>
    </div>
  );
};

export default SnippetDetail;

This component uses the useRouter hook from Next.js to access the route parameters (in this case, the snippet ID). It then fetches the snippet data based on the ID. It also uses a syntax highlighter (we’ll install this later) to display the code with proper formatting. The language prop will determine the syntax highlighting style.

5. Setting Up the Snippet Form Component

The SnippetForm.js component will allow users to create and edit snippets. This component will contain a form with fields for the snippet’s title, description, code, language (e.g., JavaScript, Python), and tags.


// components/SnippetForm.js
import { useState } from 'react';

const SnippetForm = ({ initialSnippet, onSubmit }) => {
  const [title, setTitle] = useState(initialSnippet?.title || '');
  const [description, setDescription] = useState(initialSnippet?.description || '');
  const [code, setCode] = useState(initialSnippet?.code || '');
  const [language, setLanguage] = useState(initialSnippet?.language || 'javascript');
  const [tags, setTags] = useState(initialSnippet?.tags?.join(',') || '');

  const handleSubmit = (e) => {
    e.preventDefault();
    const newSnippet = {
      title,
      description,
      code,
      language,
      tags: tags.split(',').map(tag => tag.trim()),
    };
    onSubmit(newSnippet);
    // Clear the form
    setTitle('');
    setDescription('');
    setCode('');
    setLanguage('javascript');
    setTags('');
  };

  return (
    
      <div>
        <label>Title:</label>
         setTitle(e.target.value)} required />
      </div>
      <div>
        <label>Description:</label>
        <textarea id="description"> setDescription(e.target.value)} />
      </div>
      <div>
        <label>Code:</label>
        <textarea id="code"> setCode(e.target.value)} required />
      </div>
      <div>
        <label>Language:</label>
         setLanguage(e.target.value)}>
          JavaScript
          Python
          HTML
          CSS
          {/* Add more languages as needed */}
        
      </div>
      <div>
        <label>Tags (comma separated):</label>
         setTags(e.target.value)} />
      </div>
      <button type="submit">{initialSnippet ? 'Update' : 'Create'}</button>
    
  );
};

export default SnippetForm;

This component uses the useState hook to manage the form’s input values. The onSubmit prop is a function that will be called when the form is submitted, allowing us to handle the form data in the parent component (e.g., the index.js page or a dedicated edit page).

6. Implementing Syntax Highlighting

To make the code snippets look good, we’ll use a syntax highlighter. We’ll use the react-syntax-highlighter library. Install it using npm or yarn:

npm install react-syntax-highlighter

Now, import the necessary components and styles in SnippetDetail.js (as shown in the code example above). You’ll also need to import a style theme. The example uses docco, but you can choose from various themes available in the library.

7. Modifying the Main Page (index.js)

Now, let’s modify the pages/index.js file to display the list of snippets. We’ll import the SnippetList component and pass it some dummy data for now.

// pages/index.js
import SnippetList from '../components/SnippetList';

const snippets = [
  {
    id: '1',
    title: 'Hello World in JavaScript',
    description: 'A basic hello world program.',
    code: 'console.log("Hello, world!");',
    language: 'javascript',
    tags: ['javascript', 'beginner'],
  },
  {
    id: '2',
    title: 'Python Function',
    description: 'Example of a Python function.',
    code: 'def greet(name):n  print(f"Hello, {name}!")nngreet("World")',
    language: 'python',
    tags: ['python', 'function'],
  },
];

const HomePage = () => {
  return (
    <div>
      <h1>Code Snippet App</h1>
      
    </div>
  );
};

export default HomePage;

In this example, we’ve defined an array of snippets and passed it as a prop to the SnippetList component. The SnippetList component will then render the list of snippets.

8. Creating Dynamic Routes for Snippet Details

Next.js makes it easy to create dynamic routes. We want each snippet to have its own detail page, accessible via a URL like /snippets/[id], where [id] is the unique ID of the snippet. Create a file named [id].js inside the pages/snippets directory (you’ll need to create the snippets directory if it doesn’t exist):


// pages/snippets/[id].js
import { useRouter } from 'next/router';
import SnippetDetail from '../../components/SnippetDetail';

const snippets = [
  {
    id: '1',
    title: 'Hello World in JavaScript',
    description: 'A basic hello world program.',
    code: 'console.log("Hello, world!");',
    language: 'javascript',
    tags: ['javascript', 'beginner'],
  },
  {
    id: '2',
    title: 'Python Function',
    description: 'Example of a Python function.',
    code: 'def greet(name):n  print(f"Hello, {name}!")nngreet("World")',
    language: 'python',
    tags: ['python', 'function'],
  },
];

const SnippetDetailPage = () => {
  const router = useRouter();
  const { id } = router.query;

  const snippet = snippets.find(snippet => snippet.id === id);

  return (
    <div>
      
    </div>
  );
};

export default SnippetDetailPage;

This file uses the useRouter hook to get the id from the URL. It then fetches the snippet data (using the dummy data for now) and passes it to the SnippetDetail component.

9. Implementing CRUD Operations (Create, Read, Update, Delete)

Now, let’s add the ability to create, edit, and delete snippets. For simplicity, we’ll use local storage to store the snippets. In a real-world application, you’d likely use a database.

9.1. Create Snippet

In index.js or a dedicated page for creating snippets, import the SnippetForm component and add a function to handle form submissions.


// pages/index.js (or a separate create page)
import { useState, useEffect } from 'react';
import SnippetList from '../components/SnippetList';
import SnippetForm from '../components/SnippetForm';

const HomePage = () => {
  const [snippets, setSnippets] = useState([]);

  useEffect(() => {
    // Load snippets from local storage on component mount
    const storedSnippets = localStorage.getItem('snippets');
    if (storedSnippets) {
      setSnippets(JSON.parse(storedSnippets));
    }
  }, []);

  useEffect(() => {
    // Save snippets to local storage whenever the snippets state changes
    localStorage.setItem('snippets', JSON.stringify(snippets));
  }, [snippets]);

  const handleCreateSnippet = (newSnippet) => {
    const id = String(Date.now()); // Generate a unique ID
    const snippetWithId = { ...newSnippet, id };
    setSnippets([...snippets, snippetWithId]);
  };

  return (
    <div>
      <h1>Code Snippet App</h1>
      
      
    </div>
  );
};

export default HomePage;

This code does the following:

  • Uses the useState hook to manage the snippets state.
  • Uses the useEffect hook to load snippets from local storage when the component mounts.
  • Uses the useEffect hook to save snippets to local storage whenever the snippets state changes.
  • Defines a handleCreateSnippet function that adds a new snippet to the snippets state.
  • Renders the SnippetForm component, passing the handleCreateSnippet function as the onSubmit prop.

9.2. Read Snippets

The read operation is already implemented in the SnippetList component and the snippet detail page (/snippets/[id].js), which retrieves and displays the snippets.

9.3. Update Snippet

To update a snippet, we’ll need to allow the user to edit the existing snippet. We can modify the index.js page or create a dedicated edit page. Let’s add an edit button to the SnippetDetail component and create an edit page.


// components/SnippetDetail.js (modified)
import Link from 'next/link';
import { useRouter } from 'next/router';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs';

const SnippetDetail = ({ snippet }) => {
  const router = useRouter();
  const { id } = router.query;

  if (!snippet) {
    return <p>Loading...</p>; // Or handle the case where the snippet isn't found
  }

  return (
    <div>
      <h2>{snippet.title}</h2>
      <p>Description: {snippet.description}</p>
      
        {snippet.code}
      
      <p>Tags: {snippet.tags.join(', ')}</p>
      
        <a>Edit</a>
      
    </div>
  );
};

export default SnippetDetail;

Next, create a new file pages/snippets/edit/[id].js:


// pages/snippets/edit/[id].js
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import SnippetForm from '../../components/SnippetForm';

const EditSnippetPage = () => {
  const router = useRouter();
  const { id } = router.query;
  const [snippet, setSnippet] = useState(null);

  useEffect(() => {
    // Load snippets from local storage
    const storedSnippets = localStorage.getItem('snippets');
    if (storedSnippets) {
      const snippets = JSON.parse(storedSnippets);
      const foundSnippet = snippets.find(snippet => snippet.id === id);
      setSnippet(foundSnippet);
    }
  }, [id]);

  const handleUpdateSnippet = (updatedSnippet) => {
    // Update the snippet in local storage
    const storedSnippets = localStorage.getItem('snippets');
    if (storedSnippets) {
      const snippets = JSON.parse(storedSnippets);
      const updatedSnippets = snippets.map(snippet =>
        snippet.id === id ? { ...snippet, ...updatedSnippet } : snippet
      );
      localStorage.setItem('snippets', JSON.stringify(updatedSnippets));
      // Optionally, redirect back to the detail page
      router.push(`/snippets/${id}`);
    }
  };

  if (!snippet) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>Edit Snippet</h1>
      
    </div>
  );
};

export default EditSnippetPage;

This code:

  • Fetches the snippet from local storage based on the ID.
  • Renders the SnippetForm component, passing the snippet data as the initialSnippet prop.
  • Defines a handleUpdateSnippet function that updates the snippet in local storage.
  • Uses the useRouter hook to redirect the user back to the detail page after the update.

9.4. Delete Snippet

Add a delete button to the SnippetDetail component:


// components/SnippetDetail.js (modified)
import Link from 'next/link';
import { useRouter } from 'next/router';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs';

const SnippetDetail = ({ snippet }) => {
  const router = useRouter();
  const { id } = router.query;

  const handleDelete = () => {
    const storedSnippets = localStorage.getItem('snippets');
    if (storedSnippets) {
      const snippets = JSON.parse(storedSnippets);
      const updatedSnippets = snippets.filter(snippet => snippet.id !== id);
      localStorage.setItem('snippets', JSON.stringify(updatedSnippets));
      router.push('/'); // Redirect to the home page after deletion
    }
  };

  if (!snippet) {
    return <p>Loading...</p>; // Or handle the case where the snippet isn't found
  }

  return (
    <div>
      <h2>{snippet.title}</h2>
      <p>Description: {snippet.description}</p>
      
        {snippet.code}
      
      <p>Tags: {snippet.tags.join(', ')}</p>
      
        <a>Edit</a>
      
      <button>Delete</button>
    </div>
  );
};

export default SnippetDetail;

This adds a handleDelete function that removes the snippet from local storage and redirects the user to the home page.

10. Styling Your App

While this tutorial focuses on functionality, you should definitely add styling to improve the user experience. You can use CSS, CSS-in-JS libraries (like styled-components), or a CSS framework like Tailwind CSS. For example, you could add basic styling to the components:


/* components/SnippetList.module.css */
.snippetList {
  list-style: none;
  padding: 0;
}

.snippetItem {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


// components/SnippetList.js (modified)
import styles from './SnippetList.module.css';

const SnippetList = ({ snippets }) => {
  return (
    <div>
      <h2>Code Snippets</h2>
      <ul>
        {snippets.map(snippet => (
          <li>
            {/* ... rest of the code ... */}
          </li>
        ))}
      </ul>
    </div>
  );
};

11. Deployment

Once you’ve built your app, you’ll want to deploy it. Next.js makes deployment easy. You can deploy your app to various platforms, including:

  • Vercel (recommended, as it’s built by the Next.js team)
  • Netlify
  • AWS
  • Google Cloud
  • Other hosting providers that support Node.js applications

To deploy to Vercel, you’ll typically:

  1. Push your code to a Git repository (e.g., GitHub, GitLab, Bitbucket).
  2. Sign up for a Vercel account (if you don’t have one).
  3. Import your Git repository into Vercel.
  4. Vercel will automatically build and deploy your app.

Common Mistakes and How to Fix Them

  • Incorrect import paths: Double-check your import paths to ensure they are relative to the current file. Use absolute imports if you’ve configured them in your jsconfig.json or tsconfig.json.
  • Syntax errors in code snippets: Ensure the code snippets you enter are syntactically correct for the chosen language. Syntax highlighting can help you catch these errors.
  • Missing dependencies: Make sure you’ve installed all the necessary dependencies (e.g., react-syntax-highlighter). Check your project’s package.json file to verify the dependencies.
  • Incorrect data handling: When using local storage, be sure to serialize your data using JSON.stringify() before saving and deserialize it using JSON.parse() when retrieving.
  • Not handling errors: Add error handling to your code (e.g., using try...catch blocks) to gracefully handle potential errors and provide informative error messages to the user.

Key Takeaways

  • Next.js is a powerful framework for building interactive web applications.
  • Creating a code snippet app involves setting up components, implementing syntax highlighting, and managing data.
  • Dynamic routes and local storage are useful for handling individual snippet pages and basic data persistence.
  • Proper styling and error handling are crucial for a good user experience.
  • Deployment to platforms like Vercel is straightforward with Next.js.

FAQ

Q: Can I use a database instead of local storage?

A: Yes, absolutely! Using a database (e.g., MongoDB, PostgreSQL, or a cloud-based service like Firebase) is recommended for more complex applications and when you need to store more data or share data across multiple users. You would replace the local storage operations with database interactions.

Q: How can I add search functionality?

A: You can add a search bar and filter the snippets based on the search query. You’ll need to update the SnippetList component to filter the snippets array based on the user’s input. This can be done using the filter() method.

Q: How do I handle different code languages?

A: The react-syntax-highlighter library supports a wide range of languages. You’ll need to specify the correct language prop (e.g., language="javascript") for each snippet. You can also add a language selection dropdown in your form.

Q: How can I improve the user interface?

A: Consider using a UI component library (e.g., Material UI, Ant Design, Chakra UI) or a CSS framework (e.g., Tailwind CSS, Bootstrap) to create a more polished and responsive user interface. You can also add features like code folding, line numbers, and a dark mode.

Q: How do I handle authentication and user accounts?

A: For user authentication, you’ll need to implement user registration, login, and logout functionality. This typically involves using a backend service (e.g., a serverless function or a dedicated API) to handle user authentication and authorization. You would then store user-specific data associated with each code snippet.

Building a code snippet app with Next.js is a great way to learn about web development and improve your coding skills. By following the steps outlined in this tutorial, you can create a useful tool for organizing and sharing your code snippets. Remember to experiment, customize the app to your liking, and explore the many features that Next.js has to offer. The knowledge gained from this project can be applied to many other web development projects, and it sets the stage for more complex and feature-rich applications. With each iteration, you’ll become more proficient and confident in your ability to build powerful and engaging web applications. Embrace the learning process, and enjoy the journey of coding!

More posts