·
17 岁高三学生 | 业余前端|React & Nextjs | UI & UX 设计

还有就是每次刷新都会闪一下浅色模式和英文界面,然后才变成设定的

Replies
9

这个问题在 nextjs 下比较难解决,localstorage 的配置和服务端渲染不一致导致的,比较好的方法是通过 cookie 配置传递服务端进行控制,但是不是那么好些,如果你有思路或者想参与贡献, stuck_out_tongue_closed_eyes 我可以先拉你进 repo(后面会开源)

Next.js方面可以直接用开源库next-themes,支持到最新Next.js13的SSG/ SSR的无闪屏

不过我不是很清楚你源码适不适合嵌入这个库,可以考虑拉我进看一下,我在自己的实践中暂时没有遇到深色模式闪屏的问题 no_mouth 不过这个i18n的实现,如果调用local storage可能无法避免的闪屏,这方面我还得研究一下

你给下 github username,我拉你进去,你提到的 next-themes 还是用 localstorage 实现的,代码可以参考下,但有 client/server 状态不同步的问题,最好的做法还是把 theme 状态放 cookie,首次请求带到后端,在 NextRequest 里面拿到状态,写入 <html class="dark"> ,并在 server 初始化组件状态,英文界面的问题也是如此,需要写入 <html lang="zh">, 才能真正避免首次加载闪烁问题。

用户名 ifshizuku

可能是你的实现结构我现在没法在用户端看懂,因为我之前使用这个库的时候可以正常在SSR渲染同步状态 joy 那个库确实是基于localstorage

已发送邀请

有别的即时沟通平台吗,这个回复总不能这样一直进行下去 joy

我给你发私信了