Build a Simple Next.js Interactive Blog Post App with Comments

Written by

FixTechToday

in

In the ever-evolving landscape of web development, creating dynamic and interactive web applications has become the norm. One of the most common requirements for modern websites is the ability to display and manage content, and a blog post app is a perfect example of this. This tutorial will guide you through building a simple, yet functional, blog post application using Next.js, a powerful React framework known for its server-side rendering and static site generation capabilities. We’ll focus on adding a crucial element: comments. This will enable user engagement, making your blog posts more interactive and valuable to your readers.

Why Build a Blog Post App with Comments?

Adding comments to a blog post app offers several benefits. Firstly, it fosters a sense of community. Readers can share their thoughts, ask questions, and engage in discussions related to your content. This interaction not only keeps visitors on your site longer but also provides valuable feedback on your articles. Secondly, comments can improve SEO. Search engines often consider user engagement metrics, such as comments, when ranking pages. More comments can signal to search engines that your content is valuable and relevant, potentially leading to higher search rankings. Finally, it provides you, the content creator, with valuable insights. You can gauge the audience’s reaction, identify areas of confusion, and tailor future content to address their needs and interests.

Prerequisites

Before diving into the code, make sure you have the following installed on your system:

  • Node.js (version 14 or higher)
  • npm or yarn (package manager)
  • A code editor (VS Code, Sublime Text, etc.)

It’s also helpful to have a basic understanding of HTML, CSS, JavaScript, and React. Don’t worry if you’re not an expert; we’ll break down the concepts into manageable steps.

Setting Up Your Next.js Project

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

npx create-next-app my-blog-app

Replace “my-blog-app” with your desired project name. This command will set up a basic Next.js application with all the necessary dependencies. Navigate into your project directory:

cd my-blog-app

Now, start the development server:

npm run dev

or

yarn dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page.

Creating Blog Post Components

Next, let’s create the components for our blog posts. We’ll need a way to display individual blog posts and a way to list them. Inside the “pages” directory, create a new folder called “posts”. Inside the “posts” folder, create a file called “[slug].js”. This is a dynamic route that will handle individual post pages.

Here’s a basic structure for the “[slug].js” file:

// pages/posts/[slug].js

import { useRouter } from 'next/router';

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

  // Fetch post data based on the slug (e.g., from a database or file)
  const post = getPostData(slug);

  if (!post) {
    return <p>Loading...</p>; // Or display an error message
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <Comments slug={slug} /> {/*  Component for comments */}
    </div>
  );
}

export async function getStaticPaths() {
  // This function returns an array of possible paths for your dynamic routes.
  // In a real application, you'd fetch the list of slugs from a database.
  const paths = [
    { params: { slug: 'first-post' } },
    { params: { slug: 'second-post' } },
  ];

  return {
    paths,
    fallback: true, // or 'blocking'
  };
}

export async function getStaticProps({ params }) {
  // This function fetches the data for a specific post based on the slug.
  // In a real application, you'd fetch the data from a database or file.
  const post = {
    title: 'Example Post',
    content: 'This is the content of the example post.',
  };

  return {
    props: {
      post,
    },
  };
}

export default Post;

In this example, we’re using the Next.js router to get the “slug” from the URL. We use a placeholder function `getPostData(slug)` to fetch the post content. Replace this with your actual data fetching mechanism (e.g., fetching from a file, an API, or a database). We’ll address the `Comments` component later.

You’ll also need to create a file to display the list of blog posts. In the “pages” directory, create a file called “index.js” (or modify the existing one). This will be the main page of your blog.

// pages/index.js

import Link from 'next/link';

function HomePage() {
  const posts = getPosts(); // Fetch all posts

  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>
  );
}

export function getStaticProps() {
  // Fetch posts data (replace with your actual data source)
  const posts = [
    { slug: 'first-post', title: 'First Post' },
    { slug: 'second-post', title: 'Second Post' },
  ];

  return {
    props: {
      posts,
    },
  };
}

