Next.js Discord

Discord Forum

How to extend App with getInitialProps?

Unanswered
Golden northern bumble bee posted this in #help-forum
Open in Discord
Golden northern bumble beeOP
I'm configuring [Unleash](https://docs.getunleash.io/reference/sdks/next-js) with Next.js and I wonder how to add getInitialProps to the App itself and not to the pages.

11 Replies

Golden northern bumble beeOP
The problem is that the example from the docs doesn't work:
export default function CustomApp({
  Component,
  pageProps,
  toggles,
  context,
}: AppProps & Data) {
  return (
    <FlagProvider
      config={{
        bootstrap: toggles,
        context,
      }}
    >
      <Component {...pageProps} />
    </FlagProvider>
  );
}

CustomApp.getInitialProps = async (ctx: AppContext) => {
  const context = {
    userId: "123",
  };

  const { toggles } = await getFrontendFlags(); // use Unleash Proxy

  return {
    ...(await App.getInitialProps(ctx)),
    bootstrap: toggles,
    context, // pass context along so client can refetch correct values
  };
};
because... you cannot extend your App like that (at least not anymore)
One doesn't simply put dot and write getInitialProps after a random function in TypeScript, right?
There is another way of getting Unleash initialized at the back-end - it's to use getServerSideProps
but the problem is - I don't want to add the same code to dozen of pages
How can I add some common server-side code to _app.ts?