{"id":23143607,"url":"https://github.com/sh20raj/next-comments","last_synced_at":"2025-04-04T12:14:40.795Z","repository":{"id":246376427,"uuid":"820959722","full_name":"SH20RAJ/next-comments","owner":"SH20RAJ","description":"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.","archived":false,"fork":false,"pushed_at":"2024-06-27T14:31:37.000Z","size":62,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T06:32:24.986Z","etag":null,"topics":["comments","next","nextjs","utterances"],"latest_commit_sha":null,"homepage":"https://sh20raj.github.io/next-comments","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SH20RAJ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-27T14:17:49.000Z","updated_at":"2024-06-27T14:31:41.000Z","dependencies_parsed_at":"2024-06-27T17:28:47.819Z","dependency_job_id":"876bdc2c-d149-4490-9599-ed7387b2ecd8","html_url":"https://github.com/SH20RAJ/next-comments","commit_stats":null,"previous_names":["sh20raj/next-comments"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Fnext-comments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Fnext-comments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Fnext-comments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Fnext-comments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SH20RAJ","download_url":"https://codeload.github.com/SH20RAJ/next-comments/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174467,"owners_count":20896078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comments","next","nextjs","utterances"],"created_at":"2024-12-17T15:13:50.508Z","updated_at":"2025-04-04T12:14:40.774Z","avatar_url":"https://github.com/SH20RAJ.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next Comments\n\n[![npm version](https://img.shields.io/npm/v/next-comments)](https://www.npmjs.com/package/next-comments)\n[![GitHub stars](https://img.shields.io/github/stars/SH20RAJ/next-comments)](https://github.com/SH20RAJ/next-comments/stargazers)\n[![License](https://img.shields.io/npm/l/next-comments)](https://github.com/SH20RAJ/next-comments/blob/main/LICENSE)\n\nNext 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.\n\n## Features\n\n- Seamless integration with Next.js\n- Supports App Router\n- Utilizes GitHub issues for comments\n- Automatic theme switching with `next-themes`\n- Customizable and easy to set up\n\n## Installation\n\nInstall the package via npm:\n\n```sh\nnpm install next-comments\n```\n\n## Usage\n\n### Step 1: Import and Use the `Comments` Component\n\nAdd the `Comments` component to your Next.js pages. Here’s an example:\n\n```tsx\n// app/posts/[id]/page.tsx\n'use client';\n\nimport { Comments } from 'next-comments';\nimport { useEffect, useState } from 'react';\nimport { useParams } from 'next/navigation';\n\nconst fetchArticle = async (id) =\u003e {\n  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);\n  return res.json();\n};\n\nconst ArticlePage = () =\u003e {\n  const { id } = useParams();\n  const [article, setArticle] = useState(null);\n\n  useEffect(() =\u003e {\n    const fetchData = async () =\u003e {\n      const data = await fetchArticle(id);\n      setArticle(data);\n    };\n    fetchData();\n  }, [id]);\n\n  if (!article) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{article.title}\u003c/h1\u003e\n      \u003cp\u003e{article.body}\u003c/p\u003e\n      \u003cComments id={article.id.toString()} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ArticlePage;\n```\n\n### Step 2: Setting Up Utterances \n\n1. Go to your GitHub repository.\n2. Navigate to the \"Settings\" tab.\n3. Scroll down to the \"Features\" section and enable the \"Issues\" feature.\n4. Visit [utterances/utterances](https://github.com/utterance/utterances) and follow the instructions to configure Utterances for your repository.\n\n### Step 3: Customize the `Comments` Component\n\nThe `Comments` component accepts `id` and `repo` as props. If `repo` is not provided, it defaults to `shade-cool/next-comments-vault`.\n\n```tsx\n\u003cComments id={article.id.toString()} repo=\"your-github-repo/your-repo-name\" /\u003e\n```\n\n### Step 4: Theme Switching\n\nNext Comments supports automatic theme switching using `next-themes`. Ensure you have `next-themes` configured in your Next.js project.\n\n## Props\n\n- `id`: A unique identifier for the comment thread, typically the article ID.\n- `repo` (optional): The GitHub repository for storing comments. Defaults to `shade-cool/next-comments-vault`.\n\n## Example\n\n```tsx\nimport { Comments } from 'next-comments';\n\nconst ExamplePage = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eExample Article\u003c/h1\u003e\n      \u003cp\u003eThis is an example article.\u003c/p\u003e\n      \u003cComments id=\"example-article-id\" /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ExamplePage;\n```\n\n## Contributing\n\nContributions are welcome! Please read the [Contributing Guide](https://github.com/SH20RAJ/next-comments/blob/main/CONTRIBUTING.md) for more information.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/SH20RAJ/next-comments/blob/main/LICENSE) file for details.\n\n## Links\n\n- [npm package](https://www.npmjs.com/package/next-comments)\n- [GitHub repository](https://github.com/SH20RAJ/next-comments)\n\n---\n\nEnhance your Next.js application with a robust commenting system powered by GitHub issues. Integrate Next Comments today and foster community engagement on your platform!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsh20raj%2Fnext-comments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsh20raj%2Fnext-comments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsh20raj%2Fnext-comments/lists"}