Show Toastify Alerts in Next.js/ React

Step 1

install next.js using cli

yarn create next-app

yarn add react-toastify

and use this

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

import { toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

toast.configure()
export default function Notification() {

    const notify = async (e) =>{
        e.preventDefault()
        toast.success('Hello world', {position: toast.POSITION.TOP_CENTER })
      }


  return (
      <>

      <div className="col-lg-12 pt-4">
                        <button
                          type="submit"
                          className="btn btn-primary text-uppercase w-100 h-px-48"
                          onClick={notify}
                          >
                          Notification
                        </button>

             </div>
     </>
  )
}