Build a Next.js Interactive Web-Based Blog with Comments

Written by

javascriptdebugged

in

In the dynamic world of web development, creating interactive web applications is a sought-after skill. One common feature that enhances user engagement is a commenting system. Imagine a blog where readers can share their thoughts, engage in discussions, and build a community around your content. This tutorial will guide you through building a simple, yet functional, interactive web-based blog with comments using Next.js, a powerful React framework.

Why Build a Blog with Comments?

Adding a commenting system to your blog offers several advantages:

  • Enhanced User Engagement: Comments encourage readers to interact with your content, increasing the time they spend on your site.
  • Community Building: A commenting system fosters a sense of community around your blog, as readers can connect with each other.
  • Valuable Feedback: Comments provide valuable feedback on your content, helping you understand what resonates with your audience.
  • SEO Benefits: User-generated content, like comments, can improve your search engine rankings.

This tutorial will not only teach you how to build this feature, but also provide a strong foundation for learning more about Next.js and web development best practices.

Prerequisites

Before you start, make sure you have the following:

  • Node.js and npm (or yarn) installed: You’ll need Node.js to run JavaScript code and npm (Node Package Manager) or yarn to manage project dependencies.
  • Basic understanding of JavaScript and React: Familiarity with JavaScript and React concepts will be helpful.
  • A code editor: Choose your favorite code editor, such as Visual Studio Code, Sublime Text, or Atom.

Setting Up the 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 blog-with-comments

This command will create a new Next.js project named “blog-with-comments”. Navigate into the project directory:

cd blog-with-comments

Now, let’s install the necessary dependencies. We will need a library to handle the comments. For this tutorial, we will use a simple in-memory storage, but in a real-world scenario, you would integrate with a database. Let’s install a package for handling the comment data.

npm install --save uuid

or

yarn add uuid

Project Structure Overview

Before diving into the code, let’s get familiar with the project structure. After running `create-next-app`, your project will have the following structure:

blog-with-comments/
├── node_modules/
├── pages/
│   ├── _app.js
│   ├── index.js
│   └── api/
│       └── comments.js
├── public/
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── next.config.js
├── package-lock.json
├── package.json
└── README.md
  • pages/: This directory contains the pages of your application. Each file in this directory represents a route.
  • pages/index.js: This is the homepage of your blog.
  • pages/api/comments.js: This directory will contain the API routes for managing comments.
  • styles/: This directory contains your CSS or styling files.
  • public/: This directory is used for static assets like images.

Creating the Blog Post Page

Let’s create a blog post page. Inside the `pages` directory, create a new folder named `posts`. Inside the `posts` folder, create a file named `[slug].js`. The `[slug].js` file will dynamically generate blog post pages based on the post slug.

Here’s the basic structure for the `[slug].js` file:

// pages/posts/[slug].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>This is the content for blog post: {slug}.</p>
    </div>
  );
}

This code does the following:

  • Imports the `useRouter` hook from `next/router`.
  • Uses `useRouter` to access the route parameters.
  • Retrieves the `slug` parameter from the URL (e.g., in `/posts/my-first-post`, the slug would be “my-first-post”).
  • Displays the slug in an `h1` tag.

Creating a Dummy Blog Post Data

For the sake of this tutorial, let’s create a simple array of blog post data. Create a new file called `posts.js` inside the root directory of your project (alongside `package.json`). Add the following code:

// posts.js
export const posts = [
  {
    slug: 'first-post',
    title: 'My First Blog Post',
    content: 'This is the content of my first blog post.',
  },
  {
    slug: 'second-post',
    title: 'Another Great Post',
    content: 'Here is the content for the second post.',
  },
];

This is a simple array of objects, where each object represents a blog post with a `slug`, `title`, and `content`. In a real application, you would fetch this data from a database or a content management system (CMS).

Fetching the Post Data

Now, let’s fetch the data for a specific post based on its slug. Modify the `[slug].js` file to include the following code:


// pages/posts/[slug].js
import { useRouter } from 'next/router';
import { posts } from '../../posts'; // Import the posts array

