Next.js中如何在动态API路由后创建静态子路由？

你没必要用动态路由[postId]/[comment]再判断参数的方式，Next.js支持嵌套路由，直接按API路径对应的文件夹/文件结构创建即可，既符合RESTful规范，代码结构也更清晰。下面分两种路由系统说明：

Pages Router（旧版路由，Next.js 12及更早） #

假设你已经有pages/api/post/[postId].js（处理文章获取的API），要实现/api/post/[postId]/comments路由：

• 在pages/api/post目录下创建[postId]文件夹（和原有的[postId].js文件共存即可，前者处理该路径的子路由）
• 在[postId]文件夹内新建comments.js（或.ts）文件

这个文件就是评论API的处理逻辑，示例代码：

// pages/api/post/[postId]/comments.js
export default function handler(req, res) {
  // 从请求参数中拿到文章ID
  const { postId } = req.query;
  
  // 这里写根据postId获取对应评论的业务逻辑
  const mockComments = [
    { id: 1, content: "这篇文章很棒！" },
    { id: 2, content: "学习到了很多知识" }
  ];

  res.status(200).json({ postId, comments: mockComments });
}

App Router（新版路由，Next.js 13+） #

如果用的是App Router，假设已有app/api/post/[postId]/route.js（处理文章获取），要实现评论路由：

• 在app/api/post/[postId]目录下创建comments文件夹
• 在comments文件夹内新建route.js（或.ts）文件

示例代码：

// app/api/post/[postId]/comments/route.js
export async function GET(request, { params }) {
  // 从params中获取文章ID
  const { postId } = params;
  
  // 模拟获取评论的逻辑
  const mockComments = [
    { id: 1, content: "支持一下！" },
    { id: 2, content: "期待更多更新" }
  ];

  return Response.json({ postId, comments: mockComments });
}

这种方式直接把comments作为固定子路由，不需要额外判断参数，维护起来更简单，也更符合API设计的常规做法。

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