How to load Runtime environmental variables in NextJS application

Question

I am deploying a NextJS app in various K8 environments, each passing it's own variables. I can pass them in and get them with getServerSideProps(), but as this function works on page components (or at least that's what the docs say), I have to add them in every single page through which my users can "enter" the application. This becomes error prone.

What I would like, ideally, is to be able to have a getServerSideProps() on the _app.tsx, which I cannot.

What is the best alternative?

Answer 1

getInitialProps seems what you want.

App.getInitialProps = async ({  ctx }: AppContext) => {
  const something = await getData();

  return { pageProps: { something } }
}

export default App;