001 Module Introduction

一、课程核心目标

1. 图像优化：借助Next.js工具简化优化流程，覆盖固定图像（如页眉图）与动态图像（如用户生成内容）

2. 页面元数据配置：作为SEO核心环节，提升网站在搜索引擎中的可见性

二、项目准备要求

1. 基础依赖：使用前序课程的项目快照（需自行获取课程附件）

2. 工具配置：
• 必需Cloudinary账户（用于图像存储与处理）
• 本地项目需添加配置文件，填入Cloudinary的「云名称」「API密钥」等信息（配置方式与早期课程一致）

3. 项目结构：包含起始页（展示用户帖子）、feed页（更多帖子）、新帖子添加功能

三、图像优化核心内容（预告）

四、页面元数据配置核心内容（预告）

1. 基础认知：元数据对SEO的作用与基础概念

2. 静态配置：固定页面（如首页）的元数据设置方法

3. 动态配置：动态路由页面（如用户详情页）的元数据适配

4. 布局继承：理解布局组件中元数据的继承与覆盖规则

五、补充说明

1. 官方资源：Next.js文档设有「应用优化」专区，可参考特定场景（如视频页面、包大小分析）的优化方案

2. 学习建议：需先完成Cloudinary配置，再跟随实操图像优化与元数据配置模块

002 Using the NextJS Image Component

一、组件核心价值：图片优化的核心解决方案

1. 替代传统方案：可从next/image包导入，用于替代标准HTML的<img>标签，是Next.js实现图片优化的核心工具，适用于项目内各类图片展示场景（如logo、标题图等）。

2. 核心优化能力：解决传统图片加载的性能与体验问题，具体体现在三方面：
• 自动文件优化：智能压缩图片体积，生成更小的最优格式文件（如根据设备适配格式），减少加载带宽。
• 视觉稳定性保障：防止页面加载时因图片尺寸变化导致的布局偏移/跳跃，提升用户浏览体验。
• 懒加载机制：仅在图片进入视口（可见）时加载，避免不必要的资源消耗，加快整体页面加载速度。

二、基础使用：导入与配置（本地图片场景）

1. 适用场景

2. 核心步骤

003 Understanding the NextJS Image Component - Image组件

一、核心差异：Image组件 vs 传统img元素

1. src属性赋值差异（核心易错点）

• 传统img：导入图片后，需访问图片对象的src属性赋值；

• NextJS Image组件：直接将导入的完整图片对象作为src props传入，无需访问src属性。

示例代码

二、NextJS导入图片的对象特性

1. 处理后的路径：非原始文件路径，由NextJS构建/开发服务器处理后生成，适配部署/开发环境；

2. 图像元信息：自动包含图片的原始宽度（width）、高度（height）。

示例：打印导入的图片对象

三、宽高信息的核心作用

1. 防止布局偏移（CLS优化）

• 原理：组件初始化时根据宽高为图片预留固定空间，避免图片加载后页面布局跳动；

• 表现：自动为渲染后的img标签设置width/height属性，替代开发者手动设置。

2. 自动生成响应式图片（适配不同屏幕密度）

• 原理：基于原始宽高，自动生成4种不同屏幕密度的图片尺寸；

• 表现：自动添加srcset属性，指向不同宽度的图片URL，浏览器可按需加载适配尺寸。

四、自定义宽高（覆盖默认值）

示例代码

五、核心优势总结

1. 避免布局偏移（CLS），提升用户体验；

2. 自动生成响应式图片，适配不同设备；

3. 图片路径由NextJS自动处理，适配开发/部署环境；

4. 支持自定义宽高，灵活控制展示效果。

004 Controlling the Image Size - 图像大小控制

一、核心问题：自动缩放的底层隐患

二、临时方案：手动覆盖宽高（不推荐，仅临时/快速调整）

1. 核心逻辑

2. 示例代码

3. 注意

三、推荐方案：sizes 属性实现响应式缩放

1. 核心逻辑

2. 语法与示例

（1）固定占比（如占视口10%）

（2）多条件适配（不同视口下不同尺寸）

3. 补充

四、最佳实践：输入图片预处理

1. 优先手动压缩原始图片（调整尺寸、降低分辨率），从源头减少文件体积；

2. 固定尺寸的图片：可结合「手动设置宽高」快速调整（作者偏好）；

3. 响应式图片：必须使用sizes属性，让 Next.js 按需生成最优尺寸。

