Next.js 安装

在开始之前，确保你已经安装了 Node.js 和 npm，你可以通过以下命令检查它们是否已经安装：

node -v
npm -v

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

更多信息可以查阅：http://npm.taobao.org/。

---

使用 create-react-app 快速构建 Next.js 开发环境

Next.js 提供了一个官方的脚手架工具 create-next-app，用于快速搭建项目。

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 Next.js 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目：

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

安装时，您将看到以下提示，一路回车即可：

Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

npx 是一个 Node.js 工具，用于运行包中的二进制文件，而无需全局安装。

• 使用 create-next-app 脚手架工具创建一个新的 Next.js 项目。
• my-next-app 是项目的名字，你可以根据需要修改为任何名称。
• 它会自动安装项目所需的依赖。

运行该命令后，create-next-app 会自动完成以下操作：

• 创建一个名为 my-next-app 的文件夹。
• 初始化项目，安装必要的依赖。
• 创建基本的项目结构，包括 app 文件夹、public 文件夹、package.json 文件等。

创建完成后，进入项目目录：

cd my-next-app

在项目目录中，运行以下命令启动开发服务器：

npm run dev

或者如果你使用 yarn：

yarn dev

开发服务器默认运行在 http://localhost:3000，打开浏览器，访问 http://localhost:3000，你应该会看到 Next.js 的默认欢迎页面。

我们可以修改 app 目录下的 page.tsx 文件，修改后的代码为：

访问 http://localhost:3000，显示如下：

Hello, World!