【最先端】Next.js15マスター講座 - ServerActions/新登場HooksをSNS開発で理解しよう -
What you'll learn
- Nextjs AppRouterで登場した新しいHooksが理解できる
- SNSを作りながらNextjsの新機能が実装できる
- useFormStatus/useFormState/useOptimisticの意味と実装方法が分かる
- ServerActionsを利用した効率的なデータフェッチが実装できる
- SNS機能の一部をServerActionsで代替できる
- Clerkを利用したユーザー認証機能が実装できる
- Clerk UIを利用して爆速で認証UIの実装ができる
- SupabaseとPrismaを用いてデータ管理やマイグレーション操作ができる
- Claude 3.5 sonnetを利用した設計や画面構築方法が分かる
- ngrokを利用して一時的にローカルサーバーを外部サーバーに設置できる
- バリデーションエラーをサーバー側のzodで処理できる
- use clientやuse serverの使い分けが理解できる
- revalidatePath()の意味や使い時が理解できる
- SNSでいいね機能やフォロー機能が実装できる
Requirements
- HTML/CSSの前提知識(div, p, h1, block, inline要素等)
- Javascript文法の前提知識(if, for文等)
- Reactの前提知識(コンポネントやJSXの理解)
Description
Next.js 15の新機能を活用し、実践的なSNSアプリケーション開発を通じて最新のWeb開発スキルを習得する講座です。useOptimistic、useFormState、Server Actionsなどの新しいHooksやフィーチャーを実際のプロジェクトに組み込み、効率的で高性能なアプリケーション開発の方法を学びます。さらに、ClerkとSupabase/Prismaを連携させた認証システムの実装まで行い、現代的なWeb開発の全体像を把握します。
■ 本コースの対象者
Next.js 13~15(AppRouter)の新機能を実践的に学びたい方
Server ActionsやuseOptimisticなどの最新のReact/Next.js機能に興味がある方
SNSアプリケーションの開発プロセスを一から学びたい方
Clerk認証システムとSupabaseの連携方法を知りたい方
フルスタックWeb開発のスキルを向上させたい方
実務で活用できる最新のWeb開発テクニックを習得したい方
■ 本コースを受講する際の注意点
HTML/CSS/JavaScriptの基本的な知識が必要です。
Reactの基礎(コンポーネント、Hooks、JSX記法など)についての理解が前提となります。
Next.jsの基本的な概念や構造について、ある程度の知識があると理解が深まります。
データベースやAPIに関する基礎知識があると、より効果的に学習を進められます。
最新のNext.js 15の機能を活用したSNS開発を通じて、現代的なWeb開発のスキルを磨きましょう。
この講座では、ChatGPTでは得られない実践的な知識と経験を丁寧かつ詳細に解説します。講座終了時には、最新のツールと技術を駆使して、効率的かつ高性能なWebアプリケーションを開発する能力が身につくでしょう。
Who this course is for:
- SNS開発を通してNextjs AppRouterやHooksを理解したい方
- 効率的なデータフェッチを学びたい方
- 実際のアプリケーション開発を通してハンズオン形式で学びたい方
- 実務でNextjsを利用することになった方
Instructor
皆さんはじめまして。Shinと申します。
休みの日はプログラミングばかり触っているちょっと変わった人です。便利なアプリや好奇心をくすぐられるようなアプリを作るのが趣味です。
動画レクチャーは分かりやすいように作成するように心がけています。
どうぞよろしくお願いします。