乘风破浪,遇见未来元宇宙(Metaverse)之面向效率至上的利器Next.js,开启元宇宙时代的前端开发
什么是Next.js
这是一个用于生产环境的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小组创建的、并经过优化的打包和拆分算法。
勤学实践
准备环境
a. 安装Git For Windows(可选)
如果你电脑中还没有安装Git程序,那么需要先安装Git For Windows版本。
官方下载链接:Git-2.34.1-64-bit.exe
或者通过Winget安装:
winget install 'Git.Git'
安装过程没啥可说的,保持默认设置一路安装即可。
在Windows终端中,输入以下命令行可以试探git是否安装成功,并且查看其版本号。
git --version
b. 安装NodeJs环境(可选)
官方下载链接:node-v16.13.2-x64.msi
或者通过Winget安装:
winget install 'OpenJS.NodeJS.LTS'
安装过程没啥可说的,保持默认设置一路安装即可。
在Windows终端中,输入以下命令行可以试探NodeJs
是否安装成功,并且查看其版本号。
npm --version
创建项目
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
,接下来我们就可以打开看看了。
好了,我们第一个NextJs项目就创建成功了,非常简单。
d. 创建Git忽略清单文件
# NextJs自身目录
node_modules
.next
e. 编辑页面元素体验快速刷新
对NextJs来说,所有的页面都存放在pages
目录下,那么我们看到的示例项目的首页自然也在这里,它就是pages
下属的index.js
文件。
我们找到它,并且编辑其中的Welcome to
字样为Learn
保存后,我们看到终端控制台信息变动了一下,它检测到了文件变动,于是里面重新编译了一次,速度很快。
于此同时,浏览器页面也立即自我刷新了。
这正是NextJs开发服务器的"快速刷新"特性。
页面、路由和导航
对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
,它可以支持让我们在两个页面间跳转。
我们看到<Link href="/"><a>Back to home</a></Link>
最终被翻译成了<a href="/">Back to home</a>
出现在源文件中。
这里可能会问,为什么要使用Link来替代原有的a标签,那是因为Link默认开启了"端侧导航(Client-Side Navigation)",这意味着通过它的导航不会切换整个页面,而是局部更新,效率更高。
我们来做一个实验模拟,在First Blog那个页面我们打开源码控制器,在Html上添加一个黄色的背景颜色。
从First Blog往首页,从首页往First Blog切换你会发现,这个颜色没有消失,这可以证实这一点。
另外NextJs会自动完成"代码切分(Code splitting)",意味着当你请求首页的时候,并不会请求其他页面的代码,它会按需加载。
意味着当你有几百个页面的时候,加载单个页面也会很快。
同时在生产构建情况下,如果检测到页面里面使用了Link组件的话,也会在后台"预缓存(prefetching)"Link所连接的页面的代码,确保点击链接后快速响应。
正是因为NextJs在端侧导航(Client-Side Navigation)、代码切分(Code splitting)、预缓存(prefetching)这些方面的努力,所以确保了它的高性能。