¿Cómo agregar una ventana emergente en NextJS?

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

Enfoque: para agregar nuestra ventana emergente en NextJs, usaremos el paquete reactjs-popup. El paquete reactjs-popup nos ayuda a integrar diferentes tipos de ventanas emergentes. Primero, instalaremos el paquete reactjs-popup y luego agregaremos ventanas emergentes 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 reactjs-popup usando el siguiente comando:

npm i reactjs-popup

Estructura del proyecto: Se verá así.

Agregar ventana emergente: en este ejemplo, vamos a agregar la ventana emergente en la página de inicio de nuestra aplicación usando el paquete que instalamos. Para esto, agregue el siguiente contenido en el archivo index.js .

import React from 'react';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
  
export default function PopupGfg(){
  return(
  <div>
    <h4>NextJs Popup - GeeksforGeeks</h4>
    <Popup trigger={<button> Click to open popup </button>} 
     position="right center">
      <div>GeeksforGeeks</div>
      <button>Click here</button>
    </Popup>
  </div>
  )
};

Explicación: en el ejemplo anterior primero, estamos importando el componente Popup del paquete react-popup. Después de eso, estamos usando nuestro componente emergente para agregar una ventana emergente con un botón para activar la ventana emergente.

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

npm run dev

Producción: