Next.js のApp Router を学ぶ際、shadcn/ui が 参考になったという話

Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。

Transcript

1. Next.js のApp Router を学ぶ際、shadcn/ui が 参考になったという話 NAKAZATO Junya CA ADVANCE, Inc.
3. 3 3 机DIY IoT CAD入門 Gadget カレー 自己紹介
4. 4 ビジネス 　ドメイン • SEM広告 • 広告システムSRE • メディアサービス メッセージ監視 • サイバー・エージェント社内製 システム ◦ ウェブ予約システム ◦ Cisco CMX ◦ iPhone/Androidアプリ 他 自己紹介
5. みなさん UIライブラリ 何使ってますか！？
6. shadcn/ui とは
7. shadcn/uiとは 7 フレームワークやライブラリではなく、 コピペで利用できるサンプル集です。 Radix UI とTailwind CSS で構成されています。
8. shadcn/ui
9. shadcn/ui
10. UI周り デザイン周り アーキテクチャ-Headless UI + Tailwind CSS-
11. Radix UI スタイルを持たない Headless UI
12. Tailwind CSS こういうやつ <div class=”bg-sky-500 text-red-500”>
13. 13 導入対象
14. 1 • Headless UI • React Server Components 対応 • ダークモード対応 CVA 関連技術
15. 検証
16. 16 利用方法 利用方法 導入
17. 17 デザイン追加・変更はCVAで対応 使い方 <Button variants=”secondary” size=”lg” /> 利用方法
18. 18 テーマ変更
19. 19 テーマ変更 コピペでオッケー！
20. 20 初見だと、いるのこれってなる？ Radix Colors
21. 21 ライト/ダークモードのカラーパレット Radix Colors
22. 22 Gray 2 ダークモード実装に威力を発揮…！ Radix Colors
23. 23 Radix Colors Gray 2 ダークモード実装に威力を発揮…！ “dark:”を書かなくても明度を反転 Radix Colors → ダークモード実装支援
24. 24 Color System 連携 こういうのもできる ./tailwind.config.js
25. 学習という観点
26. 学ぶ上で良かった点 26 • いち早くApp Router, RSC (React Server Components) の実装例を提供 • ライブラリ選定済み＆実装サンプルの提供 ◦ Tailwind CSS の組み込み ◦ TanStack Table ◦ Radix UI のコンポーネント実装例 ◦ RSC の実装サンプル • カスタマイズの容易さ(←とは何かを学んだ） ◦ CVA でサンプル提供を意識
27. 27 つまり… 新人研修とか教育にいいかも？
28. 28 THANKS! 質問はありますか？