Next.js 14 App Router多文件路由疑问：无需子文件夹可行吗？

你遇到的问题是App Router和Pages Router的核心路由规则差异：App Router只把page.tsx文件识别为路由入口，直接放在/test/下的judging.tsx这类文件不会自动对应到/test/judging路径。针对50个类似文件不想建50个子文件夹的需求，有以下几种替代方案：

1. 动态路由 + 组件映射表（最推荐） #

这是最简洁的方案，用一个动态路由文件统一处理所有子路由：

• 第一步：把judging.tsx、listings.tsx等组件移到/test/components/目录下（避免和路由文件冲突）
• 第二步：在/test/下创建[slug]/page.tsx文件，内容如下：

import { notFound } from 'next/navigation';
import Judging from '../components/judging';
import Listings from '../components/listings';

// 把路由路径和对应组件做映射
const routeComponents = {
  judging: Judging,
  listings: Listings,
  // 依次添加剩下的48个组件映射
};

export default function TestSubPage({ params }: { params: { slug: string } }) {
  const TargetComponent = routeComponents[params.slug];
  
  // 如果访问的slug不在映射表里，返回404
  if (!TargetComponent) return notFound();

  return <TargetComponent />;
}

这样访问/test/judging就会渲染Judging组件，/test/listings渲染Listings组件，完全不用创建子文件夹。

2. 结合generateStaticParams预渲染静态页面 #

如果你的这些路由都是静态内容（不需要动态数据），可以在上面的动态路由文件里加上generateStaticParams，让Next.js在构建时预渲染所有页面，性能和单独建子文件夹完全一致：

// 加到[slug]/page.tsx里
export async function generateStaticParams() {
  // 从映射表里提取所有路由slug，生成预渲染参数
  return Object.keys(routeComponents).map(slug => ({ slug }));
}

3. next.config.js 重写规则（适合特殊场景） #

如果需要更灵活的路由映射逻辑，可以在next.config.js里配置rewrites，把请求重定向到对应的组件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    const rewriteRules = Object.keys(routeComponents).map(slug => ({
      source: `/test/${slug}`,
      destination: `/test/components/${slug}`,
    }));

    return rewriteRules;
  },
};

module.exports = nextConfig;

不过这种方式需要确保组件的可访问性，维护成本比动态路由高，只适合有特殊路由需求的场景。

关于布局复用（替代Next.js12的_app.js和getLayout） #

App Router里的layout.tsx本身就是布局复用的核心：

• /test/layout.tsx会自动应用到/test/下的所有路由，包括上面的动态路由/test/[slug]
• 如果不同子路由需要不同布局，可以修改动态路由的映射表，把布局和组件绑定：

// 更新映射表，包含组件和布局
const routeComponents = {
  judging: {
    Component: Judging,
    Layout: JudgingLayout, // 自定义布局组件
  },
  listings: {
    Component: Listings,
    Layout: ListingsLayout,
  },
};

export default function TestSubPage({ params }: { params: { slug: string } }) {
  const { Component, Layout = DefaultTestLayout } = routeComponents[params.slug] || {};
  
  if (!Component) return notFound();

  return (
    <Layout>
      <Component />
    </Layout>
  );
}

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