Next.JS的奇怪BUG之: Hydration failed
背景 昨天在尝试自己编写文章表格的Renderer。在某次保存后，突然出现了以下错误: Hydration failed because the initial UI does not match what was rendered on the server. 查找问题 官方文档 首先根据错误log查看官方对这个问题的描述： 官方将此问题归咎于两个可能原因： - 渲染流程中判断服务端及浏览器端，并导致不同的渲染结果。常见的问题是： - 在React Hook外判断window是否存在，并影响返回结果 - 官方未提到的可能原因为：在渲染过程中使用了仅服务端可用的环境变量，例如process.e
Next.js中使用CSP及Nonce防止XSS攻击
XSS攻击 XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行该代码。 常见的预防XSS攻击方式 - 在网站设计阶段，需要注意过滤用户输入内容，并对其进行一定的编码 - Next.js中谨慎使用dangerouslySetInnerHTML - 使用适当的CSP限制脚本的执行 针对第三点，可以利用Nonce最大化恶意攻击的难度。 什么是Nonce 通常，CSP(Content Security Policy)通过Host确保各类内容的安全。因此，CSP对于内嵌脚本只能“一刀切”，执行或阻止。基于此，CSP提出了Nonce的概念： Nonce
你好，世界
这是来自Hyper Blog的第一篇文章。编写这个博客断断续续花了我几个月时间。虽然现在仍然不完善，但至少基本功能该有的都有了。 架构 博客用Next.js实现，好处在于同时利用了React的优点及静态HTML的快速响应。 经过测试，在部署到服务端后，SSG可以极大的降低访问响应延迟。 同时全站采用了i18n框架进行多语言适配，文章内容自动通过Google Cloud Translate API进行翻译。 前端编辑器 编辑器采用了editor js进行渲染，可以使用纯JSON保存，方便干净。 期间当然是踩坑无数，之后另谈。 随手找的图片
Next.js+Docker+Github Actions实现自动部署
Next.js配置：减小镜像体积 启用Standalone模式 为了减少Next.js Build以后的体积，可以直接在next.config.js中配置Standalone模式： [代码块] 配置后，Next.js将在build阶段自动进行tree shaking，并将几乎所有必须的文件复制至/.next/standalone。在下一步，即可直接将其复制进Docker镜像并推送至repo。但需要注意的是： - Standalone模式下，public及./next/static文件夹不会被复制进standalone中。Next.js认为这些静态文件应当默认由CDN进行分发，而非部署至服务器。
解决达芬奇DaVinci Resolve UI缩放问题
在Windows端2K+分辨率的屏幕上使用达芬奇的时候，文字会非常小。网上的大部分教程要不就是修改系统的缩放率，要不就是把应用高DPI缩放设置成“系统”。前者会导致其他程序的UI也被修改，后者会导致放大后字体非常模糊。于是折腾一番，找到了不会模糊字体的解决方案。先贴上解决方案，然后再细说问题的解决思路。 解决方案 在Windows搜索框输入env，并选择环境变量 - 最下方的新建。 新建环境变量 分别新建两组环境变量： 一路点击确定后，重新打开达芬奇——大功告成！ UI文字终于不糊了 问题的本质是QT引擎 实际上，查看达芬奇的目录即可发