无法从Google Cloud Run为Docker化NextJS应用设置NEXT_PUBLIC_环境变量

Next.js 中带NEXT_PUBLIC_前缀的环境变量是构建时注入的——构建过程中会把这些变量直接替换进客户端代码，生成的静态JS包中已经是固化的值，运行时通过Cloud Run设置的环境变量无法覆盖已编译的代码，这就是你遇到的核心问题。后端变量（无NEXT_PUBLIC_前缀）能正常读取，是因为它们只在服务器运行时读取，不会被编译进客户端代码。

不需要为每个客户单独构建镜像，通过运行时从服务器端注入客户端所需变量的方式即可实现需求，以下是具体实现方案：

方案1：App Router 下的服务器端注入（推荐） #

去掉NEXT_PUBLIC_前缀，将变量设为普通环境变量（比如SERVER_BASE_URL），在根布局（服务器组件）中将变量注入到客户端全局对象：

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  // 服务器端读取Cloud Run设置的环境变量
  const serverBaseUrl = process.env.SERVER_BASE_URL;

  return (
    <html lang="zh-CN">
      <body>
        {/* 将变量注入客户端全局作用域 */}
        <script
          dangerouslySetInnerHTML={{
            __html: `window.__APP_CONFIG = { serverBaseUrl: "${serverBaseUrl}" };`,
          }}
        />
        {children}
      </body>
    </html>
  );
}

在客户端组件中，直接读取全局变量：

// app/components/ClientComponent.tsx
'use client';

export default function ClientComponent() {
  const serverBaseUrl = window.__APP_CONFIG.serverBaseUrl;
  return <div>当前服务地址：{serverBaseUrl}</div>;
}

方案2：Pages Router 下的 getServerSideProps 注入 #

如果使用Pages Router，可通过getServerSideProps在根应用组件中传递变量：

// pages/_app.tsx
function MyApp({ Component, pageProps, serverBaseUrl }) {
  // 可将变量存入React Context，方便全局使用
  return <Component {...pageProps} serverBaseUrl={serverBaseUrl} />;
}

export async function getServerSideProps() {
  return {
    props: {
      serverBaseUrl: process.env.SERVER_BASE_URL,
    },
  };
}

export default MyApp;

客户端组件直接接收props使用即可。

无需修改现有Dockerfile，只需确保：

• 构建阶段不包含.env文件（保持当前逻辑）
• Cloud Run部署时设置SERVER_BASE_URL变量（替代原来的NEXT_PUBLIC_SERVER_BASE_URL）

• 不要在客户端代码中直接读取无NEXT_PUBLIC_前缀的敏感变量，避免信息泄露（你的场景中SERVER_BASE_URL是公开域名，无风险）
• 若需注入多个变量，可统一封装到__APP_CONFIG对象中，避免全局变量污染

内容的提问来源于stack exchange，提问作者dokgu