How to add Popup in NextJS ?

In this article, we are going to learn how we can add Popup in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. 

Approach: To add our Popup in NextJs we are going to use the reactjs-popup package. The reactjs-popup package helps us to integrate different types of popups. So first, we will install the reactjs-popup package and then we will add popups on our homepage.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

Install the required package: Now we will install the reactjs-popup package using the below command:

npm i reactjs-popup

Project Structure: It will look like this.

Adding Popup: In this example, we are going to add the popup on the homepage of our app using the package that we installed. For this, add the below content in the index.js file.

.trigger-button {
    padding: 10px 20px;
    background-color: #0070f3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .trigger-button:hover {
    background-color: #005bb5;
  }
  
  /* Popup modal overlay */
  .popup-overlay {
    background: rgba(0, 0, 0, 0.5);
  }
  
  /* Popup modal content */
  .modal {
    background: white;
    border-radius: 8px;
    padding: 20px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  
  .header {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .content {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .actions .button {
    padding: 10px 20px;
    background-color: #0070f3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .actions .button:hover {
    background-color: #005bb5;
  }
  

'use client'
import React from 'react';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import './globals.css'; // Import the CSS file

export default function PopupGfg() {
  return (
    <div>
      <h4>Next.js Popup - GeeksforGeeks</h4>
      <Popup trigger={<button className="trigger-button">Click to open popup</button>} position="right center" modal nested>
        {close => (
          <div className="modal">
            <button className="close" onClick={close}>
              &times;
            </button>
            <div className="header"> GeeksforGeeks </div>
            <div className="content">
              This is a simple popup example.
            </div>
            <div className="actions">
              <button className="button" onClick={() => {
                console.log('Button clicked');
                close();
              }}>Click here</button>
            </div>
          </div>
        )}
      </Popup>
    </div>
  );
}

Explanation: In the above example first, we are importing the Popup component from the react-popup package. After that, we are using our Popup component to add a popup with a button to trigger the popup.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: