Next.js 项目结构选择：使用 src/ 目录 vs 根目录的详细对比

2025-10-20 约 2153 字预计阅读 5 分钟

在使用 Next.js（特别是 v13 及以上）开发项目时，会经常遇到两种常见的目录结构选择： • 在项目根目录直接放置 app/ 或 pages/ 目录（即不使用 src/） • 在根目录下新建一个 src/ 文件夹，然后把 app/ 或 pages/ 目录放在 src/app 或 src/pages 下（即使用 src/）

下面我就从「结构区别」「优缺点」「适用场景」三方面来详细对比这两者。

1. 目录结构上的不同

不使用 src/ 的结构

例如：

my-next‐app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── dashboard/
│       └── page.tsx
├── public/
├── next.config.js
├── tsconfig.json
├── package.json
└── …（其它配置文件）

在这种结构中，app/（或 pages/）直接在项目根目录。配置文件（如 next.config.js、tsconfig.json、.env.* 等）也在根目录。官方文档中说明：“如果根目录中存在 app 或 pages，那么 src/app 或 src/pages 会被忽略。”

使用 src/ 的结构

例如：

my-next‐app/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── dashboard/
│   │       └── page.tsx
│   ├── components/
│   ├── lib/
│   └── styles/
├── public/
├── next.config.js
├── tsconfig.json
├── package.json
└── …

这里 src/ 成为开发者源代码所在的入口目录，app/ 或 pages/ 放在 src/ 下面。配置文件仍然放在项目根目录。官方文档明确指出支持这种模式：

“As an alternative to having the special Next.js app or pages directories in the root of your project, Next.js also supports the common pattern of placing application code under the src folder.”

另外注明：/public 目录应保留在项目根目录。

2. 使用 src/ vs 不使用 src/ —— 优缺点对比

维度	使用 src/	不使用 src/
根目录清晰度	✅ 优点：根目录可只保留配置、脚本、顶层文件等，代码逻辑集中在 src/ 下，结构更整洁。	⚠️ 缺点：代码、配置、公共资源混合在根目录可能导致根目录显得杂乱，尤其项目变大时。
团队协作 & 大型项目可维护性	✅ 优点：当项目较大、模块化程度高、多个文件夹（components、lib、hooks、styles 等）很多时，将其置于 src/ 下可以更好组织。	⚠️ 在小型或中型项目中，结构简单、不使用 src/ 也完全可行。
配置难度 / 学习成本	✅ 不使用 src/ 更直观：根目录放 app/ 或 pages/ 即可。	⚠️ 使用 src/ 多一个层级，可能稍微加一点"目录路径的思考"，并且某些工具如别名 (alias)／Tailwind 配置可能需要额外调整（例如 content 里加 /src 前缀）
与 Next.js 官方推荐／支持度	✅ 官方明确支持 src/ 结构。	✅ 官方默认也支持根目录 app/ 或 pages/，无 src/ 结构也没问题。
框架 /库的约束或限制	✅ 使用 src/ 时，有几点要注意：如果根目录仍存在 app/ 或 pages/，那么 src/app 会被忽略。同时，如果使用例如别名 @/* 或 Tailwind content 配置，需要记得更新路径。	✅ 无 src/ 时一般工具配置比较"标准"／简单。
小项目／快速原型开发	⚠️ 使用 src/ 可能显得"额外"一点。	✅ 非常合适：结构简单、快速上手。

总结优缺点

•	使用 src/ 的优点主要是：
•	目录扁平、根目录整洁。
•	更易于为中大型项目组织代码（components、lib、hooks、styles 等分层）。
•	便于团队协作，模块化程度更高。
•	使用 src/ 的缺点：
•	额外一层目录，可能稍微增加初学者／小项目的门槛。
•	某些配置可能需额外注意（别名、Tailwind 等）。
•	不使用 src/ 的优点：
•	简单直观，目录结构少一层，快速起步。
•	小型项目／原型开发时足够。
•	不使用 src/ 的缺点：
•	随着项目变大，根目录可能变得混乱。
•	模块化组织力度可能稍弱（但也不是必然）。

3. 适用场景 &建议

•	如果你开发的是一个 小型、单页面／几页面 的项目，或者你只是快速做个原型，那"不使用 src/"结构完全没问题。目录简单、直观、轻量。
•	如果你的项目预计会变大、团队多人、模块很多（比如大量组件、utils、hooks、styles、lib、feature 拆分） — 那么"使用 src/"结构会更可取。

4. 与 app/ 目录（新 App Router） vs pages/ 目录的区别补充

虽然你主要问的是 “带有 src 和不带 src 的 app 目录结构有什么不同”，但顺便补充一下 app/ vs pages/ 的区别，因为常常会混在一起讨论。 • pages/ 目录是 Next.js 早期（v12 及之前）主要的路由方式。每个文件对应一个路由，每个页面通常用 getStaticProps/getServerSideProps 等数据获取方式。 • app/ 目录是 Next.js 13 引入的 “App Router” 模式，支持 React 服务器组件、布局 (layout.tsx)、loading.js、error.js、嵌套路由、多根布局等功能。 • 如果你使用 app/ 目录，你可以在 src/app/ 或根目录 app/ 放置；使用 pages/ 则在 src/pages/ 或根目录 pages/。 • 注意：不要同时混用 app/ 和 pages/ 的相同路由路径，否则可能产生冲突或优先级问题。

5. 最佳实践建议

•	在项目起步时，先选定一个结构（是否使用 src/）并在整个项目中统一；避免中途混乱变更。
•	若使用 src/，要记得：配置文件保持在根目录 (next.config.js、tsconfig.json、.env.*)。官方文档中强调：

“配置文件如 package.json 、 next.config.js 和 tsconfig.json 应保留在项目的根目录中。” • 如果使用 Tailwind CSS 、TypeScript 路径别名等，需要对应调整配置（例如在 tailwind.config.js 的 content 添加 /src/** 前缀） • 随着项目规模增长，如果开始感到"根目录太乱"或"组件／hooks／utils 散落各地"，考虑迁移到 src/ 结构。迁移过程需要注意路径别名、中间件位置（如果在 src/ 内）等。 • 对于团队协作，多模块项目，推荐使用 src/ + app/ 方式，因为便于分层和模块化。根目录保持配置、工具、脚本等。

目录