Next.js App目录下如何实现/items?search=[id]自定义URL路由

你的问题出在Next.js的rewrites规则配置上——source字段不会匹配URL的查询参数部分，直接写/items?search=:id是无效的。下面是正确的实现方案：

1. 修正next.config.js的rewrites配置 #

使用has字段匹配查询参数，将符合条件的请求转发到商品详情页面：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/items',
        has: [
          {
            type: 'query',
            key: 'search',
            value: ':id+', // 匹配非空的商品ID值
          },
        ],
        destination: '/itemDetail/:id',
      },
    ];
  },
};

该配置会检测/items路径下是否存在search查询参数，将参数值映射到itemDetail页面的id路由参数上。

2. 优化Link组件的使用（可选） #

你原有的Link写法可以正常工作，也可以采用更规范的对象形式传递路由参数：

// itemList.tsx
import Link from 'next/link';

// 组件内部
<Link href={{
  pathname: '/items',
  query: { search: item.id }
}}>
  {item.title}
</Link>

3. 重启开发服务器 #

修改next.config.js后必须重启Next.js开发服务器，否则新的rewrites规则不会生效。

4. 商品详情页面的参数获取 #

在app/itemDetail/[id]/page.tsx中，仍可通过params.id正常获取商品ID，逻辑无需改动：

// app/itemDetail/[id]/page.tsx
export default function ItemDetailPage({ params }: { params: { id: string } }) {
  return <div>商品ID：{params.id}</div>;
}

内容的提问来源于stack exchange，提问作者Iván Meyer