NextJS 12中如何将私有JSON/CSV资产纳入生产构建包？

1. 修改next.config.js配置，强制打包私有资产 #

Next.js默认不会将src目录下的非代码文件纳入构建包，需要通过webpack配置手动复制这些文件到构建目录。在next.config.js中添加以下配置：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  webpack: (config, { isServer }) => {
    // 仅在服务端构建时复制资产，确保私有性
    if (isServer) {
      config.plugins.push(
        new CopyPlugin({
          patterns: [
            // 复制src/assets下所有JSON/CSV文件到构建后的server/assets目录
            {
              from: './src/assets/**/*.{json,csv}',
              to: './assets/[name][ext]',
              context: 'src'
            }
          ]
        })
      );
    }
    return config;
  }
};

先安装依赖包：npm install copy-webpack-plugin --save-dev

2. 动态读取文件的路径处理 #

开发和生产环境的文件路径不同，需根据环境动态生成路径：

import fs from 'fs';
import path from 'path';
import { parse } from 'csv-parser'; // 处理CSV需安装：npm install csv-parser

// 获取资产文件的绝对路径
const getAssetPath = (filename) => {
  if (process.env.NODE_ENV === 'production') {
    // 生产环境读取构建后的server/assets目录
    return path.join(process.cwd(), '.next/server/assets', filename);
  }
  // 开发环境直接读取src/assets目录
  return path.join(process.cwd(), 'src/assets', filename);
};

// 条件读取JSON文件示例
const loadPrivateJson = (jsonFileName) => {
  const filePath = getAssetPath(`${jsonFileName}.json`);
  const content = fs.readFileSync(filePath, 'utf8');
  return JSON.parse(content);
};

// 读取并解析CSV文件示例
const loadPrivateCsv = async (csvFileName) => {
  const filePath = getAssetPath(`${csvFileName}.csv`);
  const results = [];
  return new Promise((resolve, reject) => {
    fs.createReadStream(filePath)
      .pipe(parse())
      .on('data', (data) => results.push(data))
      .on('end', () => resolve(results))
      .on('error', (err) => reject(err));
  });
};

3. 验证构建结果 #

执行next build后，检查.next/server/assets目录下是否存在目标JSON/CSV文件。运行next start后，调用上述读取函数即可正常加载资产。

关键注意事项 #

• 所有资产读取逻辑必须放在服务端代码中（如API路由、getServerSideProps等），避免暴露给客户端
• 资产文件更新后，需重新执行next build才能同步到构建包
• 可调整copy-webpack-plugin的patterns规则，适配不同的文件目录结构

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