在NextJS项目中如何根据ID渲染单个项目？

下面分两种路由方案给出实现步骤，对应Next.js不同版本的路由系统：

一、Pages Router（Next.js 12及更早版本） #

1. 创建动态路由页面
   在pages目录下新建projects/[id].js文件，[id]是动态路由参数，用来匹配不同的项目ID。

2. 编写页面代码

import { useRouter } from 'next/router';

// 可替换为从外部JSON文件导入：import projectsData from '../data/projects.json';
const projectsData = {
  "projects": [
    {
      "id": 1,
      "picture": "portf.jpg"
    },
    {
      "id": 2,
      "picture": "portf.jpg"
    }
  ]
};

export default function ProjectDetail() {
  const router = useRouter();
  const { id } = router.query;

  // 将路由参数转为数字（路由参数默认是字符串），匹配对应项目
  const project = projectsData.projects.find(item => item.id === parseInt(id));

  // 处理项目不存在的情况
  if (!project) {
    return <div>项目不存在</div>;
  }

  return (
    <div>
      <h2>项目详情</h2>
      <p>ID: {project.id}</p>
      {/* 图片需放在public目录下，路径直接以/开头 */}
      <img src={`/${project.picture}`} alt={`项目${project.id}预览图`} />
    </div>
  );
}

二、App Router（Next.js 13+版本） #

1. 创建动态路由页面
   在app目录下新建projects/[id]/page.js文件，[id]作为动态路由参数。

2. 编写页面代码

'use client'; // 需声明为客户端组件，因为用到了useParams钩子

import { useParams } from 'next/navigation';

// 可替换为外部JSON文件导入
const projectsData = {
  "projects": [
    {
      "id": 1,
      "picture": "portf.jpg"
    },
    {
      "id": 2,
      "picture": "portf.jpg"
    }
  ]
};

export default function ProjectDetail() {
  const params = useParams();
  const projectId = parseInt(params.id);

  const project = projectsData.projects.find(item => item.id === projectId);

  if (!project) {
    return <div>项目不存在</div>;
  }

  return (
    <div>
      <h2>项目详情</h2>
      <p>ID: {project.id}</p>
      <img src={`/${project.picture}`} alt={`项目${project.id}预览图`} />
    </div>
  );
}

注意事项 #

• 如果项目数据从API接口获取，可在getServerSideProps（Pages Router）或async function generateStaticParams（App Router）中请求数据，避免客户端请求延迟。
• 图片文件需放置在项目根目录的public文件夹下，才能通过/${project.picture}路径正确访问。

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