Move the Toaster
to _app.js
Instead of importing and rendering <Toaster />
on each page, you an put it in _app.js
to avoid repetition.
// _app.js
import { ThemeProvider } from "../context/theme";
import TopNav from "../components/nav/TopNav";
import Head from "next/head";
import { Toaster } from "react-hot-toast";
const MyApp = ({ Component, pageProps }) => {
return (
<ThemeProvider>
<Head>
<link rel="stylesheet" href="/css/styles.css" />
</Head>
<TopNav />
<Component {...pageProps} />
<Toaster />
</ThemeProvider>
);
};
export default MyApp;