Next.js + Vite，这是什么新的操作？
💡
原文中文，约2300字，阅读约需6分钟。
📝
内容提要
本文介绍了如何将 Vite + React 项目与 Next.js 结合，以支持 SEO 和 Open Graph。作者选择 Next.js 进行无服务器部署，通过 DOM 操作注入所需的 Meta 标签，并使用 Cloudflare Pages 简化开发和上线流程。
🎯
关键要点
- 文章介绍了如何将 Vite + React 项目与 Next.js 结合，以支持 SEO 和 Open Graph。
- 作者选择 Next.js 进行无服务器部署，方便处理 Open Graph 标签。
- 项目最初是一个 SPA，使用 Vite 构建，未考虑 SEO。
- 通过 DOM 操作注入所需的 Meta 标签，以支持动态路由的 SEO。
- 使用 Cloudflare Pages 简化开发和上线流程。
- 在 Next.js 中托管静态产物，使用 vite build 生成的文件。
- 处理 HTML 时，使用 DOMParser 替换 Meta 标签以插入 Open Graph 标签。
- 在 Cloudflare Pages 部署 Next.js 应用时存在一些问题，如 fetch 报错。
- 通过将 HTML 转换为 JS 格式解决了构建阶段的问题，确保部署顺利。
🏷️
标签
➡️
