Next.js：能否为单个页面绕过next.config.js中的basePath配置？

可以实现，以下是两种常用的解决办法：

方法一：使用Next.js的Rewrites规则 #

在next.config.js中添加rewrites配置，将外部访问的/a/[slug]路径映射到实际basePath下的页面，同时保持浏览器地址栏显示为domain.com/a/[slug]。修改后的配置如下：

const moduleExports = {
  basePath: '/app',
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/a/:slug*',
        destination: '/app/a/:slug*',
      },
    ];
  },
};

页面文件正常放在/pages/a/[slug].js（Pages Router）或/app/a/[slug]/page.js（App Router）即可，用户访问domain.com/a/xxx时，会被内部重定向到/app/a/xxx，但地址栏不会显示basePath。

方法二：静态导出场景使用exportPathMap自定义路径 #

如果项目是静态导出模式，可以通过exportPathMap直接指定该页面的输出路径，绕过全局basePath：

const moduleExports = {
  basePath: '/app',
  reactStrictMode: true,
  exportPathMap: async function (defaultPathMap) {
    const newPathMap = { ...defaultPathMap };
    // 示例：从数据源获取所有slug，实际可替换为你的业务数据逻辑
    const slugs = ['post1', 'post2'];
    slugs.forEach(slug => {
      newPathMap[`/a/${slug}`] = {
        page: '/a/[slug]',
        query: { slug },
      };
    });
    return newPathMap;
  },
};

执行静态导出后，生成的静态文件会直接放在/a/目录下，访问路径即为domain.com/a/[slug]。

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