export default HomePage;

In this example, we use the `Link` component from Next.js for client-side navigation between posts. The `getPosts()` function is a placeholder; replace it with your actual logic to fetch post data. For now, we’ll hardcode some sample posts.

Adding Comments: The Heart of Interactivity

Now, let’s implement the comments functionality. We’ll create a simple comment section that allows users to submit and view comments. For simplicity, we’ll store the comments in an array in the component’s state. In a real-world application, you would store them in a database (e.g., MongoDB, PostgreSQL, Firebase).

Create a new component file called “Comments.js” in a “components” folder (create this folder if you don’t already have one) in your project’s root directory. Here’s the code for the “Comments.js” component:

// components/Comments.js

import { useState, useEffect } from 'react';

function Comments({ slug }) {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');

  useEffect(() => {
    // Simulate fetching comments from a database (replace with your actual data fetching)
    const fetchComments = async () => {
      // In a real application, you'd fetch the comments from an API endpoint.
      // For this example, we'll use local storage as a mock database.
      const storedComments = localStorage.getItem(`comments-${slug}`);
      if (storedComments) {
        setComments(JSON.parse(storedComments));
      }
    };

    fetchComments();
  }, [slug]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (newComment.trim() === '') return;

    const comment = {
      id: Date.now(), // Generate a unique ID
      text: newComment,
      timestamp: new Date().toISOString(),
    };

    const updatedComments = [...comments, comment];
    setComments(updatedComments);
    setNewComment('');

    // Save comments to local storage (replace with database saving)
    localStorage.setItem(`comments-${slug}`, JSON.stringify(updatedComments));
  };

  return (
    <div>
      <h3>Comments</h3>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>
            <p>{comment.text}</p>
            <p>{new Date(comment.timestamp).toLocaleString()}</p>
          </li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <textarea
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
          rows="4"
          cols="50"
          placeholder="Add a comment..."
        ></textarea>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default Comments;

Let’s break down the `Comments` component:

  • **State:** We use the `useState` hook to manage two pieces of state: `comments` (an array of comment objects) and `newComment` (the text entered by the user).
  • **useEffect Hook:** This hook is used to fetch the comments when the component mounts and whenever the `slug` prop changes. We use `localStorage` to simulate a database. In a real application, you’d fetch comments from an API.
  • **handleSubmit Function:** This function is called when the user submits the comment form. It adds the new comment to the `comments` array, clears the input field, and, crucially, saves the updated comments to `localStorage`.
  • **Rendering:** The component renders a list of comments and a form for submitting new comments.

Remember to import this component into your `[slug].js` file.

Connecting the Components

Now, let’s connect everything. In your `[slug].js` file, make sure you import the `Comments` component and render it within the post’s content area. Also, make sure you provide the `slug` prop to the `Comments` component, so it knows which post’s comments to display.

// pages/posts/[slug].js

import { useRouter } from 'next/router';
import Comments from '../../components/Comments';

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

  // Fetch post data based on the slug
  const post = getPostData(slug);

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

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <Comments slug={slug} /> {/*  Component for comments */} 
    </div>
  );
}

export async function getStaticPaths() {
  // This function returns an array of possible paths for your dynamic routes.
  // In a real application, you'd fetch the list of slugs from a database.
  const paths = [
    { params: { slug: 'first-post' } },
    { params: { slug: 'second-post' } },
  ];

  return {
    paths,
    fallback: true, // or 'blocking'
  };
}

export async function getStaticProps({ params }) {
  // This function fetches the data for a specific post based on the slug.
  // In a real application, you'd fetch the data from a database or file.
  const post = {
    title: 'Example Post',
    content: 'This is the content of the example post.',
  };

  return {
    props: {
      post,
    },
  };
}

export default Post;

With these changes, your blog post app should now display comments below each post. You can type in comments, submit them, and see them appear (and persist in local storage). Remember to replace the placeholder data fetching functions with your actual data source.

Styling Your Blog Post App

