Add Utterances Comment System in Next.js App in App Router

Integrating Utterances as a Commenting System in Your Next.js Application Using the App Router

Introduction

Adding a commenting system to your blog or article site enhances user interaction and engagement. Utterances, a lightweight option that uses GitHub issues to manage comments, is an excellent choice. This guide will walk you through integrating Utterances into your Next.js application using the App Router, ensuring each article has its own unique comment section.

Prerequisites

• Basic understanding of Next.js and React
• A GitHub repository to store comments

Step-by-Step Integration

Step 1: Install Utterances

First, you need to set up Utterances. Follow these steps:

1. Go to the Utterances GitHub page.
2. Click "Install Utterances" and follow the instructions to install the app on your GitHub repository.

Step 2: Create the Comments Component

Create a Comments component in the components directory:

'use client';

import { useEffect, useRef } from 'react';

const Comments = ({ issueTerm }) => {
  const commentsSection = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://utteranc.es/client.js';
    script.async = true;
    script.crossOrigin = 'anonymous';
    script.setAttribute('repo', 'shade-cool/article');
    script.setAttribute('issue-term', issueTerm);
    script.setAttribute('theme', 'github-light');
    commentsSection.current.appendChild(script);
  }, [issueTerm]);

  return <div ref={commentsSection} />;
};

export default Comments;

Step 3: Create the Article Page Component

Create an article page component that will fetch and display article details along with the Comments component:

// app/posts/[id]/page.js

import Comments from '@/components/Comments';
import { getArticleById } from '@/lib/actions'; // Adjust the import according to your project structure

const ArticlePage = async ({ params }) => {
  const article = await getArticleById(params.id);

  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
      <Comments issueTerm={article.id} />
    </div>
  );
};

export default ArticlePage;

Step 4: Implement the Data Fetching Function

Ensure you have a function to fetch article details by ID in your lib/actions.js file:

// lib/actions.js

export const getArticleById = async (id) => {
  // Implement your logic to fetch article by ID
  // Example: fetch from a database or an API
  const response = await fetch(`https://api.example.com/articles/${id}`);
  const article = await response.json();
  return article;
};

Benefits of Using App Router and Memoization

• Performance: Memoization improves performance by avoiding unnecessary re-renders.
• Modern Approach: The App Router is the preferred modern way of routing in Next.js.

Use themes

'use client';

import { useEffect, useRef } from 'react';
import { useTheme } from 'next-themes';

const Comments = ({ issueTerm }) => {
  const { theme } = useTheme();
  const commentsSection = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://utteranc.es/client.js';
    script.async = true;
    script.crossOrigin = 'anonymous';
    script.setAttribute('repo', 'shade-cool/article');
    script.setAttribute('issue-term', issueTerm);
    script.setAttribute('theme', theme === 'dark' ? 'github-dark' : 'github-light');
    commentsSection.current.appendChild(script);
  }, [issueTerm, theme]);

  return <div ref={commentsSection} />;
};

export default Comments;

Conclusion

Integrating Utterances provides a seamless and efficient way to manage comments on your Next.js site. By following these steps, you can enhance your website’s interactivity and engage your readers effectively. This guide ensures each article has its unique comment section based on the article ID, leveraging the benefits of Next.js App Router and modern React practices.