En este artículo, vamos a aprender cómo podemos agregar una sección de comentarios en NextJs. Usando la sección de comentarios, los usuarios pueden escribir sus pensamientos y consultas en su aplicación NextJs.
NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.
Enfoque: Para agregar nuestra sección de Comentarios vamos a utilizar la plataforma Disqus. Disqus es una plataforma comunitaria en red utilizada por cientos de miles de sitios en toda la web. Primero, crearemos una cuenta en la plataforma Disqus e instalaremos el paquete Disqus y luego crearemos un nuevo archivo en el que escribiremos el código para nuestra sección de comentarios. Luego, en nuestra página de inicio, importaremos nuestra sección de comentarios.
Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:
npx create-next-app gfg
Instale el paquete requerido: ahora instalaremos el paquete Disqus usando el siguiente comando:
npm install disqus-react
Estructura del proyecto: Se verá así.
Crear cuenta en Disqus: A continuación, debemos crear una nueva cuenta en Disqus. Entonces, para hacer esto, siga los pasos a continuación:
1. Vaya al sitio oficial de Disqus y haga clic en Comenzar. Luego haga clic en Registrarse.
2. Después de registrarse, haga clic en el botón ‘Quiero instalar Disqus en mi sitio’.
3. Después de eso, ingrese el nombre de su sitio web y elija una categoría.
Eso es todo. Ahora estamos listos para agregar la sección de comentarios en nuestra aplicación NextJs.
Agregar sección de comentarios: ahora, para agregar nuestra sección de comentarios, vamos a crear una nueva carpeta en nuestro directorio gfg con el nombre ‘components’ y dentro de esta carpeta, crearemos un nuevo archivo javascript con el nombre ‘Comment.js ‘.
Agregue el siguiente contenido en nuestro archivo 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 (
<div>
<DiscussionEmbed
shortname={disqusShortname}
config={disqusConfig}
/>
</div>
)
}
export default Comments;
En el código anterior, primero estamos importando DiscussionEmbed desde nuestro disqus-react. Después de eso, estamos creando un nuevo componente con el nombre Comentarios y dentro de este componente, estamos almacenando el disqusShortname. URL del sitio web, identificador y título en diferentes variables constantes. Entonces estamos devolviendo nuestra función DiscussionEmbed.
Ahora podemos importar el archivo anterior a nuestra página de inicio para mostrar nuestra sección de comentarios.
Agregue el siguiente contenido en el archivo index.js :
Javascript
import React from 'react'
import Comments from '../components/Comment'
export default function Text() {
return (
<div>
<h1>Comments - GeeksforGeeks</h1>
<Comments/>
</div>
)
}
Ahora, cuando ejecutamos nuestra aplicación NextJs, el archivo index.js actuará como la página de inicio de la aplicación.
Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.
npm run dev
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA