如何使用来自本地 JSON 的数据加载动态页面

Question

我刚刚开始学习 Next.js，感谢您耐心解答我的问题。我正在尝试根据从本地 JSON 文件 (data.json) 加载的数据生成动态页面（和路由）。我不会在生产中这样做 - 只是想学习 Next.js.

部分文件结构

|
|- pages
   |- members
     |- [role].js
   |- index.js
|- assets
   |- data.json

data.json

{
  "people": [
    {
      "name": "Amy",
      "role": "administrator"
    },
    {
      "name": "Bob",
      "role": "manager"
    },
  ]
}

想要的结果： 我希望能够导航到 /members/administrator 并使用此人的姓名（“Amy”）呈现页面。

我有 read this 关于 getStaticProps 的文档，我知道会涉及到一些内容。我也尝试过使用 this tutorial。在我的问题版本中，我使用的是打字稿，但我现在只是在寻找一个简单的 js/jsx 解决方案。谢谢！

Answer 1

要获取数据，您可以像这样使用 getServerSideProps()：

export async function getServerSideProps() {
    const data =
        await require("/path/data.json");

    return {
        props: {
            data,
        },
    };
}

然后获取用useRouter()分配的角色

import { useRouter } from "next/router";

并从路由器查询中获取角色：

const { role } = router.query;

并且不要忘记将数据传递给您的功能组件

export default function Role({ data })

如何使用来自本地 JSON 的数据加载动态页面

How to load dynamic pages with data from a local JSON

reactjs

next.js