在 NextJS 中添加评论部分

在本文中，我们将学习如何在 NextJs 中添加评论部分。使用评论部分，用户可以在您的 NextJs 应用程序中写下他们的想法和查询。

NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：要添加我们的评论部分，我们将使用 Disqus 平台。 Disqus 是一个网络社区平台，被网络上数十万个站点使用。因此，首先，我们将在 Disqus 平台上创建一个帐户并安装 Disqus 包，然后我们将创建一个新文件，我们将在其中为我们的评论部分编写代码。然后在我们的主页上，我们将导入我们的评论部分。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 Disqus 包：

npm install disqus-react

项目结构：它看起来像这样。

在 Disqus 中创建帐户：接下来我们必须在 Disqus 中创建一个新帐户。所以要做到这一点，请按照以下步骤操作：

1. 进入 Disqus 官网，点击开始。然后点击注册。

2. 注册后，点击“我想在我的网站上安装 Disqus”按钮。

3. 之后，输入您的网站名称并选择一个类别。

而已。现在我们准备在 NextJs 应用程序中添加评论部分。

添加评论部分：现在要添加我们的评论部分，我们将在 gfg 目录中创建一个名为“components”的新文件夹，在此文件夹中，我们将创建一个名为“Comment.js ”的新 javascript 文件。

在我们的Comment.js文件中添加以下内容：

Javascript

import {DiscussionEmbed} from "disqus-react"
  
const Comments = () => {
  const disqusShortname = "Demo-GfG"
  
  const disqusConfig = {
    url: "http://localhost:3000",
    identifier:'123', 
    title: "Demo Post" 
  }
  
  return (
    

      
    
  )
}
  
export default Comments;

在上面的代码中，我们首先从我们的 disqus-react 中导入 DiscussionEmbed。之后，我们将创建一个名为 Comments 的新组件，并在该组件内存储 disqusShortname。不同常量变量中的网站 URL、标识符和标题。然后我们返回 DiscussionEmbed函数。

现在我们可以将上述文件导入我们的主页以显示我们的评论部分。

在index.js文件中添加以下内容：

Javascript

import React from 'react'
import Comments from '../components/Comment'
  
export default function Text() {
  return (
    

      
Comments - GeeksforGeeks
      
    
  )
}

现在，当我们运行 NextJs 应用程序时，index.js 文件将充当应用程序的主页。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

输出：