3篇文章包含标签「nextjs」

如你所见，我的 Blog 是基于 Next.js 开发的，使用的是静态导出扔到 Cloudflare Pages，省心省事。

我不使用图床，习惯将图片和文章一起在同一个仓库里管理。然而 Next.js 的图片优化在静态导出模式下是不可用的。 后端是纯静态的，确实无法在运行时生成适合浏览器的图片。

但图片优化真的不能做吗？显然不是，下面我将分享我的做法。

写了很多 Next.js 的代码，总结了一下 Server Component 和 Client Component 的规律，希望对后来者有用。如果有错误，欢迎大佬指正！

不知道大家有没有遇到过这样的问题，就是在 Next.js 中使用暗黑模式时，页面会闪烁一下，这是因为 Next.js 会在服务端渲染时并不知道用户是否选择了黑暗模式（比如我一般将这个变量存在 window.localStorage 里），所以所以在用户接收到页面之前，页面会先显示一下默认的样式，然后再根据用户的选择来渲染暗黑模式的样式，这样就会导致页面闪烁。

在使用 CSS in JS 的时候这种闪烁尤为明显，例如 MUI 的官网。一般网站都会默认使用亮色主题，但我又倾向于使用暗黑模式，所以经常看到这种闪烁。我认为这真的很影响用户体验，至少我自己看得很难受。