项目组织和文件共存

除了路由文件夹和文件的约定 之外，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 文件约定的潜在命名冲突。

了解更多：

• 虽然不是框架约定，但您可能还考虑使用相同的下划线模式将私有文件夹之外的文件标记为“private”。
• 您可以通过在文件夹名称前缀为 %5F（下划线的 URL 编码形式：%5FfolderName）来创建以下划线开头的 URL 片段。
• 如果不使用私有文件夹，了解 Next.js 的特殊文件约定将有助于防止意外的命名冲突。

路由组

通过用括号括起来的方式创建路由组：（folderName）。

这表示该文件夹用于组织目的，不应包含在路由的 URL 路径中。

路由组对于以下情况很有用：

• 将路由组织成组，例如按站点部分、意图或团队组织。
• 在同一路由片段级别启用嵌套布局：
  • 在同一片段中创建多个嵌套布局，包括多个根布局。
  • 在常见片段中的一组路由中添加布局。

src 目录

Next.js 支持将应用代码（包括 app）存储在可选的 src 目录中。 这将应用代码与主要存储在项目根目录中的项目配置文件分离。

dex.js

模块路径别名

Next.js 支持模块路径别名，使得在深层嵌套的项目文件中更易于阅读和维护导入。

示例：

app/dashboard/settings/analytics/page.js

// before
import { Button } from '../../../components/button'

// after
import { Button } from '@/components/button'

项目组织策略

在组织 Next.js 项目中的文件和文件夹时，没有“正确”或“错误”的方式。

以下部分概述了常见策略的高层次概述。最简单的方法是选择适合您和您的团队的策略，并在整个项目中保持一致。

note

在下面的示例中，我们使用 components 和 lib 文件夹作为通用占位符， 它们的命名没有特殊的框架意义，您的项目可能使用其他文件夹， 如 ui、utils、hooks、styles 等。

将项目文件存储在 app 之外

此策略将所有应用程序代码存储在项目根目录中的共享文件夹中， 并将 app 目录纯粹用于路由目的。

在 app 内的顶级文件夹中存储项目文件

此策略将所有应用程序代码存储在 app 目录的共享文件夹中。

按功能或路由拆分项目文件

此策略在根 app 目录中存储全局共享的应用程序代码， 并将更具体的应用程序代码拆分到使用它们的路由片段中。