内功篇Paid
2、启动你的第一个 Next.js 项目
1. 准备工作
在开始之前,请确保你的电脑上已经安装了 Node.js (一个 JavaScript 运行环境) 和你的代码编辑器 Cursor。这是我们进行所有开发的基础。
2. “一键启动”的魔法命令
我们不需要手动去创建一堆文件和配置。Next.js 官方提供了一个极其强大的脚手架工具 create-next-app,它可以一键为我们生成一个配置完善的、可立即运行的项目。
- 打开你的终端 (Terminal)。
- 输入以下命令,然后按下回车:
bashnpx create-next-app@latest
按下回车后,它会像一个聪明的助理一样,问你一系列问题来定制你的项目。下面是我的建议,你可以完全按照这个来选择:
可以按照我下面的选择,或者一路默认下去也无所谓,不影响。

:::warning
1、What is your project named? (项目叫什么?)✅
很简单,我们就叫它 digital-business-card 吧。
2、Would you like to use TypeScript? (要用 TypeScript 吗?)✅
** 毫不犹豫地选“Yes”**。这是我们修炼“内功”的第一个关键点。你可以把 TypeScript 理解为 JavaScript 的“严格升级版”。它能帮你(和帮你写代码的 AI)在写代码的阶段就发现大量潜在的拼写错误、类型错误,让你的项目更稳定、更易维护。在今天,专业的项目几乎必用 TypeScript。
3、Would you like to use ESLint? (要用 ESLint 吗?)✅
** 选“Yes”**。这是我们的“代码质量纪律委员”,它会时刻检查你的代码风格是否统一、有没有不规范的写法。这对于团队协作和保持代码整洁至关重要。
4、**Would you like to use Tailwind CSS?** (要用 Tailwind CSS 吗?)✅
** 选“Yes”**。还记得我们的作战地图吗?Tailwind 是我们选定的“标准化装修工具箱”。在这里直接选“是”,create-next-app 就会自动帮我们把它完美地集成到项目里,省去大量后续配置的麻烦。
5、**Would you like to use 'src/' directory?** (要用 src 文件夹吗?)✅
** 我强烈建议你选“Yes”**。这是一个专业约定。把我们自己写的所有源代码(Source Code)都放进 src 目录里,可以让项目结构更清晰,把我们的代码和项目的配置文件明确分开。
6、**Would you like to use App Router?** (要用 App Router 吗?)✅
** 必须“Yes”**。这是 Next.js 最新的、也是官方主推的路由模式,功能更强大,理念也更先进。我们学,就直接学最新、最强的。
7、**Would you like to use Turbo