next.js 中文教程——迹忆客-ag捕鱼王app官网

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。所以如果说了解 那就更好了。

快速开始

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

安装 next.js

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

首先，让我们创建一个 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 
welcome to 迹忆客 - next.js 中文教程!
}
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 ，我们将看到以下输出。