005 Working with Priority Images & More Settings - 图片加载优化

核心知识点

1. Next.js 图片默认加载行为

• Next.js 为原生 <img> 元素默认设置 loading="lazy" 属性，该属性兼容所有现代浏览器。

• 效果：图片仅在进入视口（屏幕可见区域）时才加载，减少初始加载资源，提升页面性能。

2. 头部图片使用懒加载的问题

• 页面头部图片（如 banner、logo）在页面加载时始终可见，lazy 加载无意义。

• 弊端：浏览器会额外执行“是否需要加载”的检查逻辑，增加不必要的性能开销。

3. 优先级图片（priority）的使用

• 作用：告知 Next.js 和浏览器“该图片在页面加载时必须显示”，禁用懒加载并触发预加载。

• 效果：移除 loading="lazy"，自动添加 fetchpriority="high" 属性，提升图片加载优先级。

• 适用场景：页面首屏必现的图片（头部 banner、首屏封面图等）。

4. 开发者添加图片 vs 用户添加图片

• 开发者添加的图片：可提前规划优化（如设置 priority、指定尺寸、格式）。

• 用户添加的图片：需额外处理（如尺寸校验、格式转换、懒加载适配），视频未展开具体细节，需结合业务场景补充。

示例代码

1. 普通懒加载图片（默认行为）

2. 优先级图片（首屏必现）

3. 原生 img 标签兼容（可选）

关键总结

1. 首屏必现图片：添加 priority（Next.js Image）或 fetchpriority="high"（原生 img），禁用懒加载。

2. 非首屏图片：保留默认 lazy 加载，减少初始加载资源。

3. 用户上传图片：需额外处理尺寸/格式，避免未优化的大图影响性能。

006 Loading Unknown Images - 用户生成图片加载优化

核心目标

一、核心组件：Next.js Image 组件

1. 基础要求

2. 导入方式

二、Image 组件 source 属性规则

关键说明

• 不推荐通过 width/height 调整图片显示大小，建议设置图片原始宽高，显示尺寸通过 CSS 控制；

• 若用户上传图片导致原始宽高未知，需用 fill 属性解决。

三、未知尺寸图片：fill 属性

1. 作用

2. 基础用法

四、外部图片加载：配置 remotePatterns

1. 问题原因

2. 配置方式（next.config.js）

五、fill 属性样式问题：解决图片全屏

1. 问题原因

2. 解决方案（完整示例）

总结

1. 优先使用 next/image 组件，替代原生 <img>；

2. 未知尺寸图片用 fill={true} + 父容器定位约束；

3. 外部图片必须在 next.config.js 中配置 remotePatterns；

4. fill 属性需配合父容器样式，避免图片全屏；

5. 显示尺寸通过 CSS 控制，而非 width/height 属性。

007 Configuring CSS For Images With The fill Prop - Image 组件 fill 属性 CSS 配置

一、核心问题：fill 属性导致图片占满屏幕

1. 现象

2. 根本原因

• fill 属性的核心作用是告知 Next.js：开发者无法确定加载图片的具体尺寸。

• 在未配置其他约束条件时，Next.js 会让图片自动占据所有可用的屏幕空间，最终表现为图片铺满整个屏幕。

二、解决方案：通过 CSS 配置容器元素

1. 核心思路

2. 具体操作步骤（以类名为 post-image 的容器为例）

步骤 1：找到容器元素的样式位置

步骤 2：设置容器的「相对定位」

• 必须配置：为容器添加 position: relative。

• 原理：fill 属性会自动将 Image 组件的 position 设为 absolute（绝对定位），而绝对定位元素会相对于最近的、具有定位属性（非 static）的父容器进行定位，relative 是最常用且兼容性最佳的选择。

• 代码示例：

步骤 3：设置容器的「宽度和高度」

• 问题预警：仅设置 position: relative 后，图片会因容器无尺寸约束而“消失”（实际是容器无宽高，图片无法显示）。

• 解决方案：在容器元素上明确设置 width 和 height（不可直接在 Image 组件本身上设置）。

• 代码示例：

步骤 4：验证效果

1. 相对于 post-image 容器进行定位；

2. 填充容器的宽高（符合 fill 属性的设计初衷）；

3. 不再占据整个屏幕空间。

四、图片正常显示后的优化保留

1. 懒加载（Lazy Loading）：图片默认开启懒加载，仅当图片进入视口时才加载，减少初始加载资源。

2. 源集（srcset）生成：Next.js 会根据设备分辨率自动生成不同尺寸的图片源集，实现“按需加载合适尺寸的图片”，提升加载速度和用户体验。

五、关键注意事项

1. 容器优先原则：Image 组件的尺寸和定位完全依赖父容器，不可跳过容器直接配置 Image 本身的宽高或定位。

2. 全局 CSS vs 模块化 CSS：若使用 CSS Modules，需确保容器的样式规则能正确作用到目标元素（避免类名作用域冲突）。

3. 响应式适配：容器的宽高可使用响应式单位（如 vw、%）或媒体查询（@media），确保在不同设备上的显示效果一致。

008 Using An Image Loader & Cloudinary Resizing - Image 组件：Image Loader 与 Cloudinary 图片缩放

一、核心背景：为何需要 Image Loader + 图片托管服务

1. Next.js 原生图片优化的局限性

• 托管服务可通过 URL 参数动态生成不同尺寸、质量的图片版本；

• 支持按需裁剪、格式转换等操作，且能缓存优化后的图片，减少重复计算；

• 直接加载原始大图片会浪费带宽，影响页面加载速度。

2. Cloudinary 等托管服务的核心优势

• URL 参数驱动优化：通过在图片 URL 中添加参数（如宽度、高度、质量），实时生成优化后的图片；

• 缓存机制：优化后的图片会被缓存，后续请求直接返回缓存结果，提升响应速度；

• 多格式支持：自动适配 WebP、AVIF 等高效格式，平衡画质与体积。

二、关键知识点 1：Image 组件的 loader 属性

1. loader 属性的作用

• 拦截 Image 组件对图片源（src）的处理逻辑；

• 自定义图片 URL 的生成规则（如拼接 Cloudinary 优化参数）；

• 在图片渲染前修改路径，实现与第三方托管服务的联动。

2. loader 函数的参数与返回值

3. 基础示例：创建空 loader 函数

三、关键知识点 2：结合 Cloudinary 实现图片优化

1. Cloudinary URL 结构分析

• 例如：https://res.cloudinary.com/demo/image/upload/v1680000000/sample.jpg

• 核心可修改部分：upload 与文件名之间的参数区域（可插入优化参数）。

2. 核心需求：拼接 Cloudinary 优化参数

• w_[数值]：设置图片宽度（如 w_200 表示宽度 200px）；

• q_[数值]：设置图片质量（如 q_50 表示质量 50%）；

• （可选）h_[数值]：设置图片高度（若需固定宽高比，建议仅设宽度，让 Cloudinary 自动计算高度）。

3. 完整示例：自定义 Cloudinary Loader

步骤 1：拆分原始 URL 结构

• 前缀：https://res.cloudinary.com/demo/image/upload（包含云名称和 upload 关键词）；

• 后缀：v1680000000/sample.jpg（包含版本号和文件名）。

步骤 2：拼接优化参数

步骤 3：生成的最终 URL

四、关键知识点 3：解决图片扭曲问题

1. 扭曲原因

2. 两种解决方案

方案 1：仅设置宽度，让高度自动适配

方案 2：使用 Cloudinary 裁剪参数（保持比例）

五、关键知识点 4：fill 属性与 sizes 属性的联动

1. fill 属性的注意事项

• fill 表示图片尺寸未知，Next.js 需通过 sizes 了解图片在不同视口下的显示尺寸；

• 若不设置 sizes，可能影响 srcset 的生成逻辑，导致图片加载体积过大。

2. sizes 属性的设置规则

3. 特殊场景：强制固定宽度时可省略 fill

• 非本地图片（如 Cloudinary 图片）不使用 fill 时，必须同时设置 width 和 height（Next.js 要求）；

• 可通过 CSS 覆盖显示尺寸，避免 Cloudinary 生成的尺寸与实际显示尺寸不一致：

六、关键知识点 5：本地图片与远程图片的优化差异

七、常见问题与解决方案

九、总结与扩展建议

1. 核心工作流

1. 定义 loader 函数，拆分 Cloudinary 图片 URL；

2. 拼接宽度、质量等优化参数；

3. 在 Image 组件中绑定 loader 并设置 quality；

4. 根据需求选择「自动适配高度」或「裁剪固定比例」，避免图片扭曲；

5. （可选）添加 sizes 属性，优化 srcset 生成。

2. 扩展建议

• 参考 Cloudinary 文档：了解更多参数（如格式转换 f_webp、圆角 r_20），实现更精细的优化；

• 封装通用 loader：将 Cloudinary 云名称、默认参数（如默认质量）抽为常量，封装成可复用的 loader 函数；

• 结合环境变量：将 Cloudinary 云名称、API 密钥等敏感信息存储在 .env.local 中，避免硬编码。

009 Page Metadata - An Introduction

• Next.js 添加页面元数据：元数据可被搜索引擎抓取器抓取，决定网站在抓取器中的显示方式，且可根据具体用例进行多种配置，建议浏览官方文档了解设置方法及配置选项。

• 设置元数据的两种重要方式：分别是静态元数据和动态元数据，后续会对这部分内容进行讲解。

010 Configuring Static Page Metadata - 静态页面元数据配置

一、核心概念

二、基础配置方法

1. 配置文件范围：需在目标页面的page.js文件或布局文件layout.js中配置，建议为所有页面统一添加元数据。

2. 核心语法：导出名为metadata的常量（名称不可自定义），该常量包含一个对象，用于存储元数据属性。

三、关键元数据属性

四、配置效果验证

1. 浏览器标签验证：保存配置文件后加载页面，可直接在浏览器标签上看到title属性设置的内容。

2. 页面源码验证：右键“查看页面源代码”，在<head>标签内可找到<meta name="description" content="配置的描述文本">标签，确认description配置生效。

五、扩展配置

1. 开放图（Open Graph）设置：用于控制页面在社交平台（如X、Facebook）分享时的预览效果，可配置预览图片、分享标题等，需在metadata对象中添加对应字段（如openGraph属性）。

2. 官方文档参考：更多可配置的元数字段（如作者、关键词、viewport等），可查阅Next.js官方元数据字段参考页面获取详细说明。

011 Configuring Dynamic Page Metadata - 动态页面元数据配置

一、静态与动态元数据的核心区别

二、动态元数据核心实现（Next.js）

1. 关键函数：generateMetadata

• 函数性质：必须是异步函数（async），且函数名严格固定为generateMetadata（Next.js会自动识别并执行）。

• 替代关系：不使用静态元数据的export const metadata = {...}，而是用export async function generateMetadata() {...}。

2. 函数参数与数据获取

• 自动接收参数：函数会自动获取Next.js传递的配置对象，包含：
• 动态路由的页面参数（如[id]路由中的id值）；
• 页面搜索词（searchParams），便于根据用户搜索内容调整元数据。

• 静态路由数据获取：即便非动态路由（如普通列表页），也可在函数内通过异步请求获取动态数据（如await getPosts()获取文章列表）。

3. 元数据生成与返回

• 步骤：
1. 在函数内获取动态数据（如通过posts.length得到文章数量）；
2. 返回包含元数据的对象，支持混合静态与动态内容：
• 静态部分：固定描述（如description: "浏览我们所有的帖子"）；
• 动态部分：用字符串模板生成动态内容（如title: 浏览我们所有${posts.length}篇文章``）。

• 示例代码逻辑：

三、核心原理

012 Understanding Layout Metadata - 布局元数据

一、元数据基础设置

1. 设置方式分类
• 静态元数据：通过元数据常量/变量直接定义，适用于内容固定的场景（如网站通用标题、描述）。
• 动态元数据：借助导出的“生成元数据函数”实现，可根据页面参数（如动态路由参数）实时生成个性化元数据。

2. 配置文件位置：元数据可在页面js文件或布局js文件中导出设置，推荐在布局文件（如根布局）中统一配置基础元数据。

二、布局元数据的核心规则

1. 作用范围：布局中设置的元数据会作用于“所有未单独配置元数据的页面”，确保页面基础元数据不缺失。

2. 元数据合并逻辑：布局元数据与页面元数据遵循“覆盖+继承”原则：
• 若页面仅设置部分元数据（如仅标题），则页面的标题会覆盖布局标题，布局的描述等其他元数据仍生效；
• 若页面未设置任何元数据，则直接使用布局的完整元数据对象。

3. 根布局配置要求：在课程提供的项目中，需在根布局文件中导出元数据对象，作为全量页面的元数据基础。

📎 参考文章

• 一些引用

• 引用文章