Open2023/06/27にコメント追加1

Youtube

This Next.js Project is Awesome for Learning

この動画はモダンなWeb開発手法を学ぶために参考となるリポジトリを紹介しています。

動画で紹介されているのはsadmann7 / skateshop のリポジトリです。

以下が学習ポイント

🎨 UIコンポーネントの実装は、shadcn/uiというUIライブラリを使用しています。最近話題のshadcn/uiの利用を学ぶことができます。
🔒 認証フローは、NextAuthではなく、外部プロバイダーとしてClerkを使用して実装されています。Clerkを使った認証フローを学ぶことができます。
♻️ コンポーネントは再利用可能な構造で作られており、サーバーサイドコンポーネントとクライアントサイドコンポーネントが分離されています。どう再利用可能な形にコンポーネントを設計すべきか学べます。
📝 入力データはReact Hook FormとバリデーションスキーマのZodを使用してクライアントサイドで検証され、サーバーサイドでも再検証されます。Zodを実践例を学ぶことができます。
📦 コンポーネントのフォルダ構造は、複雑なアプリケーション向けに最適化されており、UIコンポーネントと認証関連のコンポーネントが分類されています。フォルダー構成など参考になります。