Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago
Meierschlumpf

How to use getInitialProps within _app.tsx?

I'm trying to get the current color-scheme which is saved in a cookie into the app page. Is there a simple way to do that?

I already tried different solutions, which did not work. Currently I have the following:
App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  colorScheme: getCookie("color-scheme", ctx) || "light",
});


But if I try to access the colorScheme in the App function there is noting to find:
const App = (props: AppProps) => {
  const {
    Component,
    pageProps: { session, ...pageProps },
  } = props;

  console.log(props);

  return <Component {...pageProps} />;
};


The console.log results in the following: 
{
  Component: [Function: Home],  
  pageProps: {
    _nextI18Next: {
      initialI18nStore: [Object],
      initialLocale: 'de',
      ns: [Array],
      userConfig: [Object]
    }
  },
  __N_SSP: true,
  router: ServerRouter {
    route: '/',
    pathname: '/',
    query: {},
    asPath: '/',
    isFallback: false,
    basePath: '',
    locale: undefined,
    locales: undefined,
    defaultLocale: undefined,
    isReady: true,
    domainLocales: undefined,
    isPreview: false,
    isLocaleDomain: false
  }
}
Was this page helpful?