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.
See Demo :- https://article.shade.cool/p/31
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:
- Go to the Utterances GitHub page.
- 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.
Top comments (0)