Next.js 中不同路由方式（Pages Router 和 App Router）的多种项目结构整理，包括 带 src 目录 和 不带 src 目录 的情况。每种结构都附有详细注释，帮助你根据项目需求选择合适的方案。

1. Pages Router 项目结构

1.1 不带 src 目录

plaintext
my-nextjs-app/                # 项目根目录
├── pages/                    # 核心路由目录
│   ├── index.tsx             # 首页（对应路由 `/`）
│   ├── about.tsx             # 关于页面（对应路由 `/about`）
│   ├── blog/                 # 博客相关页面
│   │   ├── index.tsx         # 博客首页（对应路由 `/blog`）
│   │   └── [slug].tsx        # 动态路由（对应路由 `/blog/:slug`）
│   ├── api/                  # API 路由目录
│   │   └── hello.ts          # API 路由（对应路由 `/api/hello`）
├── components/               # 全局通用组件
│   ├── Header.tsx            # 头部组件
│   ├── Footer.tsx            # 底部组件
│   └── Button.tsx            # 按钮组件
├── styles/                   # 全局样式目录
│   ├── globals.css           # 全局样式文件
│   └── theme.css             # 主题样式文件
├── public/                   # 静态资源目录
│   ├── favicon.ico           # 网站图标
│   ├── robots.txt            # 搜索引擎爬虫配置文件
│   └── assets/               # 静态资源（如图片、字体等）
├── .env.local                # 本地环境变量文件（不提交到 Git）
├── .eslintrc.js              # ESLint 配置文件
├── .prettierrc.js            # Prettier 配置文件
├── next.config.js            # Next.js 配置文件
├── tsconfig.json             # TypeScript 配置文件
├── package.json              # 项目依赖和脚本配置
├── README.md                 # 项目说明文档
└── .gitignore                # Git 忽略文件配置

1.2 带 src 目录

plaintext
my-nextjs-app/                # 项目根目录
├── src/                      # 源代码目录
│   ├── pages/                # 核心路由目录
│   │   ├── index.tsx         # 首页（对应路由 `/`）
│   │   ├── about.tsx         # 关于页面（对应路由 `/about`）
│   │   ├── blog/             # 博客相关页面
│   │   │   ├── index.tsx     # 博客首页（对应路由 `/blog`）
│   │   │   └── [slug].tsx    # 动态路由（对应路由 `/blog/:slug`）
│   │   ├── api/              # API 路由目录
│   │   │   └── hello.ts      # API 路由（对应路由 `/api/hello`）
│   ├── components/           # 全局通用组件
│   ├── styles/               # 全局样式目录
├── public/                   # 静态资源目录
├── .env.local                # 本地环境变量文件
├── .eslintrc.js              # ESLint 配置文件
├── .prettierrc.js            # Prettier 配置文件
├── next.config.js            # Next.js 配置文件
├── tsconfig.json             # TypeScript 配置文件
├── package.json              # 项目依赖和脚本配置
├── README.md                 # 项目说明文档
└── .gitignore                # Git 忽略文件配置

2. App Router 项目结构

2.1 不带 src 目录

plaintext
my-nextjs-app/                # 项目根目录
├── app/                      # App Router 核心目录
│   ├── layout.tsx            # 根布局组件
│   ├── page.tsx              # 首页（对应路由 `/`）
│   ├── about/                # 关于页面
│   │   └── page.tsx          # 关于页面（对应路由 `/about`）
│   ├── blog/                 # 博客相关页面
│   │   ├── [slug]/           # 动态路由
│   │   │   └── page.tsx      # 博客详情页（对应路由 `/blog/:slug`）
│   ├── api/                  # API 路由目录
│   │   └── hello/            # API 路由示例
│   │       └── route.ts      # API 路由处理程序（对应路由 `/api/hello`）
├── components/               # 全局通用组件
├── styles/                   # 全局样式目录
├── public/                   # 静态资源目录
├── .env.local                # 本地环境变量文件
├── .eslintrc.js              # ESLint 配置文件
├── .prettierrc.js            # Prettier 配置文件
├── next.config.js            # Next.js 配置文件
├── tsconfig.json             # TypeScript 配置文件
├── package.json              # 项目依赖和脚本配置
├── README.md                 # 项目说明文档
└── .gitignore                # Git 忽略文件配置

