Nx Next.js原理图创建的应用生产构建时getInitialProps中publicRuntimeConfig为undefined

我之前也碰到过一模一样的问题，开发模式下一切正常，打包成生产环境就出问题，其实核心原因是生产构建时Next.js的配置加载时机和开发模式不同，再加上Nx的构建流程有自己的规则，导致组件顶部提前调用的getConfig()拿不到正确的配置。给你几个实用的解决办法：

方法1：把getConfig()移到getInitialProps内部调用 #

之前你在组件顶部就调用了getConfig()，生产环境下Next.js的配置还没完全初始化完成，所以拿到的是undefined。把调用移到getInitialProps里面，确保配置已经加载完毕：

import getConfig from 'next/config';

Index.getInitialProps = async ctx => {
  // 在这里调用getConfig，而不是组件顶部
  const { publicRuntimeConfig } = getConfig();
  console.log('I am here');
  console.log(publicRuntimeConfig.staticFolder); // 生产环境也能正常拿到值了
  return {};
};

方法2：确保Nx正确识别你的next.config.js #

Nx的Next.js项目有时候会忽略自定义的next.config.js，需要在项目的project.json里明确指定配置文件路径。找到targets.build.options，添加nextConfig字段：

{
  "targets": {
    "build": {
      "executor": "@nrwl/next:build",
      "options": {
        "nextConfig": "apps/your-app-name/next.config.js",
        // 其他配置...
      }
    }
  }
}

替换your-app-name为你的实际应用名称，这样Nx构建时就会正确读取你的配置了。

方法3：改用Next.js环境变量（推荐） #

其实Next.js官方更推荐用环境变量来传递公共配置，避免依赖getConfig()的时机问题。你可以：

1. 在项目根目录创建.env.production文件，添加：

NEXT_PUBLIC_STATIC_FOLDER=/static

2. 然后直接在代码里使用：

Index.getInitialProps = async ctx => {
  console.log(process.env.NEXT_PUBLIC_STATIC_FOLDER); // 开发和生产环境都能正常获取
  return {};
};

这种方式更稳定，也符合Next.js的最佳实践，Nx会自动处理这些环境变量的注入。

为什么开发模式正常？ #

开发模式下Next.js的热重载机制会提前加载所有配置，组件顶部的getConfig()能拿到值；但生产构建是经过打包优化的，配置加载时机延后，组件初始化时还没准备好，所以就出现了undefined的情况。

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