_app.tsx

En este archivo contiene el component padre el cual engloba los proveedoresr que se usan en nuestra aplicación. Tambien varias configuraciones.
/* eslint-disable react/button-has-type */
import { GetServerSidePropsContext } from "next";
import { useState } from "react";
import { AppProps } from "next/app";
import { getCookie, setCookie } from "cookies-next";
import Head from "next/head";
import {
  MantineProvider,
  ColorScheme,
  ColorSchemeProvider,
} from "@mantine/core";
import { ModalsProvider } from "@mantine/modals";
 
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { SessionContextProvider } from "@supabase/auth-helpers-react";
import { NotificationsProvider } from "@mantine/notifications";
import { MyUserContextProvider } from "../utils/useUser";
 
import { AppShellDemo } from "../components/ContainerApp/MantineApp";
 
export default function App(props: AppProps & { colorScheme: ColorScheme }) {
  const [supabaseClient] = useState(() => createBrowserSupabaseClient());
  const { Component, pageProps } = props;
  const [colorScheme, setColorScheme] =
    useState < ColorScheme > props.colorScheme;
 
  const toggleColorScheme = (value?: ColorScheme) => {
    const nextColorScheme =
      value || (colorScheme === "dark" ? "light" : "dark");
    setColorScheme(nextColorScheme);
    setCookie("mantine-color-scheme", nextColorScheme, {
      maxAge: 60 * 60 * 24 * 30,
    });
  };
 
  return (
    <>
      <Head>
        <title>Eventos Poli</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
        <link rel="shortcut icon" href="/favicon.svg" />
      </Head>
      <SessionContextProvider supabaseClient={supabaseClient}>
        <ColorSchemeProvider
          colorScheme={colorScheme}
          toggleColorScheme={toggleColorScheme}
        >
          <MantineProvider
            theme={{ colorScheme }}
            withGlobalStyles
            withNormalizeCSS
          >
            <MyUserContextProvider>
              <ModalsProvider>
                <NotificationsProvider>
                  <AppShellDemo>
                    <Component {...pageProps} />
                  </AppShellDemo>
                </NotificationsProvider>
              </ModalsProvider>
            </MyUserContextProvider>
          </MantineProvider>
        </ColorSchemeProvider>
      </SessionContextProvider>
    </>
  );
}
 
App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  colorScheme: getCookie("mantine-color-scheme", ctx) || "light",
});
Referencias

Last updated on December 15, 2022
Introducción a las rutas _document.tsx