2.2 带 src 目录

plaintext
my-nextjs-app/                # 项目根目录
├── src/                      # 源代码目录
│   ├── app/                  # App Router 核心目录
│   │   ├── layout.tsx        # 根布局组件
│   │   ├── page.tsx          # 首页（对应路由 `/`）
│   │   ├── about/            # 关于页面
│   │   │   └── page.tsx      # 关于页面（对应路由 `/about`）
│   │   ├── blog/             # 博客相关页面
│   │   │   ├── [slug]/       # 动态路由
│   │   │   │   └── page.tsx  # 博客详情页（对应路由 `/blog/:slug`）
│   │   ├── api/              # API 路由目录
│   │   │   └── hello/        # API 路由示例
│   │   │       └── route.ts  # API 路由处理程序（对应路由 `/api/hello`）
│   ├── components/           # 全局通用组件
│   ├── styles/               # 全局样式目录
├── public/                   # 静态资源目录
├── .env.local                # 本地环境变量文件
├── .eslintrc.js              # ESLint 配置文件
├── .prettierrc.js            # Prettier 配置文件
├── next.config.js            # Next.js 配置文件
├── tsconfig.json             # TypeScript 配置文件
├── package.json              # 项目依赖和脚本配置
├── README.md                 # 项目说明文档
└── .gitignore                # Git 忽略文件配置

3. 混合模式（Pages Router + App Router）

在某些情况下，你可能需要同时使用 Pages Router 和 App Router。以下是混合模式的项目结构：

plaintext
my-nextjs-app/                # 项目根目录
├── app/                      # App Router 核心目录
│   ├── layout.tsx            # 根布局组件
│   ├── page.tsx              # 首页（对应路由 `/`）
│   ├── dashboard/            # 仪表盘页面
│   │   └── page.tsx          # 仪表盘首页（对应路由 `/dashboard`）
├── pages/                    # Pages Router 核心目录
│   ├── about.tsx             # 关于页面（对应路由 `/about`）
│   ├── blog/                 # 博客相关页面
│   │   └── [slug].tsx        # 动态路由（对应路由 `/blog/:slug`）
├── components/               # 全局通用组件
├── styles/                   # 全局样式目录
├── public/                   # 静态资源目录
├── .env.local                # 本地环境变量文件
├── .eslintrc.js              # ESLint 配置文件
├── .prettierrc.js            # Prettier 配置文件
├── next.config.js            # Next.js 配置文件
├── tsconfig.json             # TypeScript 配置文件
├── package.json              # 项目依赖和脚本配置
├── README.md                 # 项目说明文档
└── .gitignore                # Git 忽略文件配置

4. app 路由和pages 路由共存

my-nextjs-app/
├── app/                   # 新功能使用 App Router
│   ├── dashboard/         # 仪表盘页面
│   │   ├── page.tsx       # 仪表盘首页（对应路由 `/dashboard`）
│   │   └── settings/      # 设置页面
│   │       └── page.tsx   # 设置页面（对应路由 `/dashboard/settings`）
├── pages/                 # 旧功能继续使用 Pages Router
│   ├── index.tsx          # 首页（对应路由 `/`）
│   ├── about.tsx          # 关于页面（对应路由 `/about`）
│   ├── blog/
│   │   └── [slug].tsx     # 动态路由（对应路由 `/blog/:slug`）

• App Router 在 app 目录中工作，与传统的 pages 目录可以共存，支持逐步采用。

• 如果你的项目已经使用了 pages 目录，可以继续使用 Pages Router，同时逐步迁移到 App Router。

总结：

• Pages Router 适合简单项目，路由规则直观。
• App Router 提供了更强大的功能（如嵌套布局、流式渲染），适合复杂项目。
• 带 src 目录 的结构适合中大型项目，便于代码组织。
• 混合模式 适合逐步迁移或需要同时使用两种路由系统的场景。

理解Next.js 项目目录结构