如何在Next.js应用中为单个JSON文件禁用resolveJsonModule

方案1：声明JSON文件固定类型（最推荐） #

直接为该JSON文件创建配套的类型声明文件，让TypeScript直接使用你定义的类型，无需动态解析JSON内容生成类型，完全规避性能问题：

1. 在JSON文件所在的data目录下新建同名声明文件all-food-data.json.d.ts，内容如下：

import type { FoodItem } from '../你的FoodItem类型定义文件路径';

declare const allFoodData: FoodItem[];
export default allFoodData;

2. 原来的导入代码不需要做任何修改，TypeScript编译时会优先读取你写的声明文件，不会再解析JSON本身的结构，从根源解决内存溢出问题。

方案2：导入时跳过类型检查 #

如果不想额外写声明文件，可以在导入JSON的语句上添加单行类型忽略注释，直接跳过该导入的类型校验：

// @ts-expect-error 跳过大型JSON的自动类型解析，手动断言类型
import allFoodOriginal from '../data/all-food-data.json'

const allFood = allFoodOriginal as FoodItem[]

该方案改造成本极低，适合临时快速修复。

方案3：使用require导入替代import #

ES模块方式导入JSON会触发TypeScript的类型解析，改用CommonJS的require导入即可避免该逻辑：

const allFoodOriginal = require('../data/all-food-data.json') as FoodItem[]

修复fs加载方案的报错问题 #

你之前用fs加载出现404/500是因为Vercel构建时没有把JSON文件包含到运行时依赖中，可以在next.config.js中添加配置指定要包含的文件：

module.exports = {
  experimental: {
    outputFileTracingIncludes: {
      // 替换为你用到该JSON的页面路由，比如'/*'代表所有页面都可以访问
      '/*': ['./data/**/*.json'],
    },
  },
}

配置完成后，在getStaticProps中调用fs读取的逻辑就可以在Vercel正常运行。

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