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?

score 1 · Accepted Answer · answered Jun 14 '23 at 15:41

1

getInitialProps seems what you want.

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

  return { pageProps: { something } }
}

export default App;

answered Jun 14 '23 at 15:41

r4bb1t

76
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 16 '23 at 09:40

How to load Runtime environmental variables in NextJS application

1 Answers1