Next.js生产模式JSON解析异常问题及配置重写请求

你的核心问题是重复导出配置对象，导致第一个nextConfig里的关键配置（如pageExtensions、serverComponentsExternalPackages）被完全覆盖，同时冗余的webpack5: true配置（Next.js 12+默认启用webpack5）也可能引发构建逻辑冲突，进而导致生产模式下JSON解析异常。

以下是修复后的完整next.config.js配置：

const { webpack } = require("next/dist/compiled/webpack/webpack");
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 合并原配置中的有效项
  pageExtensions: ["middleware.tsx"],
  serverComponentsExternalPackages: ['pg'],
  webpack: (config) => {
    // 添加pg-native忽略插件
    config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /^pg-native$/ }));
    // 配置webpack fallback，避免node核心模块缺失报错
    config.resolve.fallback = {
      ...config.resolve.fallback, // 保留默认fallback配置，避免覆盖
      fs: false,
      path: false,
      dns: false,
      net: false,
      tls: false
    };
    return config;
  },
};

module.exports = nextConfig;

关键修改说明： #

• 移除了重复的module.exports，将所有配置合并到一个nextConfig对象中，确保所有配置项都能生效
• 保留了webpack配置逻辑，但通过...config.resolve.fallback继承默认配置，避免完全覆盖导致JSON解析相关的webpack loader配置丢失
• 删除了冗余的webpack5: true（Next.js 12及以上版本默认使用webpack5，无需手动声明）
• 原配置中直接写在nextConfig根节点的fs、path等属性是无效的，这些属于webpack fallback配置，需放在webpack函数内的config.resolve.fallback中

额外检查项： #

• 确保你的JSON文件导入方式正确，比如使用import data from './data.json'而非动态读取（生产模式下静态资源处理逻辑与开发模式不同）
• 检查是否有自定义webpack loader修改了JSON的解析规则，若有需确保生产模式下loader配置正确

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