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

拿人去试不就行了 發表於 2022-1-15 19:59:00

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

<h2 id="什么是nextjs">什么是Next.js</h2>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115200820778-1319979913.svg" alt="image" loading="lazy">
<blockquote>
https://www.nextjs.cn
</blockquote>
<blockquote>
这是一个用于生产环境的React框架
</blockquote>
Next.js为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、支持TypeScript、智能化打包、路由预取等功能无需任何配置。
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115195730032-1478280908.png" alt="image" loading="lazy">
<h2 id="为什么选择nextjs">为什么选择Next.js</h2>
<blockquote>
全球领先的公司都在使用并喜爱Next.js
</blockquote>
<h3 id="理由">理由</h3>
<blockquote>
要从头开始使用React构建一个完整的Web应用程序，需要考虑许多重要的细节：
</blockquote>
<ul>
<li>必须使用打包程序(例如WebPack)打包代码，并使用Babel等编译器进行代码转换。</li>
<li>你需要针对生产环境进行优化，例如代码拆分。</li>
<li>你可能需要对一些页面进行预先渲染以提高页面性能和SEO。你可能还希望使用服务器端渲染或客户端渲染。</li>
<li>你可能必须编写一些服务器端代码才能将React应用程序连接到数据存储。</li>
</ul>
一个框架就可以解决上述这些问题。但是，这样的框架必须具有正确的抽象级别，否则它将不是很有用。它还需要具有出色的"开发人员体验"，以确保您和您的团队在编写代码时拥有出色的体验。
<blockquote>
Next.js具有同类框架中最佳的"开发人员体验"和许多内置功能。列举其中一些如下：
</blockquote>
<ul>
<li>直观的、基于页面的路由系统（并支持动态路由）</li>
<li>预渲染。支持在页面级的静态生成(SSG)和服务器端渲染(SSR)</li>
<li>自动代码拆分，提升页面加载速度</li>
<li>具有经过优化的预取功能的客户端路由</li>
<li>内置CSS和Sass的支持，并支持任何CSS-in-JS库</li>
<li>开发环境支持快速刷新</li>
<li>利用Serverless Functions及API路由构建API功能</li>
<li>完全可扩展</li>
</ul>
Next.js被用于数以万计的的网站和Web应用程序，包括许多世界上许多最大的品牌都在使用Next.js。
<h3 id="特色">特色</h3>
<ul>
<li>零配置</li>
</ul>
自动编译并打包。从一开始就为生产环境而优化。
<ul>
<li>混合模式：SSG和SSR</li>
</ul>
在一个项目中同时支持构建时预渲染页面(SSG)和请求时渲染页面(SSR)。
<ul>
<li>增量静态生成</li>
</ul>
在构建之后以增量的方式添加并更新静态预渲染的页面。
<ul>
<li>支持TypeScript</li>
</ul>
自动配置并编译TypeScript。
<ul>
<li>快速刷新</li>
</ul>
快速、可靠的实时编辑体验，已在Facebook级别的应用上规模上得到验证。
<ul>
<li>基于文件系统的路由</li>
</ul>
每个pages目录下的组件都是一条路由。
<ul>
<li>API路由</li>
</ul>
创建API端点(可选)以提供后端功能。
<ul>
<li>内置支持CSS</li>
</ul>
使用CSS模块创建组件级的样式。内置对Sass的支持。
<ul>
<li>代码拆分和打包</li>
</ul>
采用由Google Chrome小组创建的、并经过优化的打包和拆分算法。
<h2 id="勤学实践">勤学实践</h2>
<blockquote>
https://github.com/TaylorShi/demofornextjs
</blockquote>
<h3 id="准备环境">准备环境</h3>
a. 安装Git For Windows(可选)
<blockquote>
https://git-scm.com
</blockquote>
如果你电脑中还没有安装Git程序，那么需要先安装Git For Windows版本。
官方下载链接：Git-2.34.1-64-bit.exe
或者通过Winget安装：
<pre><code class="language-bash">winget install 'Git.Git'
</code></pre>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115203538646-491549699.png" alt="image" loading="lazy">
安装过程没啥可说的，保持默认设置一路安装即可。
在Windows终端中，输入以下命令行可以试探git是否安装成功，并且查看其版本号。
<pre><code class="language-bash">git --version
</code></pre>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115204006757-643018970.png" alt="image" loading="lazy">
b. 安装NodeJs环境(可选)
<blockquote>
https://nodejs.org/zh-cn/
</blockquote>
官方下载链接：node-v16.13.2-x64.msi
或者通过Winget安装：
<pre><code class="language-bash">winget install 'OpenJS.NodeJS.LTS'
</code></pre>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115203616228-1536605359.png" alt="image" loading="lazy">
安装过程没啥可说的，保持默认设置一路安装即可。
在Windows终端中，输入以下命令行可以试探<code>NodeJs</code>是否安装成功，并且查看其版本号。
<pre><code class="language-bash">npm --version
</code></pre>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115203933311-40694820.png" alt="image" loading="lazy">
<h3 id="创建项目">创建项目</h3>
<blockquote>
https://www.nextjs.cn/learn/basics/create-nextjs-app
</blockquote>
a. 前往工作空间
<pre><code class="language-bash">cd D:\TempSpace\
</code></pre>
b. 创建demofornextjs项目
<pre><code class="language-bash">npx create-next-app demofornextjs --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
</code></pre>
其中<code>create-next-app</code>是一个创建项目的工具，<code>demofornextjs</code>是项目的名字和文件夹名称，<code>--example</code>用来指定项目创建时使用的项目模板。
<blockquote>
注意，根据NPM命名规则，项目名称中不能包括大写字母。
</blockquote>
如果实在是创建失败，也可以移除<code>demofornextjs</code>项目后面的内容，同时需要检查项目模板引用位置是否正确，原文在：Create a Next.js app
创建成功之后，会看到如下信息(对于网络不好的童鞋，必要的情况下也许要开启V-N才行)：
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115205442271-1738125777.png" alt="image" loading="lazy">
我们可以查阅下首次创建的项目的文件结构
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115205631375-281803870.png" alt="image" loading="lazy">
c. 运行demofornextjs项目
切换到项目目录
<pre><code class="language-bash">cd .\demofornextjs\
</code></pre>
<blockquote>
如果你是进入一个已经创建好的NextJs项目，那么需要先做包还原：
</blockquote>
<pre><code class="language-bash">npm install
</code></pre>
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315211811837-773028700.png" alt="image" loading="lazy">
通过NPM的运行命令以开发模式运行项目
<pre><code class="language-bash">npm run dev
</code></pre>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115205830322-1903111661.png" alt="image" loading="lazy">
运行成功之后，我们会看到它开启了一个HTTP服务，端口号<code>3000</code>，接下来我们就可以打开看看了。
<ul>
<li>http://localhost:3000</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115205942687-1530259610.png" alt="image" loading="lazy">
好了，我们第一个NextJs项目就创建成功了，非常简单。
d. 创建Git忽略清单文件
<pre><code># NextJs自身目录
node_modules
.next
</code></pre>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115210320983-181885817.png" alt="image" loading="lazy">
e. 编辑页面元素体验快速刷新
对NextJs来说，所有的页面都存放在<code>pages</code>目录下，那么我们看到的示例项目的首页自然也在这里，它就是<code>pages</code>下属的<code>index.js</code>文件。
我们找到它，并且编辑其中的<code>Welcome to</code>字样为<code>Learn</code>
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115210949258-1825425218.png" alt="image" loading="lazy">
保存后，我们看到终端控制台信息变动了一下，它检测到了文件变动，于是里面重新编译了一次，速度很快。
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115211105581-289412068.png" alt="image" loading="lazy">
于此同时，浏览器页面也立即自我刷新了。
<img src="https://img2020.cnblogs.com/blog/375390/202201/375390-20220115211141283-253219047.png" alt="image" loading="lazy">
这正是NextJs开发服务器的"快速刷新"特性。
<h3 id="页面路由和导航">页面、路由和导航</h3>
<blockquote>
https://www.nextjs.cn/learn/basics/navigate-between-pages
</blockquote>
对NextJs来说，所有的页面都在<code>pages</code>目录下，而这个目录下的文件路径的文件名和访问路径是对应的。
<ul>
<li><code>/pages/index.js</code> 对应首页路径：<code>/</code></li>
<li><code>/pages/blog/index.js</code> 对应首页路径：<code>/blog/</code></li>
<li><code>/pages/blog/first-post.js</code> 对应首页路径：<code>/blog/first-post</code></li>
</ul>
我们先在<code>pages</code>目录下创建<code>blog</code>目录，然后再创建一个名为<code>first-post.js</code>的文件。
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315220309353-914898061.png" alt="image" loading="lazy">
填写如下内容进去：
<pre><code class="language-js">export default function FirstPost() {
return <h1>First Post</h1>
}
</code></pre>
这个页面可以设置任何名称，但是它必须至少存在一个<code>default</code>的export。
现在就可以查看地址：http://localhost:3000/blog/first-post 了，欧克，它正常展示出来了。
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315220549662-810771753.png" alt="image" loading="lazy">
是的，这个方式就像我们以前用<code>.php</code>、<code>.jsx</code>、<code>.html</code>那样，通过添加JSX形式的React组件的方式来新建页面。
有了这个First Post页面，接下来我们试着从首页跳转到这个页面来。
找到<code>index.js</code>页面，现在顶部引入Link这个组件：
<pre><code class="language-js">import Link from 'next/link'
</code></pre>
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315221035330-480567246.png" alt="image" loading="lazy">
接着，我们找到H1标签那个a标签，将它的href值指向到新页面的相对路径
<pre><code class="language-html"><h1 className="title">
Let's go <Link href="/blog/first-post"><a>First Blog</a></Link>
</h1>
</code></pre>
同时，我们也对应修改<code>first-post.js</code>文件中的内容，添加返回一个返回主页的链接。
<pre><code class="language-html">import Link from "next/link"

