Next.js + Vite，这是什么新的操作？
事情是这样的。
前段日子做了一个摄影佬必备的线上图库。
https://github.com/Afilmory/Afilmory
这个项目是 Vite + React 写的，当初没有考虑要做 SEO 的打算。
然后想给
那用什么呢，不管用什么必须的支持 Serverless，毕竟我也不想多开一个服务器去托管了。
现在支持 Serverless 的太多，hono，fastify 都可以。我最后还是选择了 Next.js。一开始只想着它处理和画 OG 最方便，而且可以直接托管到 Cloudflare Pages 上。
目前，已知我的 app 是 SPA，vite build 之后是静态产物。我需要在 Next.js 上托管这些静态产物。
托管静态产物，这还不简单。我直接一个
但是，index.html 的
我直接用 dom 操作替换一下。
那么就搞定了对 HTML 的处理，注入了 OG 相关的 Meta 标签。
这里有个注意，截止到这边文章编写前，在使用 Cloudflare Pages 部署 Next.js app 仍有不少问题。比如这里的 fetch 可能导致报错 Cannot perform Construct on a detached ArrayBuffer。我现在的方案就是不适用 fetch。而是在 build 阶段转换为 js 文件。
OK，这样就搞定了。后面开发还是可以用 SPA 去开发，部署的时候去部署 Next.js。直接通过 Cloudflare Pages 一键部署就行了。
看完了？说点什么呢
via 静かな森 (author: Innei)
该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/Z-Turn/nextjs%2Bvite-hack-combined
事情是这样的。
前段日子做了一个摄影佬必备的线上图库。
https://github.com/Afilmory/Afilmory
这个项目是 Vite + React 写的，当初没有考虑要做 SEO 的打算。
然后想给
/:photoId 路由加个 Open Gragh 的支持。那必须得上一个 Server 了。那用什么呢，不管用什么必须的支持 Serverless，毕竟我也不想多开一个服务器去托管了。
现在支持 Serverless 的太多，hono，fastify 都可以。我最后还是选择了 Next.js。一开始只想着它处理和画 OG 最方便，而且可以直接托管到 Cloudflare Pages 上。
目前，已知我的 app 是 SPA，vite build 之后是静态产物。我需要在 Next.js 上托管这些静态产物。
托管静态产物，这还不简单。我直接一个
vite build && cp -r dist ../ssr/public。放到 public 下就被 Next.js 自动托管了。但是，index.html 的
<head /> 咋办，vite build 出来的都是死的。我直接用 dom 操作替换一下。
import { DOMParser } from 'linkedom'
export const runtime = 'edge'
export const GET = async (
request: NextRequest,
{ params }: { params: Promise<{ photoId: string }> },
)
try {
const indexHtml = await fetch(new URL('./index.html', import.meta.url)).then(r => r.text())
const document = new DOMParser().parseFromString(indexHtml, 'text/html')
// Remove all twitter meta tags and open graph meta tags
document.head.childNodes.forEach((node) => {
if (node.nodeName === 'META') {
const $meta = node as HTMLMetaElement
if ($meta.getAttribute('name')?.startsWith('twitter:')) {
$meta.remove()
}
if ($meta.getAttribute('property')?.startsWith('og:')) {
$meta.remove()
}
}
})
// Insert meta open graph tags and twitter meta tags
createAndInsertOpenGraphMeta(document, photo, request)
return new Response(document.documentElement.outerHTML, {
headers: {
'Content-Type': 'text/html',
'X-SSR': '1',
},
})
} catch (error) {
console.error('Error generating SSR page:', error)
console.info('Falling back to static index.html')
console.info(error.message)
return new Response(indexHtml, {
headers: { 'Content-Type': 'text/html' },
status: 500,
})
}
}那么就搞定了对 HTML 的处理，注入了 OG 相关的 Meta 标签。
这里有个注意，截止到这边文章编写前，在使用 Cloudflare Pages 部署 Next.js app 仍有不少问题。比如这里的 fetch 可能导致报错 Cannot perform Construct on a detached ArrayBuffer。我现在的方案就是不适用 fetch。而是在 build 阶段转换为 js 文件。
# Convert HTML to JS format with exported string
node -e "
const fs = require('fs');
const html = fs.readFileSync('./public/index.html', 'utf8');
const jsContent = \`export default \\\`\${html.replace(/\`/g, '\\\\\`').replace(/\\\$/g, '\\\\\$')}\\\`;\`;
fs.writeFileSync('./src/index.html.ts', jsContent);
"OK，这样就搞定了。后面开发还是可以用 SPA 去开发，部署的时候去部署 Next.js。直接通过 Cloudflare Pages 一键部署就行了。
后续
Cloudflare Pages 免费版本的 Worker CPU Time 限制的太低了，而生成 OG 的事件远超这个需要的时间，导致 OG 生成经常不可用。现在使用 Railway 去部署了。
看完了？说点什么呢
via 静かな森 (author: Innei)
虽然不完美，但总算是结束了，高中三年。
开始了，我的假期。
总感觉没有什么实感呢，一旦规划起来未来，就不可避免地谈到钱啊，这究竟是我的价值观出现了偏差，还是这个社会的问题呢？算了吧。在学校里保持着的勉强的一致性在这里就开始显现了，我所处的阶层不允许我去实现这些幻想，但或奢或简，人总是要生活。
今天开始，对全新的自己说一句：加油吧！
开始了，我的假期。
总感觉没有什么实感呢，一旦规划起来未来，就不可避免地谈到钱啊，这究竟是我的价值观出现了偏差，还是这个社会的问题呢？算了吧。在学校里保持着的勉强的一致性在这里就开始显现了，我所处的阶层不允许我去实现这些幻想，但或奢或简，人总是要生活。
今天开始，对全新的自己说一句：加油吧！
棱镜通讯 No.114 海蒂·拉玛（Hedy Lamarr）
这期棱镜通讯的主角或许比较特别，因为很多人并不熟悉她的名字，她不仅是影史上非常著名的女演员之一，而且还是一名发明家，被称为“CDMA之母”、“WiFi 之母”、“蓝牙之母”，她便是海蒂·拉玛（Hedy Lamarr）。在第二次世界大战开始时，海蒂·拉玛与作曲家乔治·安塞尔为盟军的鱼雷开发了一套无线电导航系统，该系统使用扩频和跳频技术来击败轴心国的干扰威胁。尽管这项技术没有引起二战期间美国军方的重视，但这项技术在后来为现代WFi、蓝牙、GPS和CDMA等通信技术奠定了基础，并于......
READ MORE
via 太隐 (author: Ludwig Wang)
这期棱镜通讯的主角或许比较特别，因为很多人并不熟悉她的名字，她不仅是影史上非常著名的女演员之一，而且还是一名发明家，被称为“CDMA之母”、“WiFi 之母”、“蓝牙之母”，她便是海蒂·拉玛（Hedy Lamarr）。在第二次世界大战开始时，海蒂·拉玛与作曲家乔治·安塞尔为盟军的鱼雷开发了一套无线电导航系统，该系统使用扩频和跳频技术来击败轴心国的干扰威胁。尽管这项技术没有引起二战期间美国军方的重视，但这项技术在后来为现代WFi、蓝牙、GPS和CDMA等通信技术奠定了基础，并于......
READ MORE
via 太隐 (author: Ludwig Wang)
