求助：如何通过Next.js App Router实现自定义动态路由配置？

你当前的目录结构里，app/shop/products/[slug].js对应的路由是/shop/products/product-slug，但你要的是/shop/product-slug，可以通过两种简单方式实现：

方式一：调整文件位置直接映射路由 #

把app/shop/products/[slug].js移动到app/shop/目录下，重命名为[slug].js，调整后的目录结构如下：

app/
|-- shop/
|   |-- page.js
|   |-- layout.js
|   |-- [slug].js  // 移动后的文件
|-- dashboard/
|   |-- page.js

此时访问/shop/product-slug就会直接渲染这个[slug].js的内容，和你之前Page Router的逻辑完全一致。需要注意的是，在App Router中获取动态参数的写法是：

async function Page({ params }) {
  const { slug } = params;
  // 这里写根据slug获取数据并渲染的逻辑
  return <div>产品：{slug}</div>;
}

export default Page;

方式二：用路由重写保留原文件结构 #

如果不想移动文件，可以在项目根目录的next.config.js中添加重写规则，让/shop/:slug的请求内部指向/shop/products/:slug：

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

module.exports = nextConfig;

配置完成后，用户访问/shop/product-slug时，地址栏URL不会变化，但会渲染app/shop/products/[slug].js的内容，完全满足你的需求。

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