从静态 JSON 加载内容 Next JS

Question

我有一个 Next JS 项目，其静态 JSON 放置在 /pages/api/data.json 中，如下所示：

{
 "Card": [
   { "title": "Title 1", "content": "Content 1" },
   { "title": "Title 2", "content": "Content 2" },
   { "title": "Title 3", "content": "Content 3" }
 ]
}

我试图从该 JSON 中获取内容以加载到几个部分中，如下所示：

import { Card } from "../api/data";

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

export default ({ cardData }) => (
  <>
    const card = cardData.title; console.log(cardData);
    { {cardData.map((cardData) => (
      <div>
        <h3>{cardData.title}</h3>
        <p>{cardData.content}</p>
      </div>
    ))}; }
  </>
);

但我收到 Type: Undefined 错误，并且我很确定这不是该函数应有的样子。

另外，如果我想将其导出为可以在 index.js 中使用的组件，我是否必须命名导出默认函数？仓库链接在这里： https: //github.com/DoctorSte/remoteOS

Answer 1

这里不需要 getStaticProps，Webpack 将在构建时为您捆绑 JSON。这是 contact.js 页面的一个工作示例：

import "tailwindcss/tailwind.css";

import Footer from "./components/footer";
import Form from "./components/form";
import Navbar from "./components/Navbar";

import Cards from "./api/data.json"

export default function Contact() {
 
 console.log(Cards['Cards 1'][0].title); // Title 1

 return (
    <>
      <Navbar />
      <Form />
      <Footer />
    </>
  );
}