How to expose environment variables from server to the browser without extra XHR requests?

[empz]

So I want to expose some environment variables from the server to the browser during the initial request.

I'd want something like using getServerSideProps in _app which doesn't seem to be supported.

I don't want to use NEXT_PUBLIC because that replaces the values at build time and I want the same build to be deployable to multiple environments, with different environment variables, without the need to build for each one.

Is my only option to create some /api routes and request those in the client?

These are configuration values that I need through the whole app and I was thinking that there should be a simple way to expose these values during initial server rendering and without the need to inject the actual values during build.

Am I missing something here?

[arunoda]

@eparizzi if that case, you can get those from getServerSideProps in each page. May be you can you can have some wrapper function which does this automatically.

export const getServerSideProps = wrapItWithEnv(async () => {
   return {
     props: {}
   }
})

This is something just came to my mind. I didn't test it.

[empz]

Yeah, well, I want to avoid having to remember to add that to every single page I create. There should be a central way of doing this. I don't think it's a crazy scenario I'm asking for =/