编辑“︁Next.js环境搭建”︁

= Next.js环境搭建 =

== 介绍 ==  
'''Next.js环境搭建'''是学习Next.js框架的第一步，涉及开发环境的配置、项目初始化以及基础工具链的安装。Next.js是一个基于React的框架，支持服务端渲染（SSR）、静态站点生成（SSG）和混合渲染模式。本节将详细介绍如何在本地计算机上搭建Next.js开发环境，涵盖从Node.js安装到项目创建的完整流程。

== 系统要求 ==  
在开始之前，请确保您的系统满足以下最低要求：  
* '''操作系统'''：Windows 10/11、macOS 10.15+ 或 Linux（如Ubuntu 20.04+）  
* '''Node.js'''：版本 18.0 或更高（推荐使用LTS版本）  
* '''包管理器'''：npm（默认随Node.js安装）或 yarn（需单独安装）  
* '''代码编辑器'''：如 [Visual Studio Code](https://code.visualstudio.com/)（推荐）  

=== 验证Node.js安装 ===  
打开终端或命令提示符，运行以下命令检查Node.js和npm版本：  
<syntaxhighlight lang="bash">  
node -v  
npm -v  
</syntaxhighlight>  
输出示例：  
<pre>  
v18.17.1  
9.6.7  
</pre>  

== 安装Next.js ==  
Next.js提供了多种初始化项目的方式，推荐使用官方工具`create-next-app`。  

=== 使用`create-next-app` ===  
运行以下命令创建新项目：  
<syntaxhighlight lang="bash">  
npx create-next-app@latest  
</syntaxhighlight>  
交互式命令行会提示您配置以下选项：  
1. 项目名称（默认：`my-app`）  
2. 是否使用TypeScript（推荐选择`Yes`）  
3. 是否启用ESLint（推荐选择`Yes`）  
4. 是否启用Tailwind CSS（可选）  
5. 是否使用`src/`目录（可选）  
6. 是否启用实验性功能（如`app/`目录，可选）  

完成配置后，工具会自动安装依赖并生成项目结构。  

=== 项目结构解析 ===  
典型的Next.js项目初始目录结构如下：  
<pre>  
my-app/  
├── node_modules/  
├── public/          # 静态资源（如图片、字体）  
├── src/             # 可选：源代码目录  
│   ├── app/         # App Router（实验性）  
│   ├── pages/       # 页面路由（传统方式）  
│   └── styles/      # 全局样式  
├── package.json     # 项目配置和依赖  
└── next.config.js   # Next.js配置文件  
</pre>  

== 启动开发服务器 ==  
进入项目目录并启动开发服务器：  
<syntaxhighlight lang="bash">  
cd my-app  
npm run dev  
</syntaxhighlight>  
默认情况下，Next.js会在`http://localhost:3000`启动开发服务器。打开浏览器访问该地址，您将看到默认的欢迎页面。  

=== 热重载功能 ===  
Next.js支持热模块替换（HMR），修改代码后浏览器会自动刷新，无需手动重启服务器。  

== 配置编辑器 ==  
=== VS Code扩展推荐 ===  
为提高开发效率，建议安装以下扩展：  
* '''Next.js官方扩展'''：提供路由自动补全和错误检查  
* '''ESLint'''：代码质量检查  
* '''Prettier'''：代码格式化  

== 实际案例：自定义首页 ==  
以下示例演示如何修改默认首页（位于`pages/index.js`或`app/page.js`）：  

=== 使用Pages Router（传统方式） ===  
<syntaxhighlight lang="javascript">  
// pages/index.js  
export default function Home() {  
  return (  
    <div>  
      <h1>欢迎来到我的Next.js网站！</h1>  
      <p>这是一个自定义首页示例。</p>  
    </div>  
  );  
}  
</syntaxhighlight>  

=== 使用App Router（实验性） ===  
<syntaxhighlight lang="javascript">  
// app/page.js  
export default function Page() {  
  return (  
    <main>  
      <h1>欢迎使用App Router！</h1>  
      <p>这是Next.js 13+推荐的路由方式。</p>  
    </main>  
  );  
}  
</syntaxhighlight>  

== 常见问题 ==  
=== 端口冲突 ===  
如果默认端口`3000`被占用，可通过以下命令指定其他端口：  
<syntaxhighlight lang="bash">  
npm run dev -- -p 3001  
</syntaxhighlight>  

=== 依赖安装失败 ===  
若遇到依赖问题，尝试以下步骤：  
1. 删除`node_modules`和`package-lock.json`  
2. 运行`npm cache clean --force`  
3. 重新执行`npm install`  

== 总结 ==  
本节详细介绍了Next.js环境搭建的完整流程，包括：  
* 系统要求和工具验证  
* 使用`create-next-app`初始化项目  
* 项目结构和开发服务器启动  
* 编辑器配置和实际案例  

完成环境搭建后，您可以继续学习Next.js的核心功能，如路由、数据获取和API路由。  

<mermaid>  
graph TD  
    A[系统准备] --> B[安装Node.js]  
    B --> C[验证Node.js和npm]  
    C --> D[创建Next.js项目]  
    D --> E[启动开发服务器]  
    E --> F[修改代码并预览]  
</mermaid>

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js基础]]