Next.js 安装

首先，让我们确保您的开发环境已经准备就绪。

• 如果您尚未安装 Node.js，请 从此处安装。要求 Node.js 10.13 或更高版本。
• MacOS、Windows (包括 WSL) 和 Linux 都被支持。

如果您使用的是 Windows，建议您 下载 Windows 版本的 Git 并使用其随附的 Git Bash，它支持本教程中所用到的 UNIX 特定的命令。

安装设置

我们建议使用 create-next-app创建新的 Next.js 应用程序，它会自动为你设置所有内容。创建项目，请运行：

npx create-next-app@latest
# 或
yarn create next-app
# 或
pnpm create next-app

如果你希望使用 TypeScript 开发项目，可以通过 --typescript 参数创建 TypeScript 项目：

npx create-next-app@latest --typescript
# 或
yarn create next-app --typescript
# 或
pnpm create next-app --typescript

$ npx create-next-app@latest
? What is your project named? » nextapp-runoopstest
√ What is your project named? ... nextapp-runoopstest
? Would you like to use TypeScript with this project? » No / Yes
√ Would you like to use TypeScript with this project? ... No / Yes
? Would you like to use ESLint with this project? » No / Yes
√ Would you like to use ESLint with this project? ... No / Yes
? Would you like to use Tailwind CSS with this project? » No / Yes
√ Would you like to use Tailwind CSS with this project? ... No / Yes
? Would you like to use `src/` directory with this project? » No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
? Use App Router (recommended)? » No / Yes
√ Use App Router (recommended)? ... No / Yes
? Would you like to customize the default import alias? » No / Yes
√ Would you like to customize the default import alias? ... No / Yes
Creating a new Next.js app in F:\www\nextapp-runoopstest.

Using npm.

Initializing project with template: app-tw

Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next
added 343 packages in 17s
Initialized a git repository.

Success! Created nextapp-runoopstest at F:\www\nextapp-runoopstest

安装成功。

安装依赖包

现在，有了一个名为 nextapp-runoopstest 的新目录。让我们 cd 进入此目录：

cd nextapp-runoopstest

安装依赖包：

npm i
#或 cnpm i

运行开发服务器

运行以下命令：

npm run dev
#或
yarn dev

这将在 3000 端口上启动 Next.js 应用程序的“开发服务器”（稍后将对此进行详细介绍）。

让我们检查一下是否正常。在浏览器中打开 http://localhost:3000 。如下图：

编辑 pages/index.js 文件并在浏览器中查看更新。

有关使用 create-next-app 的更多信息，请查看 create-next-app 文档。

手动安装设置

为你的项目安装 next、react 和 react-dom ：

npm install next react react-dom
# or
yarn add next react react-dom

打开 package.json 文件并添加 scripts 配置段：

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

这些脚本涉及开发应用程序的不同阶段：

• dev - 运行 next dev，以开发模式启动 Next.js
• build - 运行 next build，以构建用于生产环境的应用程序
• start - 运行 next start，以启动 Next.js 生产环境服务器
• lint - 运行 next lint，以设置 Next.js 的内置 ESLint 配置
• Next.js 是围绕着 页面（pages） 的概念构造的。一个页面（page）就是一个从 pages 目录下的 .js、.jsx、.ts 或 .tsx 文件导出的 React 组件。

页面（page） 根据其文件名与路由关联。例如，pages/about.js 被映射到 /about。甚至可以在文件名中添加动态路由参数。

在你的项目中创建一个 pages 目录。

为 ./pages/index.js 文件填充如下内容：

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

到目前为止，我们得到了：

• 自动编译和打包（利用 webpack 和 babel）
• React 快速刷新
• ./pages/ 中的 静态生成和服务器端渲染
• 静态文件服务。./public/ 被映射到 /

此外，任何 Next.js 应用程序从一开始就是可以投入到生产环境中的，请在我们的 部署文档 中阅读更多内容。