javascript - 从本地 json 文件创建动态路由 nextjs 13

Question

我有一个本地 JSON 文件，它是一个对象数组，例如:

项目.json

[
   {"id":0,
    "title":"this is the title",
    "info":"here is more info",
    "img":"www.imagelink.com"},
     ...
     ...
   {"id":10,
    "title":"this is the title",
    "info":"here is more info",
    "img":"www.imagelink.com"},
]

我的目标是映射这个对象并为每个对象提供一个单独的页面链接。现在我已经把它作为一个设置了。具有动态 URL 的链接，每个对象都是不同的。

项目.tsx

<div className='projects-container'>
      {projectlist.map((project)=>{
        return(
            <Link href={`/${project.id}`}>
              <img src={project.img} alt="this is an image" />
            </Link>
        )
      })}
    </div>

我无法弄清楚如何将所有 Prop 传递到每个动态路由，以便当用户单击该页面时，他们将被定向到一个包含所有这些信息设置的页面，例如。

[唯一页面]/page.tsx

export default function UniquePage() {
  return (
    <div>
      {projectlist.map(project=>{
        return(
          <p>ID Here:{project.id}</p>
          <p>Title Here:{project.title}</p>
          <p>Info Here:{project.info}</p>
        )
      })}
    </div>
  )
}

我遵循的所有指南都是基于从 API 和异步函数获取数据。由于 json 文件位于本地目录中，我不需要异步函数。

Answer 1

您无法将 props 传递到页面，除非您使用 cookie 或 localStorage 进行一些复杂的路由。

正确的方法是从同一个 json 中获取详细信息页面中的数据，并使用 uniquepage 作为 id。如果具有该 uniquepage 的项目不存在，您将抛出 notFound() ，从而导致 404 页面。

使用generateStaticParams静态预构建页面。不是必需的，但会加快加载速度。

project/page.tsx

import projectlist from '@/app/projects.json'
import Link from "next/link";

export default function Home() {
  return (
    <main>
      {projectlist.map((project) => (
        <Link key={project.id} href={`/${project.id}`}>
          <img src={project.img} alt="this is an image" />
        </Link>
      ))}
    </main>
  )
}

project/[uniquepage]/page.tsx

import projectlist from '@/app/projects.json'
import {notFound} from "next/navigation";

export async function generateStaticParams() {
  return projectlist.map((p) => ({
    uniquepage: p.id.toString(),
  }))
}

export default function UniquePage({params: {uniquepage}}: { params: { uniquepage: string } }) {
  const project = projectlist.find(p => p.id.toString() === uniquepage)
  if (!project) {
    notFound()
  }

  return (
    <main>
      <p>ID Here:{project.id}</p>
      <p>Title Here:{project.title}</p>
      <p>Info Here:{project.info}</p>
    </main>
  )
}