深入解析：环境搭建与你的第一个 Next.js 应用
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style>
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }
code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style><div class="markdown_views prism-atom-one-light" id="content_views"><svg style="display: none" xmlns="http://www.w3.org/2000/svg"><path d="M5,0 0,2.5 5,5z" id="raphael-marker-block" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path></svg><h2>环境搭建与你的第一个 Next.js 应用</h2><p><strong>作者：码力无边</strong></p><hr><p>在上一篇文章中，我们探讨了“为什么”要选择 Next.js。我们了解了它如何通过预渲染、文件路由和内置优化等特性，解决了传统 React 开发中的诸多痛点。理论总是让人兴奋，但真正的乐趣在于实践。</p><p>今天，我们将卷起袖子，一步步搭建好开发环境，并使用官方工具 <code>create-next-app</code> 创建并运行我们的第一个 Next.js 应用。准备好了吗？Let’s go!</p><h3>第一步：环境准备 (Prerequisites)</h3><p>在开始之前，请确保你的电脑上安装了以下两个核心工具：</p><ol><li><p><strong>Node.js</strong>: Next.js 是一个基于 Node.js 的 JavaScript 运行时环境。你需要安装 <strong>18.17 或更高版本</strong>。</p><ul><li><strong>如何检查？</strong> 打开你的终端（在 Windows 上是 Command Prompt 或 PowerShell，在 macOS 上是 Terminal），输入 <code>node -v</code>。如果你看到了版本号并且它符合要求，那就没问题了。</li><li><strong>如何安装？</strong> 如果你没有安装或版本过低，请访问 Node.js 官网 下载并安装最新的 LTS (长期支持) 版本。安装 Node.js 的同时，也会自动安装 <code>npm</code> (Node Package Manager)，它是我们用来管理项目依赖的工具。</li></ul></li><li><p><strong>代码编辑器 (Code Editor)</strong>: 一个好的代码编辑器能让你的开发效率事半功倍。我强烈推荐 <strong>Visual Studio Code (VS Code)</strong>，它免费、功能强大，并且拥有庞大的插件生态系统。</p></li></ol><p>环境就绪，我们可以正式开始了！</p><h3>第二步：使用 <code>create-next-app</code> 创建项目</h3><p>Next.js 官方提供了一个非常方便的脚手架工具 <code>create-next-app</code>，它可以快速帮我们生成一个配置完备的项目骨架。</p><p>打开你的终端，<code>cd</code> 到你希望存放项目的文件夹，然后运行以下命令：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash">npx create-next-app@latest</code></pre>
<p><strong>命令解析：</strong></p><ul><li><code>npx</code> 是 npm 附带的一个工具，它允许你运行一个 npm 包中的可执行文件，而无需将其全局安装到你的电脑上。这能确保你每次使用的都是最新版本的 <code>create-next-app</code>。</li><li><code>create-next-app@latest</code> 就是我们要运行的命令。</li></ul><p>运行后，安装程序会以交互式的方式询问你一系列问题，来定制你的项目。下面是常见问题的解释和建议：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-text">✔ 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)</code></pre>
<ul><li><strong>Project name?</strong>: 给你的项目起个名字，比如 <code>my-nextjs-blog</code>。</li><li><strong>Use TypeScript?</strong>: TypeScript 为 JavaScript 提供了类型安全，是现代 Web 开发的趋势。<strong>建议选择 “Yes”</strong>，我们的专栏后续也会基于 TypeScript。</li><li><strong>Use ESLint?</strong>: 这是一个代码检查工具，能帮助你发现代码中的错误和不规范的写法，保证代码质量。<strong>强烈建议 “Yes”</strong>。</li><li><strong>Use Tailwind CSS?</strong>: 一个非常流行的原子化 CSS 框架，Next.js 对它有很好的集成支持。<strong>建议选择 “Yes”</strong>，它能极大提升我们写样式的效率。</li><li><strong>Use <code>src/</code> directory?</strong>: 将你的应用代码（如组件、页面）都放在一个 <code>src</code> 文件夹内。这是一种常见的项目组织方式，能让项目结构更清晰。<strong>建议选择 “Yes”</strong>。</li><li><strong>Use App Router? (recommended)</strong>: 这是 Next.js 13 之后推出的新一代路由系统，也是未来的方向，功能更强大。<strong>强烈建议 “Yes”</strong>，我们的专栏将重点介绍它。</li><li><strong>Customize the default import alias?</strong>: 自定义模块导入别名，比如用 <code>@/*</code> 代替 <code>../../../*</code>。初学者可以先选择 <strong>“No”</strong>，保持默认设置即可。</li></ul><p>回答完所有问题后，工具会自动创建项目文件夹，并安装所有必要的依赖。这个过程可能需要一两分钟。</p><h3>第三步：项目结构一览</h3><p>安装完成后，让我们进入项目目录并看看里面都有什么。</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash"><span class="token builtin class-name">cd</span> my-nextjs-blog</code></pre>
<p>打开 VS Code 来查看项目文件夹：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash">code <span class="token builtin class-name">.</span></code></pre>
<p>你会看到类似这样的目录结构：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><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 配置文件</code></pre>
<p>别被这么多文件吓到！我们初期只需要关注最重要的几个：</p><ul><li><code>src/app/</code>: 这是我们应用的核心。在 App Router 模式下，这个文件夹里的文件和文件夹结构直接定义了你的网站路由。</li><li><code>src/app/layout.tsx</code>: 这是根布局文件。所有页面都会被包裹在这个布局里，通常用来定义全局的 <code><html></code> 和 <code><body></code> 标签，以及引入全局样式。</li><li><code>src/app/page.tsx</code>: 这是你的网站主页，对应于 <code>/</code> 路由。</li><li><code>public/</code>: 用于存放静态文件，如图片、图标等。这里的文件可以通过根路径 <code>/</code>直接访问。</li><li><code>package.json</code>: 定义了项目信息、依赖库以及可以运行的脚本命令（如 <code>dev</code>, <code>build</code>, <code>start</code>）。</li></ul><h3>第四步：启动你的应用</h3><p>激动人心的时刻到了！在你的终端里（确保你仍然在项目根目录下），运行以下命令：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-bash"><span class="token function">npm</span> run dev</code></pre>
<p>这个命令会启动一个本地开发服务器。你会在终端看到类似这样的输出：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-text">✓ Ready in 2.8s
○ Compiling / ...
✓ Compiled / in 198ms
- Local: http://localhost:3000</code></pre>
<p>现在，打开你的浏览器，访问 http://localhost:3000。</p><p>你应该能看到 Next.js 的默认欢迎页面！</p><h3>第五步：做出你的第一个修改</h3><p>让我们来体验一下 Next.js 的<strong>热更新 (Hot Reloading)</strong> 功能。</p><ol><li><p>在 VS Code 中，打开 <code>src/app/page.tsx</code> 文件。</p></li><li><p>找到页面上的主要标题部分，它可能是一段被 <code><p></code> 或 <code><h1></code> 标签包裹的文本。</p></li><li><p>把它修改成你自己的话，比如：</p> <pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="prism language-tsx">// ... 其他代码
你好，我的第一个 Next.js 应用！
{/* ... 其他代码 */}
// ... 其他代码</code></pre> </li><li><p><strong>按下 <code>Ctrl + S</code> (或 <code>Cmd + S</code>) 保存文件。</strong></p></li></ol><p>现在，切换回你的浏览器。你会发现页面已经自动更新了，根本不需要你手动刷新！这就是热更新的魔力，它极大地提升了我们的开发体验。</p><h3>总结</h3><p>恭喜你！你已经成功完成了 Next.js 开发的第一步：</p><ul><li>✅ 确认了 Node.js 环境。</li><li>✅ 使用 <code>create-next-app</code> 初始化了一个功能完备的项目。</li><li>✅ 了解了基本的项目结构。</li><li>✅ 成功启动了开发服务器，并看到了你的应用。</li><li>✅ 体验了神奇的热更新功能。</li></ul><p>你已经为接下来的学习打下了坚实的基础。在下一篇文章中，我们将深入探讨 Next.js 最核心、最直观的特性之一：<strong>基于文件系统的路由机制</strong>。我们将学习如何创建新页面、如何建立嵌套路由，以及如何处理动态路由。敬请期待！</p></div><br><br>
来源：https://www.cnblogs.com/lxjshuju/p/19091827
頁:
[1]