Next.js 14设置basePath后如何保留[id]路由结构？

首先明确：设置basePath: '/test'后，Next.js会给所有App Router路由自动加上/test前缀，这和你想要的/[id]/test/[slug]URL结构（/test在中间位置）本质冲突，直接通过路由结构无法实现，需要配合重写规则或者调整思路：

方案一：放弃设置basePath，调整路由结构匹配目标URL #

如果你的核心需求是生成localhost:3000/1/test/abc这类URL，而非必须设置basePath: '/test'，最直接的方式是恢复适配该URL的路由结构：

• 文件结构改为app->[id]->test->[slug]
• 无需设置basePath，此时直接可以访问/[id]/test/[slug]格式的URL，和你最初的可用状态一致。

方案二：保留basePath，用rewrites实现URL映射 #

如果必须设置basePath: '/test'，同时要支持/[id]/test/[slug]格式的URL，需要通过Next.js的重写规则实现：

1. 修改next.config.js配置重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/test',
  async rewrites() {
    return [
      {
        source: '/:id/test/:slug', // 匹配外部访问的URL格式
        destination: '/test/:id/:slug', // 映射到basePath下的内部路由
      },
    ];
  },
};

module.exports = nextConfig;

2. 调整内部路由结构：
   文件结构改为app->[id]->[slug]，用于处理重写后的内部请求。
3. 生成目标格式的URL：
   使用next/link或router.push时，需要手动构造URL并禁用basePath自动前缀：

import Link from 'next/link';

// 生成/1/test/abc的链接
<Link href={`/${id}/test/${slug}`} basePath={false}>
  跳转链接
</Link>

这样用户访问localhost:3000/1/test/abc时，会被重写到localhost:3000/test/1/abc，由内部的app/[id]/[slug]组件处理，同时你也能生成符合要求的URL。

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