環境構築から、ルーティングとレイアウト・Server Components・データ取得・Server Actions・Prisma・認証・キャッシュ、そして本番デプロイまで。全20レッスンで 1 つのレシピ投稿アプリを最初から最後まで作りきります。コードとコマンドの出力は、すべて Next.js 16.3.1 で実際に動かしたものです。
全20レッスンを5つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 ※ Next.js はブラウザ内で実行できないため、第1回で作るプロジェクトで試してください。
React との違いを押さえてプロジェクトを作り、フォルダを足してページを増やし、サーバーとクライアントの境界を引けるようにします。この章を終えると、App Router のファイル構成を自分で組み立てられます。
動的な URL・データ取得・ローディング・エラー処理という、ページを 1 枚仕上げるのに必要な部品をそろえます。最後は、例外が出てもアプリ全体が落ちない状態まで進みます。
Tailwind CSS v4 で見た目を整え、画像とフォントを最適化し、メタデータと OGP 画像を用意します。検索結果と SNS での見え方まで自分で制御できるようになります。
Server Actions でフォームを受け取り、Zod で検証し、Prisma でデータベースに保存します。最後に編集と削除を足して、作成・編集・削除がひととおり動く状態にします。
API・検索・認証・キャッシュという実用機能を足し、テストと型チェックで壊れていないことを確かめます。最後は Vercel に公開して、自分の URL でアプリを動かします。
全20レッスンを終えたら、次は型でアプリを守る TypeScript へ。メンバーシップで全コースが解放されます。