Next.js 深度教程：服务端渲染、静态生成到增量静态再生 | 2024最新版
<h2 id="优化字体和图像" data-source-line="3">优化字体和图像</h2><p data-source-line="5">书接上回，我们学习了如何设计Next.js应用程序，让我们继续优化主页和添加自定义字体、图像。</p>
<p data-source-line="7">在网站设计中，字体扮演着关键角色，然而，若需获取并加载字体文件，项目中引入自定义字体可能对性能产生影响。</p>
<p data-source-line="9">Google 采用累计布局偏移（CLS）作为评估网站性能和用户体验的指标。对于字体而言，布局偏移发生在浏览器先以备用字体或系统字体渲染文本，随后在自定义字体加载完成后进行替换时。这种替换可能导致文本大小、间距或布局的变动，进而影响周围元素的位置。</p>
<p data-source-line="11">在使用 Next.js 的next/font模块时，该框架会自动优化应用程序中的字体。具体来说，它会在构建阶段下载字体文件，并将其与您的其他静态资源一同托管。这一过程确保了当用户访问您的应用程序时，不会因额外的字体网络请求而影响性能。</p>
<p data-source-line="13">上回的目录结果是这样的，现在我们要在ui目录下面创建一个fonts.ts文件，用于控制字体信息<br><img src="https://pic.dataeast.cn/picture/20241010102456.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010102456.png"></p>
<p data-source-line="16">在fonts.ts上面导入字体模块<br><img src="https://pic.dataeast.cn/picture/20241010103002.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010103002.png"></p>
<p data-source-line="19">返回layout.tsx文件，为了更好的学习，我们把所有默认的内容全部删除掉，留下最简单的内容，将我们的字体模块应用在项目当中</p>
<pre data-source-line="20"><code class="hljs language-tsx"><span class="hljs-keyword">import <span class="hljs-string">'@/app/ui/globals.css';<br><span class="hljs-keyword">import { inter } <span class="hljs-keyword">from <span class="hljs-string">'@/app/ui/fonts';<br> <br><span class="hljs-keyword">export <span class="hljs-keyword">default <span class="hljs-keyword">function <span class="hljs-title function_">RootLayout(<span class="hljs-params">{<br> children,<br>}: {<br> children: React.ReactNode;<br>}) {<br> <span class="hljs-keyword">return (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">html <span class="hljs-attr">lang=<span class="hljs-string">"en"><br> <span class="hljs-tag"><<span class="hljs-name">body <span class="hljs-attr">className=<span class="hljs-string">{`${<span class="hljs-attr">inter.className} <span class="hljs-attr">antialiased`}>{children}<span class="hljs-tag"></<span class="hljs-name">body><br> <span class="hljs-tag"></<span class="hljs-name">html><br> );<br>}<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<p data-source-line="36"><img src="https://pic.dataeast.cn/picture/20241010103425.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010103425.png"><br>访问我们测试环境，使用浏览器的F12功能，点击查看器（Chrome浏览器），其他浏览器可能叫其他名字，查看body，发现我们的字体已经应用到了项目当中。<br><img src="https://pic.dataeast.cn/picture/20241010103605.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010103605.png"></p>
<p data-source-line="40">再回到字体页面page.tsx，我们要创建一个专门用于logo模块的字体，解析这个代码的意思 <code>import { Lusitana } from 'next/font/google';</code>从 Next.js 的 Google Fonts 集成中导入 Lusitana 字体。<br>weight: ['400', '700']指定了要使用的字体粗细。这里选择了两种粗细：'400' 是常规字重，'700' 是粗体字重。<br>subsets: ['latin'] 指定了字体的子集。这里选择了 Latin 子集，包含了基本的拉丁字符。<br><img src="https://pic.dataeast.cn/picture/20241010105721.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010105721.png"></p>
<p data-source-line="45">配置好字体之后，我们需要应用在不同的页面模块当中，现在我们需要修改页面的蓝色部分，在这个部分添加一个logo。<br>创建一个 app/ui/acme-logo.tsx 页面</p>
<p data-source-line="48">首先我们要引入一个图标组件，在终端命令行中输入 <code>pnpm install @heroicons/react</code><br>写入代码</p>
<pre data-source-line="50"><code class="hljs language-tsx"><span class="hljs-keyword">import { <span class="hljs-title class_">GlobeAltIcon } <span class="hljs-keyword">from <span class="hljs-string">'@heroicons/react/24/outline';<br><span class="hljs-keyword">import { lusitana } <span class="hljs-keyword">from <span class="hljs-string">'@/app/ui/fonts';<br><br><span class="hljs-keyword">export <span class="hljs-keyword">default <span class="hljs-keyword">function <span class="hljs-title function_">AcmeLogo(<span class="hljs-params">) {<br> <span class="hljs-keyword">return (<br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div<br> <span class="hljs-attr">className=<span class="hljs-string">{`${<span class="hljs-attr">lusitana.className} <span class="hljs-attr">flex <span class="hljs-attr">flex-row <span class="hljs-attr">items-center <span class="hljs-attr">leading-none <span class="hljs-attr">text-white`}<br> ><br> <span class="hljs-tag"><<span class="hljs-name">GlobeAltIcon <span class="hljs-attr">className=<span class="hljs-string">"h-12 w-12 rotate-" /><br> <span class="hljs-tag"><<span class="hljs-name">p <span class="hljs-attr">className=<span class="hljs-string">"text-">Warp Driver Logo<span class="hljs-tag"></<span class="hljs-name">p><br> <span class="hljs-tag"></<span class="hljs-name">div><br> );<br>}<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<p data-source-line="65">pnpm 安装完成之后如果出现这样的错误Cannot find module '@heroicons/react/24/outline' or its corresponding type declarations.ts(2307)，可以通过重启ts服务器进行修复。</p>
<p data-source-line="67">重启ts服务器的方法，在vscode上方输入 > TypeScript: Restart TS server,点击之后即可重启<br><img src="https://pic.dataeast.cn/picture/20241010112352.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010112352.png"></p>
<p data-source-line="70">接下来我们来到page.tsx页面，将我们的logo模块应用到主页当中<br><img src="https://pic.dataeast.cn/picture/20241010112730.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010112730.png"><br>访问我们的测试环境，这里就能看到我们的logo应用到了网页当中<br><img src="https://pic.dataeast.cn/picture/20241010113021.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010113021.png"></p>
<h2 id="优化图像" data-source-line="75">优化图像</h2>
<p data-source-line="76">Next.js 允许在顶级文件夹 /public 下提供静态资产（如图像）。这些文件可以在您的应用程序中直接引用。例如，在常规 HTML 中，您可以通过以下方式添加图像：</p>
<pre><code data-source-line="78"><img
src="/hero.png"
alt="Screenshots of the dashboard project showing desktop version"
/>
</code></pre>
<p data-source-line="84">然而，这要求您手动执行以下操作：<br>1、确保图像能够适应不同的屏幕尺寸。<br>2、为不同的设备指定图像大小。<br>3、防止图像加载时布局发生偏移。<br>4、延迟加载用户视口之外的图像。<br>图像优化是 Web 开发中的一个重要主题，本身可以视为一门专业。您可以使用 Next.js的next/image组件自动优化图像，而无需手动实施这些优化。</p>
<p data-source-line="91">现在我们需要往页面的右边添加一张图片，首先我们要将图片放在public文件夹当中，默认创建的脚手架是没有这个目录的，因此我们要在跟目录下创建这个文件夹，并且往文件夹里面添加图片<br><img src="https://pic.dataeast.cn/picture/20241010114055.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010114055.png"></p>
<p data-source-line="94">返回我们的page.tsx页面，添加图片依赖<code><Image></code>组件 <code>import Image from 'next/image';</code><br><img src="https://pic.dataeast.cn/picture/20241010114330.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010114330.png"><br>然后往我们屏幕的右边栏目增加图片</p>
<pre data-source-line="97"><code class="hljs language-tsx"><<span class="hljs-title class_">Image<br> src=<span class="hljs-string">"/helloo.png"<br> width={<span class="hljs-number">1000}<br> height={<span class="hljs-number">760}<br> className=<span class="hljs-string">"hidden md:block"<br> alt=<span class="hljs-string">"Screenshots of the dashboard and invoices page"<br>/><br></span></span></span></span></span></span></code></pre>
<p data-source-line="106"><img src="https://pic.dataeast.cn/picture/20241010114524.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010114524.png"></p>
<p data-source-line="108">刷新页面即可看到图片样子啦，在这里，您要将像素设置为width和1000。最好将图像的和设置为以避免布局偏移，这些应该与源图像的纵横比相同。<br><img src="https://pic.dataeast.cn/picture/20241010114721.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241010114721.png"></p>
<p data-source-line="112">如果你想看更多内容或者能够看到技术更新的内容，请百度搜索：<code>曲速引擎 warp drive csdn</code> 在首页找到我的地址访问即可，一线更新内容将会在我的个人博客上面更新，谢谢大家。</p>
<p data-source-line="114">更详细内容查看</p>
<blockquote data-source-line="115">
<p>独立博客 https://www.dataeast.cn/<br>CSDN博客 https://blog.csdn.net/siberiaWarpDrive<br>B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0<br>关注 “曲速引擎 Warp Drive” 微信公众号<br><img src="https://pic.dataeast.cn/picture/20241016170749.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241016170749.png"></p>
</blockquote><br><br>
来源：https://www.cnblogs.com/XiaoH160309/p/18472545
頁:
[1]