在 React 中，由于缺乏组件卸载的生命周期钩子，实现元素退出动画较为困难。通常使用 Framer Motion 的 <AnimatePresence> 组件来包裹需要动画的组件以实现此功能。在 Next.js 中，虽然 Page Router 可以正常使用此方法，但 App Router 由于存在 bug，无法正确实现退出动画。解决这一问题的常见方法包括：1) 在路由切换时延迟 DOM 卸载，直到动画播放完毕；2) 修改所有 <Link> 的逻辑，先阻止跳转，动画结束后再通过 router.push() 触发跳转。然而，方法 2 不适用于浏览器前进 / 后退键触发的路由切换。

针对 Next.js 13 中 App Router 的问题，GitHub 上的 issue (vercel/next.js/issues/49279) 描述了在共享布局动画中出现的多个场景无法正常工作的情况，主要是因为 OuterLayoutRouter 组件的插入导致布局组件无法提供正确的退出动画。Stack Overflow 上的一个帖子提出了一个可行的解决方案，通过调整 Next.js 的渲染堆栈或公开导航开始时的 API 事件来解决。

具体的解决方案涉及创建一个 FrozenRouter 组件来保持页面切换过程中的上下文持久化，并使用 PageTransitionEffect 组件处理页面切换动画。此方法已在 Next.js 14.2.2 版本中验证有效。此外，有人基于此原理开发了 mekuri 库，进一步封装了这一解决方案，但其具体效果尚需测试。

作者介绍了一个双网口服务器运行 OpenWrt 虚拟机（称为设备 AIO），以及一台刷 OpenWrt 的红米 AX6S 无线路由器（称为设备 AP）的网络环境。拓扑结构为墙壁有线校园网接口连接到 AIO 的 eth1，AIO 的 eth0 连接到 AP 的 LAN 口。由于 BUPT 校园网分配的 IPv6 地址只能供一台设备使用，因此需要配置 NAT6。

作者参考了南科手册和清华大学的教程，首先更改全局网络选项中的 IPv6 ULA 前缀，然后配置 LAN 接口和 WAN/WAN6 接口的选项。接下来，设置 DHCP/DNS 选项和防火墙规则，加入自定义的 IPv6 转发规则。配置完成后，通过网络诊断功能进行 IPv6 测试，确保能够成功访问 IPv6 网络。

最后，作者介绍了如何通过 SSH 或终端自动配置流量转发路由表，确保连接到主路由的设备能够获取到 IPv6 地址。

本文详细介绍了如何使用 GitHub Actions 自动化部署 Next.js 项目到 VPS 服务器。首先，配置 SSH 以允许 GitHub Actions 通过 SSH 连接到服务器，包括创建系统用户、生成 SSH 密钥并添加到服务器的 ~/.ssh/authorized_keys，以及将私钥添加到 GitHub 仓库。接着，通过 GitHub 仓库设置 Secrets，包括项目部署路径、SSH 私钥、服务器 IP 地址、用户名和端口等。

在 GitHub 仓库中创建 .github/workflows/deploy.yml 文件，定义了 CI/CD 流程。该流程包括构建和部署两个主要任务。构建任务涉及检出代码、设置 Node.js 环境、安装依赖、构建项目和上传构建产物。部署任务则包括下载构建产物、清理旧构建、通过 SCP 上传新构建文件到服务器、在服务器上安装依赖、运行数据库迁移和重启应用。

此外，文章还提到了在服务器上预先安装依赖和使用 pm2 管理应用的步骤，确保部署过程顺利进行。整个配置确保了项目在每次代码推送到 master 分支时都能自动完成构建和部署，提高了开发效率和部署的可靠性。

Masonry 布局是一种常用于网页设计的布局方式，特别适合展示图片、卡片等内容块。这种布局模仿砖石墙的排列方式，不同高度的内容块紧密排列，最大化利用空间，使得页面看起来更加紧凑和美观。Masonry 布局的特点包括非均匀排列、动态填充和响应式设计。实现 Masonry 布局的方式有多种，包括使用 JavaScript 库如 Masonry.js 和 Isotope，以及利用 CSS Grid 和 Flexbox 技术。

在实际应用中，Masonry 布局常与行密铺和列密铺布局结合使用，这些布局都是处理不同长宽比元素的有效方法。例如，React Photo Album 库支持这三种布局，可以根据不同需求选择合适的布局方式。此外，文章还介绍了如何手动实现 Masonry 布局，通过创建一个名为 WaterfallGrid 的 React 组件，该组件能够根据屏幕宽度动态调整内容块的排列方式，实现美观且响应式的页面布局。

通过这些技术，开发者可以有效地在网页上展示各种内容，无论是图片、文章还是其他形式的信息，都能以最佳的方式呈现给用户。

本文探讨了如何通过自定义指令扩展 Markdown 语法，以实现更丰富的文章内容展示，如外链嵌入、图表视频和特殊样式文本等。作者提到，使用自定义指令旨在替代 MDX 的部分功能，因为 MDX 与 Markdown 不完全兼容，可能导致旧数据迁移困难和编译错误。文章详细介绍了自定义指令的三种格式：内联指令、叶块指令和容器块指令，并提供了相关示例和详细信息链接。

此外，文章还介绍了 remark 和 rehype 这两个工具链，它们用于处理和转换 Markdown 和 HTML 内容。remark 用于解析和转换 Markdown，而 rehype 用于解析和转换 HTML。两者结合使用，可以实现从 Markdown 到 HTML 的转换，并进行额外的处理，如代码块的语法高亮。

作者还分享了其在博客中使用 Velite 定义 Markdown 文档结构和转换逻辑的实践，以及如何使用 remark 和 rehype 插件来处理 Markdown 内容。文章最后展示了如何通过 remark-directive、remark-directive-rehype 和 rehype-react 这三个插件实现自定义指令的处理，以及如何在 React 应用中渲染这些内容。通过这些方法，作者成功地在 Markdown 中嵌入了复杂组件和交互内容，增强了博客的展示效果和用户体验。