以下の内容でLTの資料の原稿をつくって欲しいです！ ---- # 自己 / 会社紹介 (30秒) # はじめに (30秒) ## 今回なぜこのテーマを選んだのかからお話しするんですが、その前に1つ質問です。「みなさん、App Routerのスタイリングでの◯◯で困ってませんか？」うちの会社ではNext.jsのアプデでAppRouter にシフトしたんですが、スタイリングの〇〇で困ってまして、結論それを解決したのがvanilla-extractだったということで、今回お話しさせていただきます。# Pages RouterからApp Routerへの移行 (2分) ## App Routerの概要と登場背景　- ネストされたルーティング構造など ## Server Componentsのサポート：　- サーバーサイドレンダリングの効率化　- クライアントサイドのJavaScriptバンドルサイズ削減（強調） # App Routerへの移行に伴うスタイル戦略の変化(1分30秒) ## App RouterでEmotionがあまり使われなくなっている理由 ## Runtime CSS-in-JSとZero-Runtime CSS-in-JSについて # EmotionからVanilla-Extractへの移行 (3分) ## vanilla-extractの概要 / 利点の説明 ## 具体的なスタイル定義の比較 # 実際の現場の声（1分半） ## BI社内のアンケート結果の内容を共有 #まとめ〜締め (1分) ---

はじめにの部分で、以下の内容をざっくり説明したい。もしくは以降でこれよりも詳細に話したい。 --- ご存知のとおり、『App Router』はNext.js 13.4で安定版として導入されたルーティングシステムです。このApp Routerの登場によってここに書いてあるように、React Server Componentsなどの最新機能を活用し、パフォーマンスの高いアプリケーション構築が可能になりました。「ただ・・・」このApp Routerの登場によって、CSS-in-JSライブラリに大きな影響がありました！ CSS-in-JSは大きく分けるとRuntimeとZero-Runtimeの2つが存在しています。今回のApp RouterのServer Componentsの利点を活かすには、JS側での実行が必要な Runtime CSS-in-JSの使用が適していません。 'use client'ディレクティブを使えば使用可能ですが、それではServer Componentsの恩恵を失ってしまいます。なので、開発者の多くはEmotion等から、 Tailwind、Module.cssなどのZero Runtime系のライブラリにシフトしていっています。

Add component to projectLearn more

Log In to Copy Code

History