export default function FirstPost() {
return (
<>
 <h1>First Post</h1>
 <h2>
 <Link href="/">
 <a>Back to home</a>
 </Link>
 </h2>
</>
)
}
</code></pre>
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315222121493-1934907999.png" alt="image" loading="lazy">
在这两个代码段中我们会留意到，我们把之前<code><a href="…"></code>替换成了<code><Link href="…"></code>、把<code></a></code>替换成了<code></Link></code>，同时还在中间塞了一个<code><a></a></code>，这是因为在NextJs中，我们可以利用Link这个组件来替代标签<code>a</code>，它可以支持让我们在两个页面间跳转。
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315222801026-2046960668.png" alt="image" loading="lazy">
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315222817014-1730964654.png" alt="image" loading="lazy">
我们看到<code><Link href="/"><a>Back to home</a></Link></code>最终被翻译成了<code><a href="/">Back to home</a></code>出现在源文件中。
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315222747789-699529760.png" alt="image" loading="lazy">
这里可能会问，为什么要使用Link来替代原有的a标签，那是因为Link默认开启了"端侧导航(Client-Side Navigation)"，这意味着通过它的导航不会切换整个页面，而是局部更新，效率更高。
我们来做一个实验模拟，在First Blog那个页面我们打开源码控制器，在Html上添加一个黄色的背景颜色。
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315224020598-1294177761.png" alt="image" loading="lazy">
从First Blog往首页，从首页往First Blog切换你会发现，这个颜色没有消失，这可以证实这一点。
<img src="https://img2022.cnblogs.com/blog/375390/202203/375390-20220315224109714-2048457468.png" alt="image" loading="lazy">
另外NextJs会自动完成"代码切分(Code splitting)"，意味着当你请求首页的时候，并不会请求其他页面的代码，它会按需加载。
意味着当你有几百个页面的时候，加载单个页面也会很快。
同时在生产构建情况下，如果检测到页面里面使用了Link组件的话，也会在后台"预缓存(prefetching)"Link所连接的页面的代码，确保点击链接后快速响应。
正是因为NextJs在端侧导航(Client-Side Navigation)、代码切分(Code splitting)、预缓存(prefetching)这些方面的努力，所以确保了它的高性能。
<h2 id="参考">参考</h2>
<ul>
<li>NextJsCn</li>
</ul> 
来源：https://www.cnblogs.com/taylorshi/p/15807903.html

頁: [1]

琼殿技术论坛's Archiver

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