从Nx14迁移至Nx16后Next.js项目启动失败问题排查

1. 修正next.config.js核心问题 #

1.1 调整withNx导入路径 #

Nx 15+ 已将所有@nrwl/*包迁移至@nx/*命名空间，原导入路径不再适用：

// 替换旧导入语句
// const { withNx } = require('@nrwl/next/plugins/with-nx');
const { withNx } = require('@nx/next');

1.2 修正withNx调用逻辑 #

当前嵌套传递配置的方式会导致Nx无法正确合并配置，改为直接将完整配置对象传入withNx：

const { withNx } = require('@nx/next');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

process.env.I18NEXT_DEFAULT_CONFIG_PATH = `${__dirname}/next-i18next.config.js`;
const { i18n } = require('./next-i18next.config');

module.exports = withNx({
  i18n,
  transpilePackages: ['monaco-editor'],
  nx: {
    svgr: true,
  },
  webpack: (config, { isServer }) => {
    // 移除手动添加的next-transpile-modules loader：Next.js 13+已通过transpilePackages内置该功能
    // 原代码中以下部分可删除：
    // if (!isServer) {
    //   nextConfig.transpilePackages.forEach((packageName) => {
    //     config.module.rules.push({
    //       test: new RegExp(`[/\\]node_modules[/\\]${packageName}[/\\].*\\.js$`),
    //       use: 'next-transpile-modules',
    //     });
    //   });
    // }

    // 适配Nx+Next的webpack配置结构，调整全局CSS loader规则
    let globalCssRule = config.module.rules.find(rule => 
      rule.test?.test?.('.css') && rule.issuer?.not?.includes?.('_app')
    );
    if (globalCssRule) {
      globalCssRule.issuer.not = [
        ...(Array.isArray(globalCssRule.issuer.not) ? globalCssRule.issuer.not : [globalCssRule.issuer.not]),
        /[\\/]node_modules[\\/]monaco-editor[\\/]/
      ];
    }

    config.plugins.push(
      new MonacoWebpackPlugin({
        languages: ['sql'],
        filename: 'static/[name].worker.js',
      })
    );

    return config;
  },
});

1.3 清理冗余依赖 #

Next.js 13+ 已内置transpilePackages功能，无需保留next-transpile-modules：

npm uninstall next-transpile-modules
# 或使用yarn
yarn remove next-transpile-modules

2. 确保project.json配置一致性 #

你的serve目标默认使用development配置，对应build:development的输出目录是tmp/apps/spacedeck，但报错路径指向dist，需：

• 执行命令时显式指定开发环境，避免默认匹配生产配置：

nx run-many --projects spacedeck --target serve --parallel --configuration=development

• 确认build目标的defaultConfiguration与serve的配置逻辑无冲突，当前设置为production不影响开发环境的调用。

3. 验证依赖版本统一 #

确保所有@nx/*包版本均为16.x，执行以下命令检查：

nx report

若版本不一致，更新所有Nx相关包：

nx migrate latest
npm install

4. 清理缓存并重新构建 #

Nx缓存可能残留旧路径信息，执行清理后重新构建：

nx reset
nx build spacedeck --configuration=development
nx serve spacedeck --configuration=development

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