如何将带/:jobId/:format参数的Express API路由转为Next.js API？

一、Next.js动态路由的文件结构规则 #

Next.js的API路由依赖目录结构映射路由：

• 若用Pages Router（Next.js 12及以下）：要实现/:jobId/:format的动态路由，需创建pages/api/transcripts/[jobId]/[format].js，对应访问路径/api/transcripts/:jobId/:format
• 若用App Router（Next.js 13+）：创建app/api/transcripts/[jobId]/[format]/route.js，路由映射逻辑一致

二、动态参数的获取方式 #

• Pages Router中，动态参数会自动解析到req.query对象，直接通过req.query.jobId、req.query.format取值
• App Router中，参数通过路由函数的params参数传入，比如{ params }解构后获取jobId和format

三、完整代码转换示例 #

1. GET动态路由（对应Express的router.get("/:jobId/:format")）

以Pages Router为例，创建pages/api/transcripts/[jobId]/[format].js：

// 导入你的asyncClient实例（根据实际项目路径调整）
import asyncClient from '../../../utils/asyncClient';

export default async function handler(req, res) {
  // 仅处理GET请求
  if (req.method !== 'GET') {
    return res.status(405).send('Method Not Allowed');
  }

  try {
    const { jobId, format } = req.query;
    // 校验必填参数
    if (!jobId || !format) {
      return res.status(400).send('Missing jobId or format parameter');
    }

    const lowerCaseFormat = format.toLowerCase();

    if (lowerCaseFormat === 'json') {
      const transcript = await asyncClient.getTranscriptObject(jobId);
      return res.status(200).json(transcript);
    }

    if (lowerCaseFormat === 'text') {
      const transcript = await asyncClient.getTranscriptText(jobId);
      return res.status(200).send(transcript);
    }

    // 返回无效格式错误
    res.status(400).send(`Invalid format ${format}`);
  } catch (error) {
    console.error(error.message);
    res.status(500).send('Internal Server Error');
  }
}

2. POST根路由（对应Express的router.post("/")）

创建pages/api/transcripts/index.js：

// 导入你的socket.io实例（根据实际项目路径调整）
import io from '../../utils/socket.io';

export default function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).send('Method Not Allowed');
  }

  io.emit('transcript', req.body);
  res.status(200).send('OK');
}

四、关键注意事项 #

• 请求方法校验：Next.js API路由默认接收所有HTTP方法，需手动判断req.method过滤不支持的请求
• 实例注入：Express中挂载在req上的asyncClient、io，在Next.js中建议通过独立模块导出导入，避免依赖请求对象挂载
• 错误处理：Next.js没有res.sendStatus()快捷方法，直接用res.status(code).send()或res.status(code).json()替代
• App Router适配：若用Next.js 13+ App Router，路由文件需命名为route.js，并通过导出GET/POST函数处理请求，示例如下：

// app/api/transcripts/[jobId]/[format]/route.js
import asyncClient from '../../../../utils/asyncClient';

export async function GET(request, { params }) {
  const { jobId, format } = params;
  try {
    const lowerCaseFormat = format.toLowerCase();
    if (lowerCaseFormat === 'json') {
      const transcript = await asyncClient.getTranscriptObject(jobId);
      return Response.json(transcript);
    }
    if (lowerCaseFormat === 'text') {
      const transcript = await asyncClient.getTranscriptText(jobId);
      return new Response(transcript, { status: 200 });
    }
    return new Response(`Invalid format ${format}`, { status: 400 });
  } catch (error) {
    console.error(error.message);
    return new Response('Internal Server Error', { status: 500 });
  }
}

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