Theo's Typesafe CultTTC
Theo's Typesafe Cult•4y ago
JLN

Why does that work? - Runtime Config with Nextjs

(unsure about the tag, so I am just going with both, feel free to correct me on it tho)
Could some please explain why this working?

I am working with runtime environment variables right now. As noted in the docs of nextjs it says that the page is required to be ssr'ed in order to use the publicRuntimeConfig (https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration)

My page looks like this:
const LazyComponent = dynamic(() => import('path/to/component'), {
  ssr: false
});

const Page = () => {
   ...
   <LazyComponent />
   ... 
}

// Force SSR
export const getServerSideProps = () => {}

export default Page;


The runtime enviroment variables are only needed inside the LazyComponent which is dynamically imported on the client.
Steps I went through:
- Build the Project
- Start the Project with some Env Vars -> works ✅
- Change Env Vars and restart the project -> works ✅

So its working like I want it to be, but I cant grasp why.

Is it because during the SSR the publicRuntimeConfig gets populated and is available for all the others components? Even if they just get rendered on the client?
next.config.js: Runtime Configuration | Next.js
Add client and server runtime configuration to your Next.js app.
next.config.js: Runtime Configuration | Next.js
Was this page helpful?