Next.js 中文教程

Next.js 是基于 React 的框架，具有服务器端渲染功能。 它非常快速且对 SEO 非常友好。 使用 Next.js，我们可以非常轻松地创建健壮的基于React的应用程序并对其进行测试。

为什么选择 Next.js

全球领先的公司都在使用并喜爱 Next.js。Next.js 具有以下优点

• 零配置 - 自动编译并打包。从一开始就为生产环境而优化。
• 混合模式： SSG 和 SSR - 在一个项目中同时支持构建时预渲染页面（SSG）和请求时渲染页面（SSR）。
• 增量静态生成 - 在构建之后以增量的方式添加并更新静态预渲染的页面。
• 支持 TypeScript - 自动配置并编译 TypeScript。
• 快速刷新 - 快速、可靠的实时编辑体验，已在 Facebook 级别的应用上规模上得到验证。
• 基于文件系统的路由 - 每个 pages 目录下的组件都是一条路由。
• API 路由 - 创建 API 端点（可选）以提供后端功能。
• 内置支持 CSS - 使用 CSS 模块创建组件级的样式。内置对 Sass 的支持。
• 代码拆分和打包 - 采用由 Google Chrome 小组创建的、并经过优化的打包和拆分算法。

学习之前的准备知识

在继续本教程之前，应该对 JavaScript 和 React 有基本的了解。因为Next.js 支持TypeScript。所以如果说了解 TypeScript 那就更好了。

快速开始

下面让我们从安装 next.js 开始

安装 next.js

由于 Next.js 是一个基于 React 的框架，我们使用的是 Node 环境。 现在确保你的系统上安装了 Node.js 和 npm。

首先，让我们创建一个 package.json 文件

$ npm init

然后使用下面的命令安装Next.js

$ npm install next react react-dom

出现如下结果，表示我们的next.js已经安装成功了

现在编辑 package.json 文件， 在 scripts 部分添加如下的内容，使其包含Next.js命令。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "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 配置

创建 页面(pages)目录

Next.js 是围绕着 页面（pages） 的概念构造的。一个页面（page）就是一个从 pages 目录下的 .js 、**.jsx** 、**.ts** 或 .tsx 文件导出的 React 组件。

在 nextjs 文件夹中创建一个 pages 文件夹，并创建一个包含以下内容的 index.js 文件。

index.js

function HomePage() {
   return <div>Welcome to 迹忆客 - Next.js 中文教程!</div>
}

export default HomePage

启动 Next.js 服务器

运行以下命令启动服务器

$ npm run dev

出现下面结果表示服务启动成功

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1650 ms (110 modules)
Attention: Next.js now collects completely anonymous telemetry regarding usage.

并且启动的监听端口是 3000。 在浏览器中打开 localhost:3000 ，我们将看到以下输出。