How to implement MyApp.getInitialProps() with Mantine UI

[gfazioli]

Question 💬

Hello,
I'm using the Maintine UI and I would like to use the dark mode.
In order to do that, I need to use the getInitialProps() in my _app.tsx.

By adding the Mantine example

MyApp.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  // get color scheme from cookie
  colorScheme: getCookie('mantine-color-scheme', ctx) || 'light',
});

the pageProps.session becomes undefined

export default function MyApp({
	Component,
	pageProps,
}: AppPropsWithLayout) {
	// Use the layout defined at the page level, if available
	const getLayout = Component.getLayout ?? ((page) => page);

	// hook will return either 'dark' or 'light' on client
	// and always 'light' during ssr as window.matchMedia is not available
	const preferredColorScheme = useColorScheme();

	const [colorScheme, setColorScheme] =
		useState<ColorScheme>(preferredColorScheme);

	console.log("!!!!", { colorScheme, setColorScheme, preferredColorScheme });

	const toggleColorScheme = (value?: ColorScheme) => {
		const nextColorScheme =
			value || (colorScheme === "dark" ? "light" : "dark");
		setColorScheme(nextColorScheme);
		// when color scheme is updated save it to cookie
		setCookie("mantine-color-scheme", nextColorScheme, {
			maxAge: 60 * 60 * 24 * 30,
		});
	};

	return (
		<ColorSchemeProvider
			colorScheme={colorScheme}
			toggleColorScheme={toggleColorScheme}
		>
			<MantineProvider
				withGlobalStyles
				withNormalizeCSS
				theme={{ colorScheme }}
			>
				<SessionProvider session={pageProps.session} refetchInterval={0}>
					{getLayout(<Component {...pageProps} />)}
				</SessionProvider>
			</MantineProvider>
		</ColorSchemeProvider>
	);
}

What do I need to do to implement a getSession() or unstable_getServerSession() there?

How to reproduce ☕️

Use the code sample in the question above

Contributing 🙌🏽

No, I am afraid I cannot help regarding this