以下のページを参考にして、Next.jsとstyled-componentsをうまく連携できたのですが、
Next.jsでstyled-componentsを使うときに最初に設定しておくこと【完全版】
https://zenn.dev/nbr41to/articles/c0c691653e3d55
いまいち仕組みが理解できておりません????
私の中では
styled-componentsはクライアントサイド用のライブラリとして開発されたので、Next.jsのようなSSR環境で使用する場合は特別な設定が必要
=特別な設定というのは、
_document.tsx
や.babelrc
を上の記事にかかれている通りに修正すること
ということまでは理解できました。(もしかしたらこの理解も間違ってるかもしれませんが・・・)
しかし、以下の3つの疑問が解消できません????
- 疑問①:なぜSSR環境だと特別な設定が必要なのか?
- 疑問②:そもそもクライアントサイド用のライブラリってどういうこと・・・?
- 疑問③:特別な設定をしないまままでも動くには動くが、
next build && next export
してからSSGサイトとして表示してみると「CSSが適用されていないHTMLが一瞬表示され、その後CSSが適用されたHTMLが表示される」みたいなことになるのですが、これはなぜ?
この3つの疑問について、もしよろしければご回答のほど宜しくお願い致します????
あなたの回答
tips
プレビュー