现代全栈应用开发实战
项目初始化与架构
奠定坚实基础：项目初始化
构建一个生产级的应用程序，始于一个清晰、规范的项目设置。我们将使用 Next.js 14+，它引入了 App Router，这是一种更强大的路由和布局管理方式。我们将跳过基础语法，直接进入实战架构。首先，打开你的终端，运行以下命令来初始化项目：
npx create-next-app@latest my-todolist-app
在设置过程中，create-next-app 会提出一系列问题。为了搭建我们理想的开发环境，请确保做出以下选择：
- Would you like to use TypeScript? ▸ Yes
- Would you like to use ESLint? ▸ Yes
- Would you like to use Tailwind CSS? ▸ Yes
- Would you like to use
src/directory? ▸ No (我们将直接在根目录使用app) - Would you like to use App Router? ▸ Yes (这是现代 Next.js 的核心)
- Would you like to customize the default import alias? ▸ Yes
- What import alias would you like configured? ▸ @/
完成这些步骤后，一个集成了 TypeScript 和 Tailwind CSS，并采用 App Router 模式的 Next.js 项目就准备就绪了。
严苛模式与路径别名
一个专业的项目需要严格的类型检查来保证代码质量。Next.js 默认的 TypeScript 配置已经相当不错，但我们要确保它处于“严苛模式”。打开项目根目录下的 tsconfig.json 文件，找到 compilerOptions 字段，并确认 "strict": true。这会启用一系列类型检查规则，比如禁止隐式的 any 类型和严格的 null 检查，从而在编码阶段就捕捉到潜在的错误。
另一个提升开发效率的关键配置是路径别名。在初始化时，我们已经将 @/* 设置为指向项目根目录。这个设置记录在 tsconfig.json 的 paths 字段中。它能让我们告别冗长、易错的相对路径，比如 ../../components/Button，转而使用清晰的绝对路径 @{<components>}/Button。这不仅使代码更易读，也让文件移动和重构变得更加轻松。
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true, // 确保这里是 true
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"] // 路径别名配置
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
功能驱动的架构设计
如何组织文件，决定了一个项目的可维护性和扩展性。相比于按文件类型（如 components, apis, hooks）划分的传统方式，我们采用“功能驱动” (Feature-driven) 的架构。这意味着所有与特定业务功能相关的代码——无论是 UI 组件、API 路由还是业务逻辑——都被组织在一起。
例如，对于一个“任务” (Todo) 功能，所有相关文件都将位于
app/(main)/_features/todo目录下，而不是分散在项目的各个角落。
这种方式的好处是显而易见的：
- 高内聚，低耦合：功能模块内部紧密相关，而模块之间相互独立。
- 易于扩展：添加新功能时，只需创建一个新的功能目录，不会影响到现有代码。
- 便于协作：不同的开发者可以同时负责不同的功能模块，减少代码冲突。
为了实现这个架构，我们将建立以下核心目录结构：
| 目录 | 作用 |
|---|---|
/app | Next.js App Router 的核心，包含所有页面、布局和 API 路由。 |
/components | 存放全局共享的 UI 组件，特别是像 shadcn/ui 这样的基础组件库。 |
/lib | 存放应用的核心逻辑、工具函数和第三方服务的初始化代码（如 Prisma 客户端）。 |
/types | 定义全局共享的 TypeScript 类型和接口。 |
通过这样的结构，我们的项目从一开始就具备了清晰的边界和良好的扩展性。现在，这个坚实的地基已经搭建完毕，我们准备好在此之上构建具体的功能了。
在使用 create-next-app 初始化 Next.js 14+ 项目时，为了构建一个生产级的应用，以下哪个选项在教程中被建议设置为“否”(No)？
在 tsconfig.json 文件中将 "strict" 设置为 true 的主要目的是什么？