export default function Post() {
  const router = useRouter();
  const { slug } = router.query;

  // Find the post with the matching slug
  const post = posts.find((post) => post.slug === slug);

  // If the post is not found, return a 404 page
  if (!post) {
    return <p>Post not found</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

This code does the following:

  • Imports the `posts` array from the `posts.js` file.
  • Uses the `find()` method to search for a post in the `posts` array that matches the current slug.
  • If no post matches the slug, it renders a “Post not found” message.
  • Displays the post title and content if the post is found.

Creating the Blog Post List

Now, let’s create a simple list of blog posts on the homepage (`index.js`). Open `pages/index.js` and replace the existing code with the following:


// pages/index.js
import Link from 'next/link';
import { posts } from '../posts';

export default function Home() {
  return (
    <div>
      <h1>My Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/posts/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

This code does the following:

  • Imports the `Link` component from `next/link` for client-side navigation.
  • Imports the `posts` array.
  • Maps over the `posts` array and renders a list item (`li`) for each post.
  • Uses the `Link` component to create a link to the corresponding post page. The `href` prop specifies the URL path using the post slug.

Adding Basic Styling

To make your blog look a bit better, let’s add some basic styling. Open the `styles/globals.css` file and add the following CSS:


body {
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: blue;
}

a:hover {
  text-decoration: underline;
}

This CSS sets the font, adds some margins, and styles the links.

Implementing the Commenting System

Now, for the core of the tutorial: adding the commenting system. We’ll break this down into several steps:

1. Creating the Comment Input Form

First, let’s create a form where users can enter their comments. Modify the `pages/posts/[slug].js` file to include the following code:


// pages/posts/[slug].js
import { useRouter } from 'next/router';
import { useState } from 'react';
import { posts } from '../../posts';
import { v4 as uuidv4 } from 'uuid';

export default function Post() {
  const router = useRouter();
  const { slug } = router.query;
  const [comments, setComments] = useState([]);
  const [commentText, setCommentText] = useState('');

  // Find the post with the matching slug
  const post = posts.find((post) => post.slug === slug);

  // If the post is not found, return a 404 page
  if (!post) {
    return <p>Post not found</p>;
  }

  const handleCommentChange = (event) => {
    setCommentText(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    // Send comment to the API route
    const response = await fetch('/api/comments', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ slug, text: commentText }),
    });

    if (response.ok) {
      const newComment = await response.json();
      setComments([...comments, newComment]); // Add the new comment
      setCommentText(''); // Clear the input field
    } else {
      console.error('Failed to add comment');
    }
  };

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      <h2>Comments</h2>
      <form onSubmit={handleSubmit}>
        <textarea
          value={commentText}
          onChange={handleCommentChange}
          placeholder="Add a comment..."
          rows={4}
          cols={50}
        />
        <br />
        <button type="submit">Submit Comment</button>
      </form>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.text}</li>
        ))}
      </ul>
    </div>
  );
}

This code does the following:

  • Imports the `useState` hook from React to manage the comment text and comments.
  • Imports the `uuid` library to generate unique IDs for the comments.
  • Initializes `comments` state as an empty array and `commentText` as an empty string.
  • Creates a `handleCommentChange` function to update the `commentText` state when the user types in the textarea.
  • Creates a `handleSubmit` function that is called when the form is submitted:
    • Prevents the default form submission behavior.
    • Sends a POST request to the `/api/comments` API route with the post slug and the comment text.
    • If the request is successful, it adds the new comment to the `comments` array and clears the comment input field.
    • If the request fails, it logs an error to the console.
    • Renders a form with a textarea for the comment and a submit button.
    • Displays the comments in an unordered list.

    2. Creating the API Route for Comments

    Now, let’s create the API route to handle the comment submissions. Create a new file named `comments.js` inside the `pages/api` directory. Add the following code:

    
// pages/api/comments.js
import { v4 as uuidv4 } from 'uuid';

// In-memory storage for comments (replace with a database in a real-world scenario)
let commentsData = {};

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { slug, text } = req.body;
    const id = uuidv4();
    const newComment = { id, text };

    // Initialize comments for the post if they don't exist
    if (!commentsData[slug]) {
      commentsData[slug] = [];
    }

    commentsData[slug].push(newComment);
    res.status(200).json(newComment);
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

    This code does the following:

    • Imports the `uuid` library to generate unique IDs for the comments.
    • Creates an in-memory storage, `commentsData`, to store the comments. This is a simple implementation; in a real-world scenario, you would use a database.
    • Defines a handler function that handles the API requests:
      • Checks if the request method is POST.
      • Extracts the `slug` and `text` from the request body.
      • Generates a unique ID for the comment using `uuidv4()`.
      • Creates a new comment object.
      • Adds the new comment to the `commentsData` array, grouped by the post slug.
      • Returns the new comment as a JSON response with a status code of 200 (OK).
      • If the request method is not POST, it returns a 405 (Method Not Allowed) status.

    3. Displaying Comments

    Now, we need to display the comments. Modify the `pages/posts/[slug].js` file to fetch and display comments. Modify the `pages/posts/[slug].js` file to include the following code:

    
// pages/posts/[slug].js
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import { posts } from '../../posts';
import { v4 as uuidv4 } from 'uuid';

