Next.js静态站点：getStaticProps导入TS/JSX数据遇序列化错误的解决

一、导入的静态数据是否默认静态？ #

直接从JS/TS文件导入的静态数据（无动态生成逻辑）本身就是静态的。Next.js在构建阶段会将这类数据打包进客户端代码，不需要额外通过getStaticProps处理就能在组件中使用。

二、是否必须通过getStaticProps处理？ #

不需要。getStaticProps主要用于构建时动态获取外部数据（比如API、数据库）的场景，本地静态数据完全可以直接在组件中导入使用，没必要走这个流程。

三、序列化报错的解决方法 #

报错核心原因是：getStaticProps返回的props必须是可JSON序列化的数据，而JSX元素内部包含Symbol类型（$$typeof字段），无法被JSON序列化。以下两种方案可以解决问题：

方案1：修改数据结构，在组件中生成JSX #

把数据文件里的JSX替换成纯文本/配置项，在组件渲染时再生成对应的JSX：

// projects.tsx
const projects = [
  {
    id: "6853939",
    name: "Project 01",
    title: "Title 01 ",
    previewImg: "/images/projectThumbnails/image01.jpg",
    extraText: "Extra 01"
  },
  {
    id: "6853939",
    name: "Project 02",
    title: "Title 02 ",
    previewImg: "/images/projectThumbnails/image02.jpg",
    extraText: "Extra 02"
  }
] as const;

export default projects;

// index.tsx
import projects from "../data/projects.tsx";

const IndexPage = () => {
  return (
    <>
      <div>
        {projects.map((i) => (
          <div key={i.id}>
            {i.title}
            <div>{i.extraText}</div>
          </div>
        ))}
      </div>
      {/* 注意：原代码中`names.names`是未定义变量，需修正或删除 */}
    </>
  );
};

// 直接删除无用的getStaticProps
export default IndexPage;

方案2：保留JSX定义，直接在组件中导入使用 #

如果必须在数据文件中定义JSX（比如复杂自定义组件），直接在组件中导入数据并渲染即可，不要通过getStaticProps传递：

// projects.tsx
import React from "react";

const projects = [
  {
    id: "6853939",
    name: "Project 01",
    title: "Title 01 ",
    previewImg: "/images/projectThumbnails/image01.jpg",
    extra: <div>Extra 01</div>
  },
  {
    id: "6853939",
    name: "Project 02",
    title: "Title 02 ",
    previewImg: "/images/projectThumbnails/image02.jpg",
    extra: <div>Extra 02</div>
  }
] as const;

export default projects;

// index.tsx
import projects from "../data/projects.tsx";

const IndexPage = () => {
  return (
    <>
      <div>
        {projects.map((i) => (
          <div key={i.id}>
            {i.title}
            {i.extra}
          </div>
        ))}
      </div>
    </>
  );
};

// 删除getStaticProps
export default IndexPage;

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