如何配置next.config实现Next.js API路由请求重写至根路径

Next.js 重写路由配置方案 #

你需要在项目根目录的next.config.js（Next.js 13+ 支持 TypeScript 配置文件next.config.ts）中添加路由重写/重定向规则，分两种常见场景按需配置：

场景1：用户访问根路径/[slug]/[uid]时，内部代理到API路由/api/[slug]/[uid]（用户侧地址栏无/api前缀） #

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:slug/:uid',
        destination: '/api/:slug/:uid',
      },
    ]
  },
}

module.exports = nextConfig

场景2：用户访问API路由/api/[slug]/[uid]时，直接跳转到根路径/[slug]/[uid]（地址栏路径自动更新） #

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/api/:slug/:uid',
        destination: '/:slug/:uid',
        permanent: true, // 永久重定向返回308状态码，临时重定向设为false返回307
      },
    ]
  },
}

module.exports = nextConfig

注意事项 #

• 配置修改后必须重启Next.js开发服务才会生效
• 重写/重定向规则优先级低于实际存在的页面文件，如果项目根目录下已经有对应/[slug]/[uid]的页面路由，会优先匹配页面
• 路径参数名必须和你API路由里的参数名完全一致，否则会出现参数传递失效的问题

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