教程 > Next.js 中文教程 阅读:231

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.jsnpm

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

$ npm init

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

$ npm install next react react-dom

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

nextjs 中文教程环境安装

现在编辑 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 ,我们将看到以下输出。

NextJs 中文教程验证nextjs服务

查看笔记

扫码一下
查看教程更方便