Next.js配置API代理后无法访问动态路由及404错误页

你的rewrites配置问题出在路由匹配规则过于宽泛：/:slug*会匹配所有前端路由（包括Next.js的页面路由、动态路由甚至404页面），导致这些请求都被转发到后端http://localhost:5000，而后端没有对应这些页面的路由，所以返回cannot get...。

正确的配置方式 #

你需要缩小代理的范围，只针对后端API路径进行转发，比如给API请求加统一前缀（比如/api），修改rewrites配置如下：

async rewrites() {
  return [
    {
      source: '/api/:slug*',
      destination: 'http://localhost:5000/:slug*', // 后端API路径
    },
  ]
},

这样配置后，只有以/api开头的请求会被转发到后端，Next.js自己的页面路由（包括动态路由[id].js、自定义404页）会正常处理。

如果你的后端API没有统一前缀，也可以通过明确指定需要代理的路径来配置：

async rewrites() {
  return [
    // 只代理特定后端接口，比如/users、/posts等
    {
      source: '/users/:slug*',
      destination: 'http://localhost:5000/users/:slug*',
    },
    {
      source: '/posts/:slug*',
      destination: 'http://localhost:5000/posts/:slug*',
    },
  ]
},

额外说明 #

Next.js的rewrites是按顺序匹配的，一旦某个规则匹配成功，就会停止后续匹配。所以尽量避免使用覆盖所有路由的宽泛规则，优先给后端API设置统一前缀，从根源上避免和前端页面路由冲突。

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