Next.js 301：如何从有查询的源重定向到没有查询的目的地

Question

如果有人帮助我，我将非常感激：

1. 我有一个源 URL，例如

   https://example.com/category/results/refine?dealers=123&inv=true&sellertypes=dealer

2. 如果源 URL 包含

   https://example.com/

   和

   dealers

   键，我想实现 SSR 永久 301 重定向到目标 URL，如

   inv

   。
3. 我在我的

   next.config.ts

   中实现了以下代码：

async redirects() {
    return [
      {
        source: "/category/results/refine",
        has: [
          {
            type: "query",
            key: "dealers",
          },
          {
            type: "query",
            key: "inv",
            value: "true",
          },
        ],
        destination: "/",
        permanent: true,
        statusCode: 301,
      },
}

4. 结果，我的重定向不是到

   https://example.com/

   ，而是到

   https://example.com/?dealers=123&inv=true&sellertypes=dealer

   。我的意思是，来自源 URL 的查询会坚持到目标 URL。这不是我所期望的。

Answer 1

看起来这不能通过

nextjs

配置来实现 - 文档指出：

应用重定向时，请求中提供的任何查询值都将传递到重定向目的地。例如，请参阅以下重定向配置： 当请求 /old-blog/post-1?hello=world 时，客户端将被重定向到 /blog/post-1?hello=world。

您有两个选择。

1. 实现一个自定义服务器，然后进行路径匹配和删除查询参数的代码

2. 实施 nginx 或 CDN 等代理，为您提供精细的路由控制。

Answer 2

这个可以实现，但是解决方案并不明显而且丑陋。

正如 @ramakay 所说，每个查询参数都将传递到目标 URL。如果您不想传递参数，则必须执行以下操作：

1. 在目标 URL 中重复参数本身
2. 但是没有任何价值
3. Vercel 将完全删除该参数

所以在你的情况下，这看起来像这样：

{
  source: "/category/results/refine",
  has: [
    {
      type: "query",
      key: "dealers",
    },
    {
      type: "query",
      key: "inv",
      value: "true",
    },
  ],
  destination: "/?dealers=&inv=",
  permanent: true,
  statusCode: 301,
},