export default function Post() {
  const router = useRouter();
  const { slug } = router.query;
  const [comments, setComments] = useState([]);
  const [commentText, setCommentText] = useState('');

  // Find the post with the matching slug
  const post = posts.find((post) => post.slug === slug);

  // If the post is not found, return a 404 page
  if (!post) {
    return <p>Post not found</p>;
  }

  useEffect(() => {
    const fetchComments = async () => {
      try {
        const response = await fetch(`/api/comments?slug=${slug}`);
        if (response.ok) {
          const data = await response.json();
          setComments(data);
        } else {
          console.error('Failed to fetch comments');
        }
      } catch (error) {
        console.error('Error fetching comments:', error);
      }
    };

    fetchComments();
  }, [slug]);

  const handleCommentChange = (event) => {
    setCommentText(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    // Send comment to the API route
    const response = await fetch('/api/comments', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ slug, text: commentText }),
    });

    if (response.ok) {
      const newComment = await response.json();
      setComments([...comments, newComment]); // Add the new comment
      setCommentText(''); // Clear the input field
    } else {
      console.error('Failed to add comment');
    }
  };

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      <h2>Comments</h2>
      <form onSubmit={handleSubmit}>
        <textarea
          value={commentText}
          onChange={handleCommentChange}
          placeholder="Add a comment..."
          rows={4}
          cols={50}
        />
        <br />
        <button type="submit">Submit Comment</button>
      </form>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.text}</li>
        ))}
      </ul>
    </div>
  );
}

    This code does the following:

    • Imports the `useEffect` hook from React.
    • Uses `useEffect` to fetch comments when the component mounts and whenever the `slug` changes.
      • Inside `useEffect`, it fetches the comments using the slug as a query parameter.
      • If the request is successful, it updates the `comments` state with the fetched comments.
      • If the request fails, it logs an error to the console.

    Testing and Running the Application

    Now, let’s run your application and test the commenting system. Open your terminal and run the following command:

    npm run dev

    or

    yarn dev

    This will start the development server. Open your browser and go to `http://localhost:3000`. You should see the homepage with a list of blog posts. Click on a post to go to the post page. You should see the post title, content, a comment form, and any existing comments. Type a comment in the textarea and click the “Submit Comment” button. The comment should appear below the form. You can add more comments, and they will be displayed as well.

    Common Mistakes and How to Fix Them

    Here are some common mistakes and how to fix them:

    • Incorrect API Route Path: Double-check the API route path in your `fetch` calls. Make sure it matches the path of your API route file (e.g., `/api/comments`).
    • CORS Issues: If you’re running your frontend and backend on different domains, you might encounter CORS (Cross-Origin Resource Sharing) issues. You’ll need to configure CORS on your backend (API route) to allow requests from your frontend.
    • Missing Dependencies: Make sure you have installed all the required dependencies (e.g., `uuid`).
    • Incorrect State Management: If comments are not displaying correctly, make sure you are correctly updating the `comments` state after adding a new comment. Use the spread operator (`…`) to add the new comment to the existing array.
    • Server-Side Rendering Issues: If you’re using server-side rendering (SSR), make sure that you are handling the data fetching correctly. In this example, we are using client-side fetching.
    • Typographical Errors: Double-check for typos in your code, especially in variable names and function calls.

    Enhancements and Next Steps

    This is a basic implementation. Here are some ways you can enhance your blog:

    • Implement a Database: Replace the in-memory storage with a real database (e.g., MongoDB, PostgreSQL) to persist comments.
    • User Authentication: Add user authentication so users can create accounts and have their comments associated with their profiles.
    • Comment Moderation: Implement a moderation system to review and approve comments before they are displayed.
    • Reply to Comments: Allow users to reply to existing comments.
    • Styling: Improve the styling of your blog using CSS frameworks like Tailwind CSS or Material UI.
    • Error Handling: Implement more robust error handling to handle potential issues.
    • Pagination: Implement pagination to handle large numbers of comments.

    Key Takeaways

    • You’ve learned how to create a basic Next.js blog.
    • You’ve implemented a commenting system.
    • You understand how to use API routes in Next.js.
    • You’ve gained experience with state management in React.

    FAQ

    Here are some frequently asked questions:

    1. Can I use a different database? Yes, you can use any database you prefer. You will need to install the appropriate database driver and modify the API route code to interact with your chosen database.
    2. How can I add user authentication? You can use libraries like NextAuth.js or implement your own authentication system using JWT (JSON Web Tokens).
    3. How can I deploy this application? You can deploy your Next.js application to platforms like Vercel, Netlify, or AWS.
    4. What is the difference between client-side and server-side rendering? Client-side rendering (CSR) renders the content in the user’s browser, while server-side rendering (SSR) renders the content on the server and sends the pre-rendered HTML to the client. Next.js supports both CSR and SSR.

    Building an interactive blog with comments provides a robust foundation for more advanced web development projects. Remember that the journey of learning never truly ends. Embrace the challenges and the continual expansion of your skill set, and you will find yourself able to create more and more engaging and dynamic web applications. Keep experimenting, keep learning, and keep building. The possibilities are truly endless.

More posts