https://github.com/sh20raj/next-comments
Next Comments is a lightweight, easy-to-use commenting system for Next.js applications, powered by Utterances. It allows you to add a GitHub-powered comments section to your website effortlessly.
https://github.com/sh20raj/next-comments
comments next nextjs utterances
Last synced: about 1 year ago
JSON representation
Next Comments is a lightweight, easy-to-use commenting system for Next.js applications, powered by Utterances. It allows you to add a GitHub-powered comments section to your website effortlessly.
- Host: GitHub
- URL: https://github.com/sh20raj/next-comments
- Owner: SH20RAJ
- License: mit
- Created: 2024-06-27T14:17:49.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-27T14:31:37.000Z (almost 2 years ago)
- Last Synced: 2025-03-22T06:32:24.986Z (about 1 year ago)
- Topics: comments, next, nextjs, utterances
- Language: TypeScript
- Homepage: https://sh20raj.github.io/next-comments
- Size: 60.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next Comments
[](https://www.npmjs.com/package/next-comments)
[](https://github.com/SH20RAJ/next-comments/stargazers)
[](https://github.com/SH20RAJ/next-comments/blob/main/LICENSE)
Next Comments is a lightweight, easy-to-use commenting system for Next.js applications, powered by Utterances. It allows you to add a GitHub-powered comments section to your website effortlessly.
## Features
- Seamless integration with Next.js
- Supports App Router
- Utilizes GitHub issues for comments
- Automatic theme switching with `next-themes`
- Customizable and easy to set up
## Installation
Install the package via npm:
```sh
npm install next-comments
```
## Usage
### Step 1: Import and Use the `Comments` Component
Add the `Comments` component to your Next.js pages. Here’s an example:
```tsx
// app/posts/[id]/page.tsx
'use client';
import { Comments } from 'next-comments';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
const fetchArticle = async (id) => {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
return res.json();
};
const ArticlePage = () => {
const { id } = useParams();
const [article, setArticle] = useState(null);
useEffect(() => {
const fetchData = async () => {
const data = await fetchArticle(id);
setArticle(data);
};
fetchData();
}, [id]);
if (!article) return
Loading...;
return (
{article.title}
{article.body}
);
};
export default ArticlePage;
```
### Step 2: Setting Up Utterances
1. Go to your GitHub repository.
2. Navigate to the "Settings" tab.
3. Scroll down to the "Features" section and enable the "Issues" feature.
4. Visit [utterances/utterances](https://github.com/utterance/utterances) and follow the instructions to configure Utterances for your repository.
### Step 3: Customize the `Comments` Component
The `Comments` component accepts `id` and `repo` as props. If `repo` is not provided, it defaults to `shade-cool/next-comments-vault`.
```tsx
```
### Step 4: Theme Switching
Next Comments supports automatic theme switching using `next-themes`. Ensure you have `next-themes` configured in your Next.js project.
## Props
- `id`: A unique identifier for the comment thread, typically the article ID.
- `repo` (optional): The GitHub repository for storing comments. Defaults to `shade-cool/next-comments-vault`.
## Example
```tsx
import { Comments } from 'next-comments';
const ExamplePage = () => {
return (
Example Article
This is an example article.
);
};
export default ExamplePage;
```
## Contributing
Contributions are welcome! Please read the [Contributing Guide](https://github.com/SH20RAJ/next-comments/blob/main/CONTRIBUTING.md) for more information.
## License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/SH20RAJ/next-comments/blob/main/LICENSE) file for details.
## Links
- [npm package](https://www.npmjs.com/package/next-comments)
- [GitHub repository](https://github.com/SH20RAJ/next-comments)
---
Enhance your Next.js application with a robust commenting system powered by GitHub issues. Integrate Next Comments today and foster community engagement on your platform!