¿Cómo agregar testimonios en Next.js?

En este artículo, vamos a aprender cómo podemos agregar Testimonios 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.

Enfoque: Para agregar nuestros Testimonios vamos a utilizar el paquete react-testimonial. El paquete de testimonios de reacción nos ayuda a agregar los testimonios en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete testimonial de reacción y luego agregaremos el testimonio 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-testimonial usando el siguiente comando:

npm i react-testimonial

Estructura del proyecto: Se verá así.

Agregar los testimonios: podemos agregar fácilmente los testimonios en nuestra aplicación después de instalar el paquete de testimonios de reacción. Para este ejemplo, vamos a agregar el testimonio a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import Testimonial from 'react-testimonial';
import React from 'react'
  
export default function index() {
  return (
    <div>
      <h3>GeeksforGeeks - Testimonial</h3>
      <Testimonial>
          <div>
              <div style={{width:'60%', 
                           border:'2px solid black',
                           marginLeft:'30px'}}>
                  <span>
                  GeeksforGeeks Text 1
                  </span>
                  <p>GfG1</p>
              </div>
          </div>
          <div style={{width:'60%', 
                       border:'2px solid black',
                       marginLeft:'30px'}}>
              <div>
                  <span>
                  GeeksforGeeks Text 2
                  </span>
                  <p>GfG2</p>
              </div>
          </div>
      </Testimonial>
    </div>
  )
}

Explicación: en el ejemplo anterior primero, estamos importando el componente Testimonial del paquete instalado. Después de eso, agregaremos nuestros testimonios y el nombre del autor dentro de nuestro componente Testimonios.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: