next优化

next内置了优化方案，提高页面的加载速度，增强用户体验

图片组件

next/image组件使用了自动图像优化功能,扩展了 HTML <img> 元素
尺寸优化：使用 WebP 和 AVIF 等现代图像格式，自动为每个设备提供正确尺寸的图像 [为不同设备指定图片大小]
视觉稳定性：加载图像时自动防止布局移动, [防止图片加载时的布局变化]
更快的页面加载, 使用懒加载, 图像在进入视口时加载，并带有可选的模糊占位符 [对用户视口外的图片进行懒加载]

Font字体组件

使用系统字体，我们可以保证文本将尽早呈现。但我们可能并不想要这些字体类型，更重要的是，它们在操作系统之间并不一致,因此next针对这个问题,做了字体组件

next/font优化了字体加载, 在构建时会下载字体文件并将托管在静态资源中。所以不会有额外的字体网络请求，从而不会影响性能

元数据

Metadata元数据对于SEO是比较重要的, 对搜索引擎更容易访问和有效的索引网页,提高其在搜索结果中的排名
元数据提供有关网页的其他详细信息
嵌入在页面的 HTML 中，通常位于 <head> 元素内

元数据类型

标题元数据（Title Metadata）负责显示在浏览器标签上的网页标题。对于 SEO 来说非常关键，因为它帮助搜索引擎了解网页的主题

html
<title>Page Title</title>

描述元数据（Description Metadata）提供对网页内容的简要概述，通常显示在搜索引擎结果中

html
<meta name="description" content="A brief description of the page content." />

关键字元数据（Keyword Metadata）包括与网页内容相关的关键字，帮助搜索引擎索引页面

html
<meta name="keywords" content="keyword1, keyword2, keyword3" />

Open Graph 元数据（Open Graph Metadata）

html
<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />

Favicon 元数据（Favicon Metadata）当在社交媒体平台上分享时，此元数据增强了网页的表示，提供标题、描述和预览图像等信息。

html
<link rel="icon" href="path/to/favicon.ico" />

懒加载

懒加载（也称为延迟加载或按需加载）

减少初始页面加载时间，提高页面性能。懒加载是在需要时加载组件、模块或资源，而不是在页面加载时一次性加载所有内容
next/dynamic 是 React.lazy() 和 Suspense 的结合体
动态导入组件：使用动态导入功能可以在需要时按需加载组件。这个功能可以结合next/dynamic库来实现

js
// 在访问页面时，DynamicComponent组件才会被加载和渲染，而不是在页面初始加载时就加载
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'));

function Home() {
    return (
        <div>
            <h1>Hello, World!</h1>
            <DynamicComponent />
        </div>
    );
}
export default Home;

静态资源

Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，例如图像
代码中可以通过访问 /avatars/me.png 路径来查看文件 public/avatars/me.png

图片组件​

Font字体组件​

元数据​

元数据类型​

懒加载​

静态资源​

图片组件

Font字体组件

元数据

元数据类型

懒加载

静态资源