乘风破浪，遇见未来元宇宙(Metaverse)之面向效率至上的利器Next.js，开启元宇宙时代的前端开发

什么是Next.js

https://www.nextjs.cn

这是一个用于生产环境的React框架

Next.js为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、支持TypeScript、智能化打包、路由预取等功能无需任何配置。

为什么选择Next.js

全球领先的公司都在使用并喜爱Next.js

理由

要从头开始使用React构建一个完整的Web应用程序，需要考虑许多重要的细节：

必须使用打包程序(例如WebPack)打包代码，并使用Babel等编译器进行代码转换。
你需要针对生产环境进行优化，例如代码拆分。
你可能需要对一些页面进行预先渲染以提高页面性能和SEO。你可能还希望使用服务器端渲染或客户端渲染。
你可能必须编写一些服务器端代码才能将React应用程序连接到数据存储。

一个框架就可以解决上述这些问题。但是，这样的框架必须具有正确的抽象级别，否则它将不是很有用。它还需要具有出色的"开发人员体验"，以确保您和您的团队在编写代码时拥有出色的体验。

Next.js具有同类框架中最佳的"开发人员体验"和许多内置功能。列举其中一些如下：

直观的、基于页面的路由系统（并支持动态路由）
预渲染。支持在页面级的静态生成(SSG)和服务器端渲染(SSR)
自动代码拆分，提升页面加载速度
具有经过优化的预取功能的客户端路由
内置CSS和Sass的支持，并支持任何CSS-in-JS库
开发环境支持快速刷新
利用Serverless Functions及API路由构建API功能
完全可扩展

Next.js被用于数以万计的的网站和Web应用程序，包括许多世界上许多最大的品牌都在使用Next.js。

特色

零配置

自动编译并打包。从一开始就为生产环境而优化。

混合模式：SSG和SSR

在一个项目中同时支持构建时预渲染页面(SSG)和请求时渲染页面(SSR)。

增量静态生成

在构建之后以增量的方式添加并更新静态预渲染的页面。

支持TypeScript

自动配置并编译TypeScript。

快速刷新

快速、可靠的实时编辑体验，已在Facebook级别的应用上规模上得到验证。

基于文件系统的路由

每个pages目录下的组件都是一条路由。

API路由

创建API端点(可选)以提供后端功能。

内置支持CSS

使用CSS模块创建组件级的样式。内置对Sass的支持。

代码拆分和打包

采用由Google Chrome小组创建的、并经过优化的打包和拆分算法。

勤学实践

https://github.com/TaylorShi/demofornextjs

准备环境

a. 安装Git For Windows(可选)

https://git-scm.com

如果你电脑中还没有安装Git程序，那么需要先安装Git For Windows版本。

官方下载链接：Git-2.34.1-64-bit.exe

或者通过Winget安装：

winget install 'Git.Git'

安装过程没啥可说的，保持默认设置一路安装即可。

在Windows终端中，输入以下命令行可以试探git是否安装成功，并且查看其版本号。

git --version

b. 安装NodeJs环境(可选)

https://nodejs.org/zh-cn/

官方下载链接：node-v16.13.2-x64.msi

或者通过Winget安装：

winget install 'OpenJS.NodeJS.LTS'

安装过程没啥可说的，保持默认设置一路安装即可。

在Windows终端中，输入以下命令行可以试探NodeJs是否安装成功，并且查看其版本号。

npm --version

创建项目

https://www.nextjs.cn/learn/basics/create-nextjs-app

a. 前往工作空间

cd D:\TempSpace\

b. 创建demofornextjs项目

npx create-next-app demofornextjs --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

其中create-next-app是一个创建项目的工具，demofornextjs是项目的名字和文件夹名称，--example用来指定项目创建时使用的项目模板。

注意，根据NPM命名规则，项目名称中不能包括大写字母。

如果实在是创建失败，也可以移除demofornextjs项目后面的内容，同时需要检查项目模板引用位置是否正确，原文在：Create a Next.js app

创建成功之后，会看到如下信息(对于网络不好的童鞋，必要的情况下也许要开启V-N才行)：

我们可以查阅下首次创建的项目的文件结构

c. 运行demofornextjs项目

切换到项目目录

cd .\demofornextjs\

如果你是进入一个已经创建好的NextJs项目，那么需要先做包还原：

npm install

通过NPM的运行命令以开发模式运行项目

npm run dev

运行成功之后，我们会看到它开启了一个HTTP服务，端口号3000，接下来我们就可以打开看看了。

http://localhost:3000

好了，我们第一个NextJs项目就创建成功了，非常简单。

d. 创建Git忽略清单文件

# NextJs自身目录
node_modules
.next

e. 编辑页面元素体验快速刷新

对NextJs来说，所有的页面都存放在pages目录下，那么我们看到的示例项目的首页自然也在这里，它就是pages下属的index.js文件。

我们找到它，并且编辑其中的Welcome to字样为Learn

保存后，我们看到终端控制台信息变动了一下，它检测到了文件变动，于是里面重新编译了一次，速度很快。

于此同时，浏览器页面也立即自我刷新了。

这正是NextJs开发服务器的"快速刷新"特性。

页面、路由和导航

https://www.nextjs.cn/learn/basics/navigate-between-pages

对NextJs来说，所有的页面都在pages目录下，而这个目录下的文件路径的文件名和访问路径是对应的。

/pages/index.js 对应首页路径：/
/pages/blog/index.js 对应首页路径：/blog/
/pages/blog/first-post.js 对应首页路径：/blog/first-post

我们先在pages目录下创建blog目录，然后再创建一个名为first-post.js的文件。

填写如下内容进去：

export default function FirstPost() {
  return <h1>First Post</h1>
}

这个页面可以设置任何名称，但是它必须至少存在一个default的export。

现在就可以查看地址：http://localhost:3000/blog/first-post 了，欧克，它正常展示出来了。

是的，这个方式就像我们以前用.php、.jsx、.html那样，通过添加JSX形式的React组件的方式来新建页面。

有了这个First Post页面，接下来我们试着从首页跳转到这个页面来。

找到index.js页面，现在顶部引入Link这个组件：

import Link from 'next/link'

接着，我们找到H1标签那个a标签，将它的href值指向到新页面的相对路径

<h1 className="title">
    Let's go <Link href="/blog/first-post"><a>First Blog</a></Link>
</h1>

同时，我们也对应修改first-post.js文件中的内容，添加返回一个返回主页的链接。

import Link from "next/link"

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

在这两个代码段中我们会留意到，我们把之前<a href="…">替换成了<Link href="…">、把</a>替换成了</Link>，同时还在中间塞了一个<a></a>，这是因为在NextJs中，我们可以利用Link这个组件来替代标签a，它可以支持让我们在两个页面间跳转。