Use runtime env for some env variables rather than build-time and access them in client components

[lucifer-simplai]

Summary

I want to create a golden image of an next js application in which I can use for different clients the issue is in this scenario I want to have multiple env variables which should be picked runtime specific to each client rather than at build time. So that I do not have to create separate builds for each client and can use the same build and change the env variables in the pipeline while starting the server and it will work for all the clients.

Also some of these env variables are also used in client components, So please include ideas which allow these runtime env variables to be accessible to client components as well

NOTE: I am looking for a solution revolving around env variables only. I know this can be achieved by adding a middleware api which responds with the current env variables and using that but I am trying to avoid api call for this and look for a simpler solution if there is any.

Also

I am using next-auth. so it will be helpful if there is a work around for NEXTAUTH_URL as well. as this is one of the variables which will differ from client to client and should be picked at runtime rather than build time.

Thanks in advance

Additional information

I am using next js version 14.1.0 with app router

Example

No response

[suprunchuk]

Hi, if I understood you correctly, here's what you want to do this

docker run -p 3000:3000 \
  -e NEXT_PUBLIC_API_URL=https://api.example.com \
  -e NEXT_PUBLIC_CLIENT_ID=client123 \
  -e NEXTAUTH_URL=https://auth.example.com \
  my-nextjs-app

---

Update the next.config.js file to enable runtime configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  publicRuntimeConfig: {
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    NEXT_PUBLIC_CLIENT_ID: process.env.NEXT_PUBLIC_CLIENT_ID,
  },
  serverRuntimeConfig: {
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
  },
}
module.exports = nextConfig

Create a utility function to access runtime config in src/utils/runtimeConfig.js:

import getConfig from 'next/config'

const { publicRuntimeConfig, serverRuntimeConfig } = getConfig()

export const getRuntimeConfig = () => {
  if (typeof window === 'undefined') {
    return { ...publicRuntimeConfig, ...serverRuntimeConfig }
  }
  return publicRuntimeConfig
}

Update the src/app/page.js file:

import EnvDisplay from '../components/EnvDisplay'

export default function Home() {
  return (
    <main>
      <h1>Next.js Runtime Config Example</h1>
      <EnvDisplay />
    </main>
  )
}

Create the src/components/EnvDisplay.js component:

'use client'

import { getRuntimeConfig } from '../utils/runtimeConfig'

export default function EnvDisplay() {
  const config = getRuntimeConfig()

  return (
    <div>
      <h2>Runtime Environment Variables:</h2>
      <pre>{JSON.stringify(config, null, 2)}</pre>
    </div>
  )
}

Create a Dockerfile:

FROM node:18-alpine AS base

FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

Create a .dockerignore file:

node_modules
.next

Now, you can build the Docker image:

docker build -t my-nextjs-app .

---

application structure:

my-nextjs-app/
├── Dockerfile
├── next.config.js
├── package.json
├── src/
│   ├── app/
│   │   └── page.js
│   ├── components/
│   │   └── EnvDisplay.js
│   └── utils/
│       └── runtimeConfig.js
└── .dockerignore

If my answer helped you, please mark it as a solution to the question.

[OnkelTem]

Why are you using NEXT_PUBLIC_-prefixed variables to start with? It is my understanding, that @lucifer-simplai asks for the opposite: i.e. how to not use them, because they don't want to build variables into client code.

[lucifer-simplai]

@suprunchuk This will not work as Next.js has deprecated publicRuntimeConfig from version 14.1.0 app router. is there any else that might work ??