在NextJS（TypeScript）中如何读取并使用独立JSON文件内JSON对象中的值

嘿，我来给你唠唠在Next.js（TypeScript）里怎么读取独立JSON文件里的对象值，刚好之前做项目时踩过相关的坑，给你整理了几个实用的方法，都是亲测有效的：

方法一：静态导入（最常用，适合小体积JSON） #

这是最简单直接的方式，Next.js和TypeScript都原生支持，不用额外配置。

首先你可以把JSON文件放在项目里的任意位置，比如src/data/data.json，内容就用你定义的：

{
  "Obj1": {
    "Val1": "Obj 1, Test Value 1",
    "Val2": "Obj 1, Test Value 2",
    "Val3": "Obj 1, Test Value 3"
  },
  "Obj2": {
    "Val1": "Obj 2, Test Value 1",
    "Val2": "Obj 2, Test Value 2",
    "Val3": "Obj 2, Test Value 3"
  }
}

然后在组件里直接导入使用就行，为了TypeScript的类型安全，咱们可以给JSON数据定义个类型：

// 先定义JSON数据的类型，避免类型任意的警告
type JsonDataType = {
  [key: string]: {
    Val1: string;
    Val2: string;
    Val3: string;
  };
};

// 静态导入JSON文件，指定类型
import rawData from '../data/data.json';
const data = rawData as JsonDataType;

export default function MyStaticComponent() {
  return (
    <div className="p-4">
      <p>Obj1的第一个值：{data.Obj1.Val1}</p>
      <p>Obj2的第二个值：{data.Obj2.Val2}</p>
    </div>
  );
}

如果是Next.js 13+的App Router，服务器组件里直接这么写就行，连状态都不用，因为服务器组件可以同步处理导入。

方法二：动态导入（按需加载，适合大体积JSON） #

如果你的JSON文件特别大，不想一开始就加载它，那可以用动态导入的方式，按需加载。

客户端组件的情况（App Router / Pages Router） #

'use client'; // 客户端组件需要加这个标识（App Router下）
import { useEffect, useState } from 'react';

type JsonDataType = {
  [key: string]: {
    Val1: string;
    Val2: string;
    Val3: string;
  };
};

export default function DynamicLoadComponent() {
  const [jsonData, setJsonData] = useState<JsonDataType | null>(null);

  useEffect(() => {
    // 组件挂载后再加载JSON
    const loadData = async () => {
      const importedModule = await import('../data/data.json');
      setJsonData(importedModule.default);
    };
    loadData();
  }, []);

  if (!jsonData) return <div>数据加载中...</div>;

  return (
    <div>
      <p>Obj1的第三个值：{jsonData.Obj1.Val3}</p>
    </div>
  );
}

服务器组件的情况（App Router） #

服务器组件里不用useEffect，直接await动态导入就行：

type JsonDataType = {
  [key: string]: {
    Val1: string;
    Val2: string;
    Val3: string;
  };
};

export default async function ServerDynamicComponent() {
  const importedModule = await import('../data/data.json');
  const data = importedModule.default as JsonDataType;

  return (
    <div>
      <p>Obj2的第一个值：{data.Obj2.Val1}</p>
    </div>
  );
}

方法三：读取public目录下的JSON文件（静态资源方式） #

如果你的JSON文件放在public目录下（Next.js的静态资源目录），那不能用导入的方式，得用fetch来获取，因为public里的文件是作为静态资源暴露给客户端的。

'use client';
import { useEffect, useState } from 'react';

type JsonDataType = {
  [key: string]: {
    Val1: string;
    Val2: string;
    Val3: string;
  };
};

export default function PublicJsonComponent() {
  const [jsonData, setJsonData] = useState<JsonDataType | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      // 路径是相对于域名根目录的，因为在public下
      const res = await fetch('/data.json');
      const data = await res.json();
      setJsonData(data);
    };
    fetchData();
  }, []);

  if (!jsonData) return <div>加载中...</div>;

  return (
    <div>
      <p>Obj2的第三个值：{jsonData.Obj2.Val3}</p>
    </div>
  );
}

几个小提醒 #

• 路径一定要核对准！导入时用相对路径，public下的用根路径（比如/data.json）
• TypeScript的类型定义别偷懒，虽然TS能自动推断JSON类型，但手动定义后代码更健壮，后续改JSON结构时也能及时发现问题
• App Router的服务器组件权限更高，能直接读取项目里的文件（包括非public目录），客户端组件只能通过fetch读public里的或者动态导入

备注：内容来源于stack exchange，提问作者Skj0nes