第2章 Create Next App有什么用

第二章 · 有什么用

上一章我们知道了 Create Next App 是什么，这一章我们要搞清楚一个灵魂问题：它到底能帮你干啥？它解决了什么痛点？为什么你应该用它？本章将用大量实例和对比告诉你答案。

2.1 零配置快速初始化项目

时间的浪费是可耻的

作为一个程序员，你的时间非常宝贵——不是说你的时薪有多高（虽然肯定很高），而是说你的注意力资源极其有限。

每次新建一个项目，如果你选择手动配置，你会：

1. 打开终端
2. 新建文件夹
3. 运行 npm init
4. 一个一个敲 npm install next react react-dom
5. 敲 npm install -D typescript @types/react @types/node
6. 敲 npm install -D tailwindcss postcss autoprefixer
7. 运行 npx tailwindcss init -p
8. 打开 tsconfig.json，对着文档一行行改
9. 配置 next.config.js
10. 创建 app/ 目录
11. 创建 layout.tsx
12. 创建 page.tsx
13. …

等你把这些全部搞定，半小时过去了。你最初的灵感、你想要马上试试的那个酷炫想法，早就被消磨殆尽了。

而 create-next-app 把这个过程压缩到 30 秒。

1
2

# 30秒 vs 30分钟，你自己算算这笔账
npx create-next-app@latest my-awesome-project --typescript --tailwind

“零配置"不是说不需要配置

这里要纠正一个误区：零配置不等于没有配置。

零配置的意思是：你不需要手动写配置，create-next-app 帮你把合理的默认配置写好了。

这些默认配置都是经过 Next.js 官方反复验证的，是"标准答案”。你不需要懂 tsconfig.json 里的每一条规则，只需要知道"它能正常工作"就够了。

打个比方：买手机的时候店家已经帮你贴好膜、装好壳了，这就是"零配置"——不是没有膜和壳，而是你不需要自己动手装。

2.2 自动安装所有必需的 npm 依赖

npm 依赖是个大家族

一个现代 Next.js 项目，光是"必需品"就需要安装一大堆依赖：

运行时依赖（项目跑起来需要的包）：

1
2
3
4
5

{
  "next": "^14.0.0",          // 框架核心
  "react": "^18.0.0",          // UI 库
  "react-dom": "^18.0.0"       // React DOM 渲染
}

开发时依赖（开发时用到，上线后不需要的包）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "typescript": "^5.0.0",      // 类型系统
  "@types/react": "^18.0.0",  // React 类型定义
  "@types/node": "^20.0.0",   // Node.js 类型定义
  "@types/react-dom": "^18.0.0",
  "tailwindcss": "^3.4.0",    // CSS 框架（v3 稳定版）
  "postcss": "^8.0.0",        // CSS 转换工具
  "autoprefixer": "^10.0.0",  // CSS 前缀补全
  "eslint": "^8.0.0",         // 代码检查（v9 使用 Flat Config，配置方式不同，建议 v8）
  "eslint-config-next": "^14.0.0"
}

你要是手动一个个装，估计能装到你怀疑人生。

create-next-app 的做法

create-next-app 会根据你选择的配置，自动计算并安装正确的依赖版本。它不会装错版本，不会漏装依赖，更不会装一个和另一个不兼容的包。

1
2
3
4
5
6
7
8
9

# 你告诉它要什么，它帮你装好
npx create-next-app@latest my-project \
  --typescript \
  --tailwind \
  --eslint

# 它会自动 install 以下依赖（版本号已自动适配）：
# next react react-dom typescript @types/react @types/node
# @types/react-dom tailwindcss postcss autoprefixer eslint eslint-config-next

小技巧：装完之后你可以去 package.json 里看看 dependencies 和 devDependencies，你会发现它装的东西比你想象的多——但这恰恰是好事，说明它考虑得很周全。

2.3 生成标准化的项目目录结构

目录结构的重要性——无规矩不成方圆

程序员最怕什么？项目结构乱。

想象一下这个场景：你接手了一个别人的项目，想找 page.tsx 文件，结果发现：

• 有人在 pages/ 下建了
• 有人在 components/ 下建了
• 有人在 src/pages/home/ 下建了
• 还有人干脆建在了根目录下，叫 homePage.tsx

这种项目，光是找文件就能耗掉你半条命。

create-next-app 的标准结构

create-next-app 给你一个开箱即用的标准目录结构，大家都在同一个地方找文件，协作效率直接拉满：

my-project/
├── app/                    # App Router 目录（所有页面在这里）
│   ├── globals.css         # 全局样式
│   ├── layout.tsx          # 根布局
│   └── page.tsx            # 首页
├── public/                 # 静态资源（图片、字体等直接放这里）
│   ├── file.svg
│   └── elevenlabs.svg
├── .eslintrc.json         # ESLint 配置
├── .gitignore              # Git 忽略文件
├── next.config.ts          # Next.js 配置
├── package.json            # 项目配置
├── postcss.config.mjs      # PostCSS 配置
├── tailwind.config.ts      # Tailwind 配置
└── tsconfig.json           # TypeScript 配置

如果你选了 --src-dir，结构会变成这样：

my-project/
├── src/
│   ├── app/               # 所有页面在这里
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── ...
├── public/                # 静态资源依然在根目录
├── next.config.ts
└── ...

两种结构功能完全一样，只是代码放的位置不同。选哪个看团队喜好，重要的是统一。

2.4 可选功能一键配置

什么是一键配置

create-next-app 最大的亮点之一就是：所有主流功能都是可选的，你勾勾手指就能开启。

