Nginx Location规则对Next.js内部链接无效问题咨询

首先直接回答你的核心疑问：Nginx无法监听Node.js内部的操作，也管不到Next.js的客户端路由跳转。原因很简单：

Nginx作为反向代理，只负责处理浏览器发送过来的HTTP请求——比如你直接在地址栏输链接、从外部网站跳转过来，这些都会触发完整的HTTP请求，经过Nginx，所以你的rewrite规则能生效。但Next.js的内部链接点击（比如用<Link>组件跳转）属于客户端路由，是浏览器通过History API（pushState/replaceState）在本地更新地址栏和页面内容，根本不会向Nginx发送新的HTTP请求，自然不会触发Nginx的rewrite规则，这也是你看到Nginx日志里没有对应请求记录的原因。

那该怎么让内部链接也实现和Nginx rewrite一样的跳转效果？其实不需要折腾Nginx，直接在Next.js层面配置路由重写就可以，而且能做到和Nginx规则完全同步：

推荐解决方案：用Next.js内置的rewrites配置 #

Next.js提供了服务端层面的路由重写能力，不管是客户端路由跳转还是服务端请求，都会生效，完美替代Nginx的rewrite规则。

举个例子，如果你的Nginx规则是这样的：

rewrite ^/old-blog/(.*)$ /new-post/$1 last;

那你只需要在项目根目录的next.config.js里添加对应的rewrites配置：

module.exports = {
  async rewrites() {
    return [
      // 把Nginx的rewrite规则转成Next.js的重写配置
      {
        source: '/old-blog/:slug*', // 匹配所有/old-blog开头的路径
        destination: '/new-post/:slug*', // 重写到对应的新路径
      },
    ];
  },
};

配置完成后，重启你的Next.js应用：

npm run build && npm start

这时候不管是外部访问/old-blog/xxx，还是点击内部的<Link href="/old-blog/xxx">链接，都会自动重写到/new-post/xxx，而且完全不影响SSR的渲染效果。

额外说明 #

如果你的路由重写逻辑比较复杂（比如需要根据请求头、域名判断），Next.js的rewrites还支持自定义函数来处理，大部分场景下，简单的source/destination配置就足够覆盖需求了。

另外，如果你坚持要让内部链接触发Nginx的请求（不推荐，会失去客户端路由的性能优势），可以不用Next.js的<Link>组件，改用普通的<a>标签，但这样每次跳转都会刷新页面，完全浪费了SSR和客户端路由的优势，不建议这么做。

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