外观
项目组织和文件托管
项目组织和文件托管
除了路由文件夹和文件约定之外,Next.js 对于如何组织和托管项目文件并没有固定的意见。
本页面分享了可用于组织项目的默认行为和功能。
默认安全托管
在 app
目录中,嵌套文件夹层次结构定义了路由结构。
每个文件夹代表一个路由段,映射到 URL 路径中的相应段。
然而,即使路由结构是通过文件夹定义的,在将 page.js
或 route.js
文件添加到路由段之前,路由也不会公开访问。
而且,即使路由变为可公开访问,只有 page.js
或 route.js
返回的内容会发送给客户端。
这意味着项目文件可以安全地托管在 app
目录的路由段内,而不会意外地变成可路由。
提示
- 这与
pages
目录不同,在pages
中任何文件都被视为路由。 - 虽然你可以在
app
中托管项目文件,但你不必这样做。如果你愿意,可以将它们保存在app
目录之外。
项目组织功能
Next.js 提供了几个功能来帮助你组织项目。
私有文件夹
可以通过在文件夹名称前加下划线来创建私有文件夹:_folderName
这表示该文件夹是私有实现细节,不应被路由系统考虑,从而将该文件夹及其所有子文件夹排除在路由之外。
由于 app
目录中的文件默认可以安全托管,因此不需要私有文件夹来进行托管。但是,它们可能对以下方面有用:
- 将 UI 逻辑与路由逻辑分离。
- 在项目和 Next.js 生态系统中一致地组织内部文件。
- 在代码编辑器中对文件进行排序和分组。
- 避免与未来 Next.js 文件约定可能发生的命名冲突。
提示
- 虽然不是框架约定,但你也可以考虑使用相同的下划线模式将私有文件夹外的文件标记为"私有"。
- 你可以通过在文件夹名称前加
%5F
(下划线的 URL 编码形式)来创建以下划线开头的 URL 段:%5FfolderName
。 - 如果你不使用私有文件夹,了解 Next.js 特殊文件约定会有助于防止意外的命名冲突。
路由组
可以通过将文件夹包裹在括号中来创建路由组:(folderName)
这表示该文件夹仅用于组织目的,不应包含在路由的 URL 路径中。
路由组对以下方面有用:
- 将路由组织成组,例如按网站部分、意图或团队。
- 在同一路由段级别启用嵌套布局:
src
目录
Next.js 支持将应用程序代码(包括 app
)存储在可选的 src
目录中。这将应用程序代码与主要位于项目根目录的项目配置文件分开。
模块路径别名
Next.js 支持模块路径别名,这使得在深层嵌套的项目文件中更容易读取和维护导入。
app/dashboard/settings/analytics/page.js
// before
import { Button } from '../../../components/button'
// after
import { Button } from '@/components/button'
项目组织策略
在组织 Next.js 项目中的文件和文件夹时,没有"对"或"错"的方式。
以下部分列出了常见策略的非常高级概述。最简单的要点是选择一种适合你和你的团队的策略,并在整个项目中保持一致。
提示
在我们下面的示例中,我们使用 components
和 lib
文件夹作为通用占位符,它们的命名对框架没有特殊意义,你的项目可能使用其他文件夹,如 ui
、utils
、hooks
、styles
等。
将项目文件存储在 app
之外
这种策略将所有应用程序代码存储在项目根目录的共享文件夹中,并将 app
目录纯粹用于路由目的。
将项目文件存储在 app
内的顶级文件夹中
这种策略将所有应用程序代码存储在 app
目录的根目录中的共享文件夹中。
按功能或路由拆分项目文件
这种策略将全局共享的应用程序代码存储在根 app
目录中,并将更具体的应用程序代码拆分到使用它们的路由段中。