这些功能包括但不限于：

组合示例

你想创建一个"全功能版" Next.js 项目？一句话的事：

1
2
3
4
5
6

npx create-next-app@latest my-fullstack-blog \
  --typescript \
  --tailwind \
  --eslint \
  --src-dir \
  --import-alias "@/*"

对应的，手动配置这些东西：

• 手动安装 TypeScript + 配置 tsconfig.json
• 手动安装 Tailwind + 配置 tailwind.config.ts + 配置 postcss.config.mjs
• 手动安装 ESLint + 配置 .eslintrc.json
• 手动创建 src/app 目录结构
• 手动配置路径别名

手动做这些，熟练工也得 20 分钟；用 create-next-app，30 秒。

2.5 统一团队项目起点，降低协作成本

一个团队的噩梦：项目结构千人千面

想象一下，你们团队有 5 个人，每个人创建项目的方式都不一样：

• 小王：不用 src 目录，页面全放 app/
• 小李：喜欢把页面放 pages/ 下（Pages Router 风格）
• 小张：喜欢用 JavaScript + JSDoc，不喜欢 TypeScript
• 小陈：喜欢把 components 放在 src/components 下
• 小赵：所有东西都塞在根目录，说"这样找起来方便"

结果呢？每次代码 review 都要先搞清楚对方的目录结构，效率低到令人发指。

create-next-app 治这个病

只需要一个规定：所有人创建项目都用 create-next-app。

这样：

• 目录结构统一（大家都用 App Router）
• 配置统一（大家都有 tsconfig.json、tailwind.config.ts）
• 依赖版本统一（大家装的都是同一套东西）
• 代码风格统一（ESLint 统一把关）

1
2

# 团队规范：所有人用同样的命令初始化项目
npx create-next-app@latest new-feature --typescript --tailwind --app --eslint

团队协作的最佳实践：约定优于配置。大家约定好用 create-next-app 的默认结构，剩下的精力都放在写业务代码上，而不是争论"这个文件应该放哪里"。

2.6 为初学者屏蔽环境配置复杂度，降低学习门槛

初学者的第一道坎：配置

很多人学 Next.js（或任何现代前端框架）的第一道坎，不是学 JavaScript，不是学 React，而是配环境。

还没开始写一行代码，就被以下问题劝退了：

• “npm install 怎么报错？”
• “tsconfig.json 是什么？为什么要配 paths？”
• “tailwind.config.js 里的 content 怎么写？”
• “postcss 是什么？为什么要配置它？”

这些问题对于有经验的开发者来说很简单，但对于第一次接触的人来说，简直是噩梦。

create-next-app 就像带助力的自行车

初学者最需要的不是"自己配环境带来的成长感"，而是先跑起来，感受 Next.js 有多酷。

create-next-app 就是那辆带辅助轮的自行车：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 初学者只需要这行命令
npx create-next-app@latest my-first-next-app

# 选 YES/YES/YES/YES/YES（TypeScript/Tailwind/ESLint/App Router/src-dir）

# 然后
cd my-first-next-app
npm run dev

# 打开 http://localhost:3000
# 🎉 你已经成功运行了一个 Next.js 应用！

等初学者用 create-next-app 跑起来第一个项目，对 Next.js 有了感觉，再回头学配置，反而事半功倍。

正确的学习路径：先用 create-next-app 跑起来 → 感受框架魅力 → 再深入学配置细节。而不是反过来，还没入门就被配置劝退了。

2.7 生成的配置文件可直接修改，灵活度高

默认配置不是铁板一块

有些人担心：“我用 create-next-app 生成了配置，会不会就被锁死了？”

不会！ 生成的配置文件全部可以自由修改。

create-next-app 给你的是"标准默认值"，不是"强制规定"。它的设计理念是：给你一个能跑的标准起点，剩下的你自己说了算。

修改示例

比如，next.config.ts 默认是这样的：

1
2
3
4
5
6
7

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

你觉得"我需要配置图片域名"？直接加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    // remotePatterns：配置允许 Next.js Image 组件加载的外部图片域名
    // ⚠️ hostname: "**" 允许加载任意域名的 https 图片，仅作示例演示
    // 生产环境请替换成具体域名，如：["my-cdn.com", "images.example.com"]
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;

tsconfig.json 默认开启了严格模式，你觉得太严格了，想关掉 strictNullChecks？直接改：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,                  // 保持严格模式总开关
    "strictNullChecks": false,        // 关掉这个，让你更自由地处理 null/undefined
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]  // 路径别名，@/ 开头的导入会指向 src/ 目录
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

修改配置文件没有对错之分，只有"适不适合你的项目"之分。create-next-app 给你默认值，你根据需要做调整，这就是它存在的意义。

本章小结

这一章我们搞清楚了 create-next-app 有什么用：

• 零配置快速初始化：30 秒 vs 手动 30 分钟，时间就是生命
• 自动安装依赖：一键装好所有必需的 npm 包，版本自动适配，不用你操心兼容性问题
• 生成标准结构：给团队一个统一的目录结构，杜绝"这个文件放哪"的无谓争论
• 可选功能一键配置：TypeScript / Tailwind / ESLint / App Router，想开哪个开哪个
• 统一团队起点：约定优于配置，大家用同一个工具，协作自然顺畅
• 降低学习门槛：初学者先跑起来比先配环境重要一万倍
• 高度灵活：生成的配置不是锁死的，全部可以按需修改

下一章我们将进入最实用的部分：怎么用——所有的命令、参数、选项，逐个击破，保证你看完就能玩转 create-next-app。