Next.js 全域捕获路由([...path].js)失效，求正确配置方式

首先要明确：当前npx create-next-app@latest默认生成的是App Router（基于app目录），而你参考的是Pages Router（基于pages目录）的文档，两者的全域路由规则不同，以下分两种场景说明：

场景1：使用默认的App Router #

在App Router中，全域路由捕获需要使用双中括号命名的文件，且必须放在app目录的根层级：

1. 删除或重命名app目录下原有的page.tsx
2. 在app目录根创建[[...path]].js（或.tsx），示例代码：

import React from 'react';

export default function CatchAllPage({ params }) {
  return (
    <div>
      <h1>全域路由捕获页面</h1>
      <p>当前路径：{params.path?.join('/') || '首页'}</p>
    </div>
  );
}

• 双中括号[[...path]]表示可选全域捕获，既能匹配根路径（/），也能匹配任意子路径（如/a、/a/b/c）
• 若使用单中括号[...path]，仅能匹配非根的子路径，根路径会出现404（除非单独配置根页面）

场景2：切换到Pages Router #

如果你想遵循你参考的文档规则，需要切换到Pages Router结构：

1. 在项目根目录创建pages文件夹（默认App Router项目无此文件夹）
2. 在pages文件夹根创建[...path].js（单中括号即可），示例代码：

import React from 'react';

export default function CatchAllPage({ params }) {
  return (
    <div>
      <h1>全域路由捕获页面</h1>
      <p>当前路径：{params.path?.join('/') || '首页'}</p>
    </div>
  );
}

3. （可选）若要完全禁用App Router，在next.config.js中添加配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  appDir: false,
}

module.exports = nextConfig;

• Pages Router中，根pages文件夹下的[...path].js会匹配所有路径（包括根路径）

你之前的错误点 #

• 将文件放在app目录下的pages文件夹：Pages Router的pages文件夹必须位于项目根目录，而非app目录内
• 在App Router中使用单中括号[...path]：无法匹配根路径，导致全域捕获失效

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