En este artículo, vamos a aprender cómo podemos agregar Tweets en 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.
Planteamiento: Para agregar nuestros tweets vamos a usar el paquete react-tweet-embed. El paquete react-tweet-embed nos ayuda a agregar tweets en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete react-tweet-embed y luego agregaremos un tweet en nuestra página de inicio.
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 react-tweet-embed usando el siguiente comando:
npm i react-tweet-embed
Estructura del proyecto: Se verá así.
Agregar los tweets: podemos agregar fácilmente los tweets en nuestra aplicación después de instalar el paquete react-tweet-embed. Para este ejemplo, vamos a agregar tweets a nuestra página de inicio.
Agregue el siguiente contenido en el archivo index.js :
Javascript
import TweetEmbed from 'react-tweet-embed'
import React from 'react'
export default function Tweets() {
return (
<div>
<h3>GeeksforGeeks - Tweet</h3>
<TweetEmbed id='1456503289512710147'
options={{theme: 'dark' }}/>
</div>
)
}
Explicación: en el ejemplo anterior primero, estamos importando el componente TweetEmbed del paquete instalado. Después de eso, agregaremos el parámetro id y opciones en nuestro componente TweetEmbed. Puede encontrar la identificación del tweet en el enlace del tweet.
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