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;