Next.js 安装

在开始使用 Next.js 之前，你需要先搭建好开发环境并创建一个新的 Next.js 项目。本章节将指导你完成这些准备工作。

环境要求

确保你的电脑上已经安装了以下软件：

Node.js: Next.js 需要 Node.js 12.22.0 或更高版本。你可以从 Node.js 官网下载并安装。
npm 或 yarn: Node.js 自带了 npm (Node Package Manager)，你也可以选择使用 yarn 作为包管理工具。

你可以通过以下命令检查 Node.js 和 npm 的版本：

bash

node -v
npm -v

创建 Next.js 项目最简单的方式是使用官方提供的脚手架工具 create-next-app。

打开你的终端，执行以下命令：

bash

npx create-next-app@latest my-next-app

在安装过程中，脚手架会询问你一些配置选项，例如：

Would you like to use TypeScript with this project? (是否使用 TypeScript？)
Would you like to use ESLint with this project? (是否使用 ESLint？)
Would you like to use Tailwind CSS with this project? (是否使用 Tailwind CSS？)
Would you like to use the src/ directory with this project? (是否使用 src/ 目录？)
Would you like to use the App Router (recommended)? (是否使用 App Router？)
Would you like to customize the default import alias? (是否自定义默认导入别名？)

你可以根据自己的需求选择 Yes 或 No。对于初学者，建议选择默认选项。

项目创建完成后，进入项目目录并启动开发服务器：

bash

cd my-next-app
npm run dev

如果一切顺利，你会在终端看到类似以下的输出：

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 2.3s (235 modules)

现在，在浏览器中打开 http://localhost:3000，你将看到 Next.js 应用的欢迎页面。

除了使用 create-next-app，你也可以手动安装 Next.js。

初始化项目

bash

mkdir my-next-app
cd my-next-app
npm init -y

配置 package.json

打开 package.json 文件，添加以下 scripts：

json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

创建 pages 目录
Next.js 使用 pages 目录来定义路由。在该目录下创建一个 index.js 文件：
bash
```
mkdir pages
```
在 pages/index.js 中添加以下代码：
jsx
```
function HomePage() {
  return <div>Welcome to Next.js!</div>;
}

export default HomePage;
```
启动开发服务器
bash
```
npm run dev
```

现在，你已经成功搭建了一个手动的 Next.js 项目。

本章节介绍了如何安装和创建 Next.js 项目。我们推荐使用 create-next-app，因为它能快速配置好一个现代化的 Next.js 应用。在下一章节，我们将详细介绍 Next.js 的项目结构。