深入解析：环境搭建与你的第一个 Next.js 应用

失眠星球 · 發表於 2025-9-14 21:24:00

环境搭建与你的第一个 Next.js 应用

作者：码力无边

在上一篇文章中，我们探讨了“为什么”要选择 Next.js。我们了解了它如何通过预渲染、文件路由和内置优化等特性，解决了传统 React 开发中的诸多痛点。理论总是让人兴奋，但真正的乐趣在于实践。

今天，我们将卷起袖子，一步步搭建好开发环境，并使用官方工具 create-next-app 创建并运行我们的第一个 Next.js 应用。准备好了吗？Let’s go!

第一步：环境准备 (Prerequisites)

在开始之前，请确保你的电脑上安装了以下两个核心工具：

Node.js: Next.js 是一个基于 Node.js 的 JavaScript 运行时环境。你需要安装 18.17 或更高版本。
- 如何检查？ 打开你的终端（在 Windows 上是 Command Prompt 或 PowerShell，在 macOS 上是 Terminal），输入 node -v。如果你看到了版本号并且它符合要求，那就没问题了。
- 如何安装？ 如果你没有安装或版本过低，请访问 Node.js 官网下载并安装最新的 LTS (长期支持) 版本。安装 Node.js 的同时，也会自动安装 npm (Node Package Manager)，它是我们用来管理项目依赖的工具。
代码编辑器 (Code Editor): 一个好的代码编辑器能让你的开发效率事半功倍。我强烈推荐 Visual Studio Code (VS Code)，它免费、功能强大，并且拥有庞大的插件生态系统。

环境就绪，我们可以正式开始了！

第二步：使用 `create-next-app` 创建项目

Next.js 官方提供了一个非常方便的脚手架工具 create-next-app，它可以快速帮我们生成一个配置完备的项目骨架。

打开你的终端，cd 到你希望存放项目的文件夹，然后运行以下命令：

npx create-next-app@latest

命令解析：

npx 是 npm 附带的一个工具，它允许你运行一个 npm 包中的可执行文件，而无需将其全局安装到你的电脑上。这能确保你每次使用的都是最新版本的 create-next-app。
create-next-app@latest 就是我们要运行的命令。

运行后，安装程序会以交互式的方式询问你一系列问题，来定制你的项目。下面是常见问题的解释和建议：

✔ What is your project named? … my-nextjs-blog
✔ Would you like to use TypeScript? … No / Yes  (建议选择 Yes)
✔ Would you like to use ESLint? … No / Yes      (强烈建议 Yes)
✔ Would you like to use Tailwind CSS? … No / Yes (建议选择 Yes)
✔ Would you like to use `src/` directory? … No / Yes (建议选择 Yes)
✔ Would you like to use App Router? (recommended) … No / Yes (强烈建议 Yes)
✔ Would you like to customize the default import alias? … No / Yes (初学者建议 No)

Project name?: 给你的项目起个名字，比如 my-nextjs-blog。
Use TypeScript?: TypeScript 为 JavaScript 提供了类型安全，是现代 Web 开发的趋势。建议选择 “Yes”，我们的专栏后续也会基于 TypeScript。
Use ESLint?: 这是一个代码检查工具，能帮助你发现代码中的错误和不规范的写法，保证代码质量。强烈建议 “Yes”。
Use Tailwind CSS?: 一个非常流行的原子化 CSS 框架，Next.js 对它有很好的集成支持。建议选择 “Yes”，它能极大提升我们写样式的效率。
Use src/ directory?: 将你的应用代码（如组件、页面）都放在一个 src 文件夹内。这是一种常见的项目组织方式，能让项目结构更清晰。建议选择 “Yes”。
Use App Router? (recommended): 这是 Next.js 13 之后推出的新一代路由系统，也是未来的方向，功能更强大。强烈建议 “Yes”，我们的专栏将重点介绍它。
Customize the default import alias?: 自定义模块导入别名，比如用 @/* 代替 ../../../*。初学者可以先选择 “No”，保持默认设置即可。

回答完所有问题后，工具会自动创建项目文件夹，并安装所有必要的依赖。这个过程可能需要一两分钟。

第三步：项目结构一览

安装完成后，让我们进入项目目录并看看里面都有什么。

cd my-nextjs-blog

打开 VS Code 来查看项目文件夹：

code .

你会看到类似这样的目录结构：

my-nextjs-blog/
├── src/
│   └── app/
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx      # 根布局
│       └── page.tsx        # 首页
├── public/                 # 静态资源文件夹
│   ├── next.svg
│   └── vercel.svg
├── .eslintrc.json          # ESLint 配置文件
├── next.config.mjs         # Next.js 配置文件
├── package.json            # 项目依赖和脚本
├── postcss.config.js       # PostCSS 配置 (用于 Tailwind)
├── tailwind.config.ts      # Tailwind CSS 配置文件
└── tsconfig.json           # TypeScript 配置文件

别被这么多文件吓到！我们初期只需要关注最重要的几个：

src/app/: 这是我们应用的核心。在 App Router 模式下，这个文件夹里的文件和文件夹结构直接定义了你的网站路由。
src/app/layout.tsx: 这是根布局文件。所有页面都会被包裹在这个布局里，通常用来定义全局的 <html> 和 <body> 标签，以及引入全局样式。
src/app/page.tsx: 这是你的网站主页，对应于 / 路由。
public/: 用于存放静态文件，如图片、图标等。这里的文件可以通过根路径 /直接访问。
package.json: 定义了项目信息、依赖库以及可以运行的脚本命令（如 dev, build, start）。

第四步：启动你的应用

激动人心的时刻到了！在你的终端里（确保你仍然在项目根目录下），运行以下命令：

npm run dev

这个命令会启动一个本地开发服务器。你会在终端看到类似这样的输出：

✓ Ready in 2.8s
○ Compiling / ...
✓ Compiled / in 198ms
- Local:    http://localhost:3000

现在，打开你的浏览器，访问 http://localhost:3000。

你应该能看到 Next.js 的默认欢迎页面！

第五步：做出你的第一个修改

让我们来体验一下 Next.js 的热更新 (Hot Reloading) 功能。

在 VS Code 中，打开 src/app/page.tsx 文件。
找到页面上的主要标题部分，它可能是一段被 <p> 或 <h1> 标签包裹的文本。

把它修改成你自己的话，比如：

// ... 其他代码
你好，我的第一个 Next.js 应用！
{/* ... 其他代码 */}
// ... 其他代码

按下 Ctrl + S (或 Cmd + S) 保存文件。

现在，切换回你的浏览器。你会发现页面已经自动更新了，根本不需要你手动刷新！这就是热更新的魔力，它极大地提升了我们的开发体验。

总结

恭喜你！你已经成功完成了 Next.js 开发的第一步：

✅ 确认了 Node.js 环境。
✅ 使用 create-next-app 初始化了一个功能完备的项目。
✅ 了解了基本的项目结构。
✅ 成功启动了开发服务器，并看到了你的应用。
✅ 体验了神奇的热更新功能。

你已经为接下来的学习打下了坚实的基础。在下一篇文章中，我们将深入探讨 Next.js 最核心、最直观的特性之一：基于文件系统的路由机制。我们将学习如何创建新页面、如何建立嵌套路由，以及如何处理动态路由。敬请期待！

来源：https://www.cnblogs.com/lxjshuju/p/19091827