如何在Next.js App Router服务端读取JSON文件

你遇到的错误是因为fetch是用于发起HTTP请求的API，无法直接访问本地文件系统的文件。在Next.js服务端组件中，有两种更合适的方式读取本地JSON文件：

方法一：直接导入JSON文件（推荐） #

Next.js支持直接导入JSON文件，服务端组件中可同步完成，无需异步请求：

import myData from '../data/myfile.json';

export default function HomePage() {
    return (
        <div>
            <h1>{myData.somevalue}</h1>
        </div>
    );
}

这种方式会在构建时将JSON内容打包进代码，适合静态数据场景。

方法二：使用Node.js文件系统模块读取（动态场景） #

如果需要动态读取运行时可能更新的文件，可以用Node.js的fs/promises模块配合path模块处理绝对路径，避免相对路径解析错误：

import { readFile } from 'fs/promises';
import path from 'path';
import { fileURLToPath } from 'url';

export default async function HomePage() {
    const data = await getData();
    return (
        <div>
            <h1>{data.somevalue}</h1>
        </div>
    );
}

async function getData() {
    // 获取当前文件的绝对路径
    const __filename = fileURLToPath(import.meta.url);
    const __dirname = path.dirname(__filename);
    // 拼接JSON文件的绝对路径
    const filePath = path.join(__dirname, '../data/myfile.json');
    
    const fileContent = await readFile(filePath, 'utf8');
    return JSON.parse(fileContent);
}

关键说明 #

• 不要用fetch访问本地文件：fetch的相对路径会被解析为HTTP URL，本地文件不属于Web服务的静态资源路径（除非将data文件夹放到public目录，但这种场景没必要）。
• 绝对路径处理：用path.join和fileURLToPath能确保在不同环境下正确定位文件，避免相对路径的歧义。

内容的提问来源于stack exchange，提问作者Xurxo Martínez Ferreira