如何在Next.js中设置与页面关联的API相对路径？

根据你的需求，要让API路径跟随pages子目录（比如/todo/api/...、/counter/api/...），只需调整文件夹结构并利用Next.js Pages Router的路由规则即可，具体步骤如下：

1. 调整文件夹结构 #

把原本根目录下的api子模块，迁移到对应pages的子文件夹中，新增专属的api目录。调整后的结构示例：

src                                  
 ├── component        
 │     ├── common      
 │     └── layout            
 ├── pages              
 │    ├── todo
 │    │    ├── index.js
 │    │    ├── list
 │    │    │   ├── index.js
 │    │    ├── api           # Todo模块专属API目录
 │    │    │   ├── list.js   # 对应路由：/todo/api/list
 │    │    │   └── detail.js # 对应路由：/todo/api/detail
 │    ├── counter
 │    │    ├── index.js
 │    │    ├── api           # Counter模块专属API目录
 │    │    │   ├── increment.js # 对应路由：/counter/api/increment
 │    │    │   └── decrement.js # 对应路由：/counter/api/decrement
 │    ├── api               # 保留全局通用API（可选）
 │    │    ├── user.js
 │    │    └── list.js

2. 编写API处理逻辑 #

每个pages子目录下的API文件，需要遵循Next.js API路由的规范：导出一个默认的处理函数，接收req（请求对象）和res（响应对象）参数。比如pages/todo/api/list.js的示例代码：

export default function handler(req, res) {
  if (req.method === 'GET') {
    // 处理Todo列表的GET请求
    res.status(200).json({ todos: ['买菜', '写代码'] });
  } else if (req.method === 'POST') {
    // 处理Todo新增的POST请求
    const newTodo = req.body;
    res.status(201).json({ success: true, todo: newTodo });
  } else {
    // 处理其他请求方法
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

3. 验证路由访问 #

启动项目后，你可以直接通过以下路径访问对应API：

• Todo模块API：localhost:3000/todo/api/list
• Counter模块API：localhost:3000/counter/api/increment

注意事项 #

• 如果你使用的是Next.js 13+的App Router，需要将API路由放在app/[page]/api目录下，逻辑和Pages Router一致，只是目录层级基于app而非pages。
• 根目录下的pages/api可以保留，作为全局通用API的入口，不会和子目录的API路由冲突。

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