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引擎實際上，查看達芬奇的目錄即可發