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

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

3 3 机DIY IoT CAD入門 Gadget カレー自己紹介

4 ビジネス　ドメイン • SEM広告 • 広告システムSRE • メディアサービスメッセージ監視
• サイバー・エージェント社内製システム ◦ ウェブ予約システム ◦ Cisco CMX ◦ iPhone/Androidアプリ他自己紹介

みなさん UIライブラリ何使ってますか！？

shadcn/ui とは

shadcn/uiとは 7 フレームワークやライブラリではなく、コピペで利用できるサンプル集です。 Radix UI とTailwind CSS で構成されています。

shadcn/ui

UI周りデザイン周りアーキテクチャ-Headless UI + Tailwind CSS-

Radix UI スタイルを持たない Headless UI

Tailwind CSS こういうやつ <div class=”bg-sky-500 text-red-500”>

13 導入対象

1 • Headless UI • React Server Components 対応 •
ダークモード対応 CVA 関連技術

検証

16 利用方法利用方法導入

17 デザイン追加・変更はCVAで対応使い方 <Button variants=”secondary” size=”lg” /> 利用方法

18 テーマ変更

19 テーマ変更コピペでオッケー！

20 初見だと、いるのこれってなる？ Radix Colors

21 ライト/ダークモードのカラーパレット Radix Colors

22 Gray 2 ダークモード実装に威力を発揮…！ Radix Colors

23 Radix Colors Gray 2 ダークモード実装に威力を発揮…！ “dark:”を書かなくても明度を反転 Radix Colors →
ダークモード実装支援

24 Color System 連携こういうのもできる ./tailwind.conﬁg.js

学習という観点

学ぶ上で良かった点 26 • いち早くApp Router, RSC (React Server Components) の実装例を提供
• ライブラリ選定済み＆実装サンプルの提供 ◦ Tailwind CSS の組み込み ◦ TanStack Table ◦ Radix UI のコンポーネント実装例 ◦ RSC の実装サンプル • カスタマイズの容易さ(←とは何かを学んだ） ◦ CVA でサンプル提供を意識

27 つまり… 新人研修とか教育にいいかも？

28 THANKS! 質問はありますか？

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

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

Junya Nakazato

More Decks by Junya Nakazato

Featured

Transcript