Next.js 13中如何从本地JSON创建动态路由并传递Props

• 直接导入本地数据文件
  在[uniquepage]/page.tsx顶部导入你的projects.json，因为是本地静态资源，无需异步请求：

  import projects from '../../projects.json'; // 路径根据你的文件实际位置调整
  

• 通过路由参数匹配对应项目
  在App Router的动态页面中，page.tsx会接收params参数，从中提取项目ID，再从数组中找到匹配的项目：

  // 先定义项目类型，和你的json数据结构对应
  type Project = {
    id: string;
    title: string;
    info: string;
    img: string;
  };
  
  export default function UniquePage({ params }: { params: { uniquepage: string } }) {
    // 根据路由参数匹配项目
    const targetProject = projects.find((project: Project) => project.id === params.uniquepage);
  
    // 处理项目不存在的情况
    if (!targetProject) {
      return <div>该项目不存在</div>;
    }
  
    // 渲染项目详情
    return (
      <div>
        <h1>{targetProject.title}</h1>
        <p>项目ID: {targetProject.id}</p>
        <p>{targetProject.info}</p>
        <img src={targetProject.img} alt={targetProject.title} />
      </div>
    );
  }
  

• 确认列表页链接格式正确
  确保Projects.tsx中的动态链接路径和路由规则一致，指向对应项目的ID：

  import Link from 'next/link';
  import projects from './projects.json';
  
  export default function Projects() {
    return (
      <div>
        {projects.map(project => (
          <Link key={project.id} href={`/uniquepage/${project.id}`}>
            <div>
              <h3>{project.title}</h3>
            </div>
          </Link>
        ))}
      </div>
    );
  }
  

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