Next.js加载静态JSON内容报Undefined错误及组件导出疑问

1. 核心错误排查 #

你的代码存在3个直接导致报错的问题：

• 导入JSON文件时未补全.json后缀，Next.js无法正确识别路径为../api/data的文件，导致导入的Card为Undefined
• JSX语法错误：将普通JS语句（const card = cardData.title、console.log）直接写在JSX根节点内，同时存在多余的花括号嵌套、语句末尾多余分号
• 属性读取逻辑错误：你传入组件的cardData本身就是JSON内的Card数组，数组不存在title属性，调用cardData.title会直接触发Undefined报错

2. 修复后的完整代码 #

如果是页面级组件写法（保留getStaticProps）：

// 补全.json后缀
import { Card } from "../api/data.json";

export const getStaticProps = async () => {
  return {
    props: { cardData: Card },
  };
};

// JS逻辑写在返回JSX之前，不要直接放在JSX节点内
export default function CardList({ cardData }) {
  // 此处可写普通JS逻辑
  console.log(cardData);
  return (
    <>
      {cardData.map((item, index) => (
        // 遍历列表需要添加唯一key属性，避免React警告
        <div key={index}>
          <h3>{item.title}</h3>
          <p>{item.content}</p>
        </div>
      ))}
    </>
  );
}

3. 抽离为index.js可用组件的说明 #

• 不需要必须使用命名的export default函数，匿名默认导出也可以正常导入使用，但建议给函数命名，方便开发阶段控制台报错定位
• 抽离为公共组件时可以去掉getStaticProps，直接在组件内导入JSON即可，示例如下：

// components/CardList.js
import { Card } from "../pages/api/data.json";

export default function CardList() {
  return (
    <>
      {Card.map((item, index) => (
        <div key={index}>
          <h3>{item.title}</h3>
          <p>{item.content}</p>
        </div>
      ))}
    </>
  )
}

在index.js中直接导入即可使用：

import CardList from '../components/CardList'

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <CardList />
    </div>
  )
}

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