Skip to main content

项目结构

使路由结构是通过文件夹定义的，在将 page.js 或 route.js 文件添加到路由段之前，路由也无法公开访问。

因此项目非路由文件可以安全地存于目录中

- components
  - button.js
- lib
  - constants.js
- dashboard
  - page.js

如果使用 pages 为文件夹名，则下面所有文件都会被视作路由

最佳实践​

私人文件夹​

可以通过在文件夹前添加下划线来创建私人文件夹：_folderName

这表明该文件夹是私有实现细节，路由系统不应考虑该文件夹，从而选择该文件夹及其所有子文件夹不进行路由

- _components
  - button.js

路由分组​

src 目录​

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


- src
  - app
    - dashboard

使用模块路径别名​

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

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

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

目录规范​

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

目录规范 1​

将项目文件和路由分离

- components
- lib
- app
  - dashboard

保留 app 目录纯粹用于路由目的

目录规范 2​

所有项目文件存储在目录根目录的 app 共享文件夹中

- app
  - components
  - lib
  - dashboard

目录规范 3 （推荐）​

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

- app
  - components
  - lib
  - dashboard
    - components
    - lib