Next.js中导入JSON/TS静态数据是否必须使用getStaticProps？

核心结论 #

你完全可以直接导入JSON/TypeScript静态文件来渲染数据，不是必须使用getStaticProps。两种方式各有适用场景，具体选择取决于你的数据规模和需求。

1. 直接导入静态文件（你的当前写法） #

这种方式适合数据量小、构建后不会变更的场景，Next.js在构建阶段会将这些数据直接打包进页面组件中，代码简洁直观。

修正你代码中的问题 #

你的代码存在几个语法错误，需要调整：

• projects.tsx：数组类型定义语法错误，且两个项目的id重复（会导致map时key冲突），建议改为：

// data/projects.ts
interface Project {
  id: string;
  name: string;
  title: string;
  previewImg: string;
}

const projects: Project[] = [
  {
    id: "6853939",
    name: "Project 01",
    title: "Title 01 ",
    previewImg: "/images/projectThumbnails/image01.jpg",
  },
  {
    id: "6853940", // 修改为唯一id
    name: "Project 02",
    title: "Title 02 ",
    previewImg: "/images/projectThumbnails/image02.jpg",
  }
];

export default projects;

• names.json：最后一个对象末尾的多余逗号会导致JSON解析失败，需要删除：

{
  "names": [
    { "name": "Full Name 01", "age": 34 },
    { "name": "Full Name 02", "age": 22 }
  ]
}

直接导入的正确用法 #

修正后你的index.tsx可以正常工作：

import projects from "../data/projects";
import names from "../data/names.json";

const IndexPage = () => {
  return (
    <>
      <div>
        {projects.map((project) => (
          <div key={project.id}>{project.title}</div>
        ))}
      </div>
      <div>
        {names.names.map((person) => (
          <div key={person.name}>{person.name}</div>
        ))}
      </div>
    </>
  );
};

export default IndexPage; // 注意：你原来的代码漏了导出组件

2. 什么时候需要用getStaticProps？ #

如果出现以下情况，建议使用getStaticProps：

• 数据量较大：直接导入会增加客户端JS bundle的体积，影响页面加载速度。getStaticProps会在构建时获取数据，仅将渲染后的HTML发送给客户端，不会把原始数据打包进客户端JS。
• 数据需要动态生成/读取：比如从文件系统读取多个文件、或者从外部静态API拉取数据（即使数据是静态的）。
• 需要增量静态再生（ISR）：如果后续需要在不重新构建整个应用的情况下更新页面数据，getStaticProps配合revalidate参数可以实现增量更新。

使用getStaticProps的示例 #

把你的代码改成getStaticProps写法：

import type { GetStaticProps } from "next";

interface IndexPageProps {
  projects: typeof import("../data/projects").default;
  names: typeof import("../data/names.json").default;
}

const IndexPage = ({ projects, names }: IndexPageProps) => {
  return (
    <>
      <div>
        {projects.map((project) => (
          <div key={project.id}>{project.title}</div>
        ))}
      </div>
      <div>
        {names.names.map((person) => (
          <div key={person.name}>{person.name}</div>
        ))}
      </div>
    </>
  );
};

export const getStaticProps: GetStaticProps<IndexPageProps> = async () => {
  // 直接导入数据
  const projects = await import("../data/projects").then((mod) => mod.default);
  const names = await import("../data/names.json").then((mod) => mod.default);

  return {
    props: {
      projects,
      names,
    },
    // 如果需要ISR，添加revalidate参数：
    // revalidate: 60, // 60秒后重新生成页面
  };
};

export default IndexPage;

总结 #

• 直接导入：适合小体量、固定不变的静态数据，写法简单。
• getStaticProps：适合大数据量、需要动态读取数据或支持ISR的场景，性能更优且更灵活。

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