Blitz 尚在 beat 阶段! 🎉 预计会在今年的 Q3 季度发布 1.0
Back to Documentation Menu

文件结构

Topics

Jump to a Topic

指导原则

  1. 会被一起改动的文件,应该也要放在一起。
  2. 最小的前置需求,最大的可拓展性。

文件结构示例

├── app/
│   ├── core/
│   │   ├── components/
│   │   │   ├── Form.tsx
│   │   │   └── LabeledTextField.tsx
│   │   ├── hooks/
│   │   │   └── useCurrentUser.ts
│   │   └── layouts/
│   │       └── Layout.tsx
│   ├── pages/
│   │   ├── 404.tsx
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── index.test.tsx
│   │   ├── index.tsx
│   │   └── projects/
│   │       ├── [id]/
│   │       │   └── edit.js
│   │       ├── [id].js
│   │       ├── index.js
│   │       └── new.js
│   ├── api/
│   │   └── stripe-webhook.js
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.tsx
│   │   │   └── SignupForm.tsx
│   │   ├── mutations/
│   │   │   ├── login.ts
│   │   │   ├── logout.ts
│   │   │   └── signup.ts
│   │   ├── pages/
│   │   │   ├── login.tsx
│   │   │   └── signup.tsx
│   │   ├── auth-utils.ts
│   │   └── validations.ts
│   ├── users/
│   │   └── queries/
│   │       └── getCurrentUser.ts
│   └── projects/
│       ├── components/
│       │   ├── Project.js
│       │   ├── ProjectForm.js
│       │   └── Projects.js
│       ├── mutations/
│       │   ├── createProject.js
│       │   ├── createProject.test.js
│       │   ├── deleteProject.js
│       │   ├── deleteProject.test.js
│       │   ├── updateProject.js
│       │   └── updateProject.test.js
│       └── queries/
│           ├── getProject.js
│           └── getProjects.js
├── db/
│   ├── index.ts
│   ├── schema.prisma
│   └── seeds.ts
├── integrations/
│   └── sentry.ts
├── public/
│   ├── favicon.ico*
│   └── logo.png
├── test/
│   ├── setup.ts
│   └── utils.tsx
├── README.md
├── babel.config.js
├── blitz.config.js
├── jest.config.js
├── package.json
├── tsconfig.json
├── types.ts
└── yarn.lock

app

包含你的所有关键应用代码。

  • 嵌套在 app/ 中的文件结构可以放置任何想要放置的东西,但是我们有如下建议 :
    • 第一层文件夹应该作为“域上下文”,例如 core/projects/users/billing/等。
    • 所有其它诸如 components/hooks/ 的都位于相关域上下文的文件夹中
  • 特殊的文件夹名称:
    • 可以放置于 app 文件夹内部的任何层次上。
    • pages/ 将一个 React 组件挂载到 URL 上。遵循与 Next.js pages/ 文件 夹相同的语义。
    • api/ 将一个 Node.js 请求处理器挂载到 URL 上。与 Next.js pages/api 文件夹也有相同的语义。
    • queries/mutations/ 用于 Blitz 的 queries 和 mutations。每个 query 和 mutation 都挂载到其文件路径相对应的 URL 处。

db

包含数据库配置,schema 和 migration 文件。db/index.js 导出已初始化的数据 库客户端,以便你可以在应用的任何位置中使用到。

integrations

包含第三方集成代码。例如:auth0.jstwilio.js 等。这些文件是使用共享 配置来实例化客户端的好地方。

pages

顶层的 pages 文件夹和所有在 app 中嵌套的文件夹会在构件时合并在一起。如 果在两个地方定义了相同的路由,构建过程将会失败。

  • 此顶层 pages 文件夹是可选的。
  • 具有与 Next.js 中 pages 文件夹相同的语义。此处的所有文件都会被挂载到与 其文件路由相对应的 URL 上。
  • 尽管你可以在此处放置任何路由文件,但我们建议将路由文件放置在 app 中。 但是如果你愿意,你可以将所有路由文件放置在此顶层文件夹中,而不必分散在 app 内的各个文件夹中。

api

与 Next.js 中的 pages/api 文件夹相同,但不嵌套在 pages 中。

同时像 pages 文件夹一样,顶层的 api 文件夹和 app 中所有嵌套的 api 文件夹在构建时会合并在一起。

public

此处所的所有文件都是通过你的应用的根 URL 来提供静态资源。

blitz.config.js

next.config.js 具有相同格式的配置文件。

其它须知

  • 所有顶层文件夹都将会自动被起一个别名。因此你可以从应用中的任何位置导入 app/projects/queries/getProject 样子的路径模块。

Idea for improving this page? Edit it on GitHub.