NextjsとSupabaseによる高性能Web開発

🚀 Next.jsとSupabaseによる高性能Web開発 📚

尋ねるべき質問：

• あなたは、最新のReact 18とNext.jsを組み合わせて、Webアプリケーションを構築することができますか？
• Next.jsのSSG(静的サイト生成)、CSF(クライアント側サーバーフェッチ), およびOn-demand ISR（Incremental Static Regeneration）の概念を理解し、実際のプロジェクトで適用することができますか？
• Web Vitals（TTFB, FCP, LCP）についてどれほど知識を持っていますか？
• Supabaseとの連携を通じて、認証やCRUD操作を実装する能力がありますか？
• React-queryとZustandを使用して、データやクライアント状態の管理に熟知ですか？

🌟 このコースでは...

1. プロジェクト1: Todo App 📑

   • SSG+CSFを利用して、Dynamicデータ更新を実装します。
   • Web Vitals（TTFB, FCP, LCP）の概念を理解し、SSG、SSR、SSG+CSFとそれらの比較計測方法を学びます。

2. プロジェクト2: Note App 📝

   • On-demand ISRを活用して高速配信と準Dynamicデータ更新を実現します。
   • Next.jsの全ページkind（SSE, SSG, SSR、Client Side Hydrationなど）について理解を深めます。

🛠️ 使用するTech Stack 🧵

• Next.js
• Supabase
• React-query (サーバーデータ管理のため)
• Zustand (クライアント状態管理のため)
• TypeScript
• Tailwind CSS

🎓 学習テーマ 📚

• Supabaseの基本操作（Table作成、RLS、リレーション、CASCADE Deleteなど）
• Next.jsとSupabaseの連携（認証、CRUD操作）
• React-queryとZustandによる状態管理
• Web Vitals（TTFB, FCP, LCP）の理解とSSG、SSR、SSG+CSFとの関係性の測定
• Next.jsの全ページ種類の理解
• On-demand ISRの実装（api/route、Supabase Function Hooks）
• Next.js link prefetchの挙動理解
• 静的配信初回アクセス遅延とEdge CDN（X-Vercel-Cache）の理解
• ISR更新時のEdge Networkの理解
• Vercel serverless function regionの影響によるSSRレスポンスへの影響（TTFB, LCP）
• Vercel Edge Networkの紫外線（UV）、白光（VIS）、インFRAレッド（IR）の層とどのように機能するか
• Middlewareの簡単なdemo（A/B test）
• Edge API routes（ε）とAPI routes（λ）の応答速度の違い

🔗 VercelとSupabaseの連携 🤝

• サーバーレス関数、Edge CDN、およびMiddlewareを活用して、高性能でユーザーフレンドリーなWebアプリケーションを構築することができます。

📈 今すぐ学び始める!

• 最新のWeb開発技術を使って、実践的なスキルを身につけましょう。
• プロジェクトベースの学習で、理論と実践の両方を鍛える機会を見つけます。
• 今、コースに加入して、あなたのWeb開発能力を次のレベルへと押上させましょう！