Next.jsのApp routerを利用している際にStyled-Componentsで発生するちらつき(FOUC)を抑制する方法を紹介します
動作確認環境
Next.js: 14.1.0 (App router)
Styled-Components: 6.0.5
App routerのNext.jsでStyled-Componentsを利用すると、FOUC(Flash of Unstyled Content)が発生する場合があります
これらはCSSのレンダリングが遅れて画面がチラつくと考えられていますが、原因を探るとページロード時に何度かCSSが読み込みなおされていることが問題のように考えています
私が遭遇した問題では createGlobalStyle でフォントを読み込んだ事が原因でちらつきが発生していました
export const GlobalStyle = createGlobalStyle`@font-face {font-family; 'Noto Sans Japanese';font-style: normal;font-weight: 400;font-display: swap;src: local("NotoSansCJKjp-Regular.otf"),url('../fonts/NotoSansJP-Regular-min.woff') format("woff");}}
この問題は、別途cssファイルを作成し、それをclient側で読み込むようにしたところ解決しました
@font-face {font-family; 'Noto Sans Japanese';font-style: normal;font-weight: 400;font-display: swap;src: local("NotoSansCJKjp-Regular.otf"),url('../fonts/NotoSansJP-Regular-min.woff') format("woff");}
'use client'import './style.css'
開発者モードで見ていると、1回のページロードで最初から何度もよみこまれて表示されているようでした
何がともあれ、とりあえずこれで解決できたので、もしお困りの方はお試し下さい 🎉