Don't inline NEXT_PUBLIC_* env vars in standalone server code?

[revmischa]

I want to deploy a standalone server with configuration that I don't have at build time. I'm trying to create a CDK construct to deploy nextjs as a lambda function, during the build I don't know what values I'll have (e.g. API URL) until after the deployment finishes. I can provide these values as environment variables to the lambda function, but they don't get picked up if they begin with NEXT_PUBLIC_. Which I get for client-side code, but I want to share some of those configs on the server side.
Is there perhaps some way to avoid the inlining of these vars in standalone mode?

No, the only values that will be inlined into the javascript bundles are the ones prefixed with NEXT_PUBLIC_ the rest are only available when actually present in the env next is being run, see related documentation here https://nextjs.org/docs/basic-features/environment-variables

Originally posted by @ijjk in #33910 (comment)

[awareness481]

There isn't a way to do that. The best solution would be making the environment variables from your server available at build time.

If your server defined environment variables are set before you run your build command (ex: npm run build) then NEXT_PUBLIC envs will work just fine

[revmischa]

Right now I'm doing it with automated search and replace on

 return Object.fromEntries(
      Object.entries(this.props.environment || {})
        .filter(([key]) => key.startsWith('NEXT_PUBLIC_'))
        .map(([key, value]) => [`"{{ ${key} }}"`, `process.env.${key}`])
    )

But maybe there is a better way.

My use case is I'm using AWS and doing a deployment with cloudformation. I don't know the values at build time of what all of my infrastructure resources will be when the deployment completes, like API URLs and such. But environment variables for the server handler will be resolved to the correct values.

[grayaustinc]

I typically use Runtime Configuration in order to work with dynamic environment variables. I do not know if that will work for you, but what I do on my projects is use a package like envalid in the next.config.(js|mjs) to wrap around the process.env input and pass it to either the serverRuntimeConfig or publicRuntimeConfig. The only downsides are explained in the linked reference above. publicRuntimeConfig also shows ALL values passed to it on every page that it is called on, so I usually just pass the serverRuntimeConfig variable that is needed (usually prefixed as NEXT_PUBLIC_ for clarity) as a prop to the pages that need access to it which is then passed into a context provider. It's a bit of a workaround, but I've had no issues after setting things up this way.

[revmischa]

I'm sure that would work but I'm trying to make a generic way to deploy NextJS apps using AWS CDK and I can't rewrite peoples' apps to use publicRuntimeConfig.

[revmischa]

This would be a really useful feature for me: disable inlining of public env vars for the sever code in a standalone build.
I'm happy to try to make the change myself if someone can point me to where this would be in the codebase.

[xrl]

@revmischa I think this is an essential behavior to configure 12 factor apps. It isn't acceptable to hard-code build time variables.

[revmischa]

@revmischa I think this is an essential behavior to configure 12 factor apps. It isn't acceptable to hard-code build time variables.

I'm glad we agree!

[rishi23root]

//next.config.js
import dotenv from "dotenv";
dotenv.config();

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  reactStrictMode: true,
  experimental: {
    cssChunking: "loose", // default
  },
  // env: process.env,
  env: {
    BALANCER_URL: process.env.BALANCER_URL,
    NEXT_PUBLIC_WEBSOCKET_URI: process.env.NEXT_PUBLIC_WEBSOCKET_URI,
    NEXT_PUBLIC_LLM_WEBSOCKET_URI: process.env.NEXT_PUBLIC_LLM_WEBSOCKET_URI,
  },
};

export default nextConfig;

i used - next-runtime-env

import Logo from "@/components/Logo";
import "@/styles/globals.css";
import type { Metadata } from "next";
import { PublicEnvProvider } from "next-runtime-env";
import localFont from "next/font/local";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        suppressHydrationWarning={true}
      >
        <PublicEnvProvider>
            {children}
        </PublicEnvProvider>
      </body>
    </html>
  );
}

const { NEXT_PUBLIC_WEBSOCKET_URI, NEXT_PUBLIC_LLM_WEBSOCKET_URI } =
    useEnvContext();