While the functionality is there, the app likely looks quite plain. Let’s add some basic styling to make it more visually appealing. You can use CSS, CSS-in-JS (like styled-components), or a CSS framework like Tailwind CSS. For this example, we’ll use basic CSS.

Create a file called “styles/global.css” in your project’s root directory (or modify the existing one). Add the following CSS rules:


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

h1, h2, h3 {
  margin-bottom: 10px;
}

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

li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

Import this CSS file into your “_app.js” file (located in the “pages” directory) to apply the styles globally. If you don’t have an “_app.js” file, create one. It should look like this:

// pages/_app.js

import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

Now, your blog post app should have a more polished look.

Common Mistakes and How to Fix Them

Building a Next.js app, especially one with dynamic features like comments, can present some challenges. Here are some common mistakes and how to avoid them:

  • **Incorrect Data Fetching:** The most common mistake is failing to fetch data correctly. Make sure you understand how Next.js handles data fetching with `getStaticProps`, `getStaticPaths`, and `getServerSideProps`. Use these functions appropriately based on your data source and whether you need server-side rendering or static site generation. For example, if your data changes frequently, `getServerSideProps` might be a better choice.
  • **Incorrect Routing:** Dynamic routes (like `[slug].js`) can be tricky to set up. Double-check your file names, and ensure you’ve correctly implemented `getStaticPaths` if you’re using static site generation. Make sure your links are pointing to the correct paths.
  • **State Management Issues:** Incorrectly managing state in React can lead to unexpected behavior. Use the `useState` hook correctly to update state and trigger re-renders. Consider using a state management library like Redux or Zustand for more complex applications.
  • **Cross-Origin Resource Sharing (CORS) Errors:** If you’re fetching data from an external API, you might encounter CORS errors. This happens when the API server doesn’t allow requests from your domain. You can fix this by configuring CORS on the API server or using a proxy server.
  • **Not Handling Errors:** Always handle potential errors gracefully. Use `try…catch` blocks when fetching data and display informative error messages to the user if something goes wrong. Don’t just let your app crash!
  • **Forgetting to Import Components:** Make sure you import all of the components you are using in a page, and that you have all the necessary closing tags.
  • **Performance Issues:** Be mindful of performance. Optimize images, use code splitting, and consider using techniques like memoization to prevent unnecessary re-renders. Next.js provides built-in features to help with performance.

Enhancements and Next Steps

This is a basic implementation, and there’s plenty of room for improvement. Here are some ideas for enhancing your blog post app:

  • **Database Integration:** Instead of using `localStorage`, integrate a real database (e.g., MongoDB, PostgreSQL, Firebase) to store comments. This will allow you to store and manage comments more effectively and scale your application.
  • **User Authentication:** Implement user authentication so users can create accounts, log in, and leave comments under their own names.
  • **Comment Moderation:** Add moderation features so you can approve or reject comments before they are displayed.
  • **Rich Text Editor:** Use a rich text editor (e.g., Draft.js, Quill.js) to format the content of your blog posts.
  • **SEO Optimization:** Implement SEO best practices, such as adding meta descriptions, title tags, and optimized image alt text. Use a sitemap generator.
  • **Pagination:** If you have a large number of blog posts, implement pagination to improve performance and user experience.
  • **Advanced Comment Features:** Allow users to reply to comments, upvote/downvote comments, and receive email notifications for new comments.
  • **Deployment:** Deploy your application to a hosting platform like Vercel, Netlify, or AWS.

Key Takeaways

Building a blog post app with comments in Next.js is a fantastic way to learn about web development and create a dynamic and engaging website. By understanding the core concepts of Next.js, React components, state management, and data fetching, you can build powerful and interactive applications. Remember to start small, break down the project into manageable steps, and gradually add more features. Don’t be afraid to experiment and learn from your mistakes. With each iteration, you’ll gain valuable experience and improve your skills. Embrace the power of Next.js and React to create user-friendly and feature-rich web applications that captivate your audience and leave a lasting impression.

More posts