Creating dynamic routes from local json file nextjs 13

I have a local JSON file that is an array of objects such as:

projects.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"},
]

my goal is to map this object and have a separate page link for each one. Right now I have this as a set up. A link with a dynamic URL, distinct for each object.

Projects.tsx

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

I am having trouble figuring out how to pass all the props to each dynamic route, so that when the user clicks the page they will be directed to a page with all this information set up like this, for an example.

[uniquepage]/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>
  )
}

All the guides I follow are based off of getting data from APIs and async functions. Since the json file is in the local directory I do not need an async funciton.

You can't pass props to the page, not unless you go for some complicated route with cookies or localStorage.

Proper way is to fetch data in your detail page from the same json, using uniquepage as id. If the project with that uniquepage does not exists, you will throw notFound() that will result in 404 page.

Use generateStaticParams to prebuild pages statically. Not a requirement, but will speed up the loading.

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>
  )
}