Skip to main content

项目组织和文件托管

除了路由文件夹和文件约定, 对于如何组织和托管项目文件，Next.js无固定观点。

本页分享可用作组织项目的默认行为和特点。

默认情况下的安全托管​

app文件夹中, 嵌套文件夹层次结构定义了路由结构。

每个文件夹代表映射到相应 URL 路径中的一个段的路由段。

然而, 即使路由结构通过文件夹来定义，但是直到路由段中添加了page.js 或 route.js文件，才可公开访问路由。

A diagram showing how a route is not publicly accessible until a page.js or route.js file is added to a route segment.

而且，即使路由是可公开访问的，也只有由 page.js 或 route.js返回的内容会发送到客户端。

A diagram showing how page.js and route.js files make routes publicly accessible.

这意味可以在app文件夹中安全地托管项目文件，而不会意外地可通过路由访问。

A diagram showing colocated project files are not routable even when a segment contains a page.js or route.js file.

您需要知道:

  • 不同于pages目录, pages下的任何文件都被看作为路由。
  • 即使您能够将项目文件托管在app中，但这不是强制的。如果您愿意，您可以将它们保存在app目录外。

项目组织特色​

Next.js 提供了多个特色来帮助您组织项目。

私有文件夹​

可以通过创建一个带有下划线为前缀的文件夹来创建私有文件夹：_folderName

An example folder structure using private folders

因为默认情况下可安全托管app目录中的文件，因此不需要私有文件夹托管。然而，它们可以用作：

  • 将路由逻辑与 UI 逻辑分离。
  • 在项目和 Next.js 生态系统中始终组织内部文件。
  • 在代码编辑器中对文件进行排序和分组。
  • 避免与将来的 Next.js 文件约定发生可能的命名冲突。

您需要知道

  • 尽管不是框架约定, 您也可以考虑使用相同的下划线模式将私有文件夹外的文件标记为私有。
  • 您能够通过将文件名带有%5F前缀来创建以下划线开始的 URL 段。 (下划线的 URL 编码形式): %5FfolderName。
  • 如果您不使用私有文件夹, 了解 Next.js 特殊文件约定以预防意外的命名冲突会很有帮助。

路由组​

路由组可以以圆括号包裹的文件夹来创建: (folderName)

这表示文件夹是用作组织的而不应该包含在路由的 URL 路径中。

An example folder structure using route groups

路由组适用于:

src 目录​

Next.js 支持在可选的src 目录中存储应用程序代码 (包括 app) 。这将应用程序代码和大多数存在于项目根中的项目配置文件分离。

An example folder structure with the `src` directory

模块路径别名​

Next.js 支持 模块路径别名，这使得在深度嵌套的项目文件中读取和维护导入变的更加容易。

// before
import { Button } from "../../../components/button";

// after
import { Button } from "@/components/button";

项目组织策略​

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

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

您需要知道:在下面的示例中, 我们正在使用components 和 lib 文件夹作为通用占位符, 它们的命名没有特殊的框架意义，且您的项目可以使用如ui, utils, hooks, styles, 等的其它文件夹。

在"app"外存储项目文件​

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

An example folder structure with project files outside of app

将项目文件存储在顶级文件夹app中​

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

An example folder structure with project files inside app

按特色或路由拆分项目文件​

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

An example folder structure with project files split by feature or route