Toast

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

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ToastContainer />
      <Component {...pageProps} />
    </>
  );
}

const logout = async () => {
  await firebase.auth().signOut();
  dispatch({
    type: "LOGOUT",
  });
  toast.success("🚀 Logged out successfully!");
  router.push("/login");
};

Usage

npm i react-toastify

Import two helper functions in the root directory

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

This import gives access to the toast object where all the methods live. Since it is in the root directory, it is accessible over all the pages in your app.

Use the below syntax to get access to the toast component and use it accordingly.

toast.success("🚀 Logged out successfully!");

Live Demo