How to specify variables used in SSR at runtime?

[michaelschufi]

We are using SSR for virtually all of our pages, because we fetch content dynamically. That's why there's also no need to resolve environment variables at build time.

How can I specify environment variables to be resolved not at buildtime but at runtime? Those variables would be used on the server and client side, but can be different for different environments.

[rafaelalmeidatk]

You can use the Runtime Configuration: https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

[michaelschufi]

It works and also doesn't...

I specified the publicRuntimeConfig like

require('dotenv').config(); // don't have a .env at build time
module.exports = {
  publicRuntimeConfig: {
    key1: process.env.KEY_1
    key2 process.env.KEY_2,
  },
};

However, a file, which initializes a rest client and returns it

const restClient = createClient({
  key1: publicRuntimeConfig.key1,
  key2: publicRuntimeConfig.key2,
});
export default restClient;

throws an error at build time because the variables are not there.
If I specify a default value for the config vars the build goes through, but I'm worried that something won't work later on.

Is building this file more of a "formal" thing if we will be using SSR throughout anyway? Could I use the restClient on the client side on a page with getInitialProps?

[rafaelalmeidatk]

Ah yeah, if you don't have the env vars at build time the values from publicRuntimeConfig will be undefined. When building your project Next will "run" your pages so it is expected, this is not a problem because publicRuntimeConfig requires the pages that use it to be server-side rendered. As long as you start the server with the env variables later, the correct values will be available when requested

[rafaelalmeidatk]

Could I use the restClient on the client side on a page with getInitialProps?

Yes, the publicRuntimeConfig values are available both for the server and the client

[michaelschufi]

Hi thanks for the quick reply.
Currently I have the problem that Next will run all the helper functions (even though, I have only getInitialProps pages), which call the mentioned init function. But the init function of this client is checking if the arguments are correct, which they aren't with e.g. empty string.

I will test it with some default values and see if I can get it to build. Afterwards, I should see if it works. :)

[michaelschufi]

Using a working default value at buildtime seems to be working. Even though this exact value is not needed at runtime and can be changed using different environment variables.

When building your project Next will "run" your pages so it is expected, this is not a problem because publicRuntimeConfig requires the pages that use it to be server-side rendered.

This is what confused me the most. I expected Next not to run the code if no site has to be statically generated. But even for the statistics it generates, this has to be done.