Server Actions

🚀 はじめに：この記事でできること App Routerの基本概念から最小実装、データ取得、Server Actions/Route Handlersまでを「操作→目的→結果→注意/補足」の順で習得します。ゴールは、app/ディレクトリで最小アプリを動かし、RSCのデータ取得と更新を体験できる状態です。 🧭 前提：対応バージョンと用語の整理 App RouterはNext.js 13.4以降で本格化したルーティングです。Pages専用API（getServerSideProps等）はApp Routerでは非推奨で、RSC（React Server Components）とファイル規約が基本になります。 操作 プロジェクトのNext.jsバージョンを確認し、app/ディレクトリが利用可能かを確認する 用語を把握：layout.tsx（レイアウト）/ page.tsx（ルート）/ loading.tsx / error.tsx / route.ts（API）/ RSC / Server Actions 目的 以降の手順で使う概念・ファイル規約の前提をそろえ、混乱を防ぐ 結果（この時点でできること） App Routerの章立てと各ファイル役割を前提知識として共有できる 注意 Pages RouterのAPI（getServerSideProps等）はApp Routerでは使わない クライアントでのみ動くAPI（window等）はClient Componentに分離（"use client"を付与） 🧩 App Routerとは？（概要） App Routerはフォルダ＝URL、page.tsx＝公開ルート、layout.tsx＝共通UIという規約で、RSC前提の「サーバ優先（Server First）」な構成を提供します。 操作 役割を把握： app/layout.tsx：アプリの共通レイアウト app/page.tsx：トップページ app/**/loading.tsx：セグメント単位のローディングUI app/**/error.tsx：セグメント単位のエラーUI app/api/**/route.ts：HTTPメソッドごとのAPIハンドラ 目的 ファイル規約とRSCの前提を結び付けて理解する 結果（この時点でできること） 「どのファイルが何を担うか」を説明できる 補足 レイアウトはナビゲーションでも状態が保持されやすい設計（ページだけ差し替え）です。 🗺️ 図解：App Routerのディレクトリと流れ 最小構成の関係性を図で理解します。 操作 以下の図/ツリーで、URLとファイルの対応を確認する 目的 セグメント（フォルダ）＝URLという対応付けを視覚的に理解する 結果（この時点でできること） どの階層にpage.tsx等を置けばURLが有効化されるか判断できる 補足 layout.tsxは上位レイアウトを継承しながら子ページを差し替えます。 ...

🚀 はじめに このガイドは、最新の Next.js（App Router） を最短ルートで体験するための入門書です。プロジェクト作成 → 最小ページ → 画像最適化 → Server Actions → 環境変数の順に、再現性高く学べます。 この記事でできること App Router で新規プロジェクトを作成し、ローカル起動できる Server Components / Client Components の使い分けと Server Actions を使った最小フォーム処理が作れる 画像最適化と環境変数の基本が理解できる（チェックリストつき） こんな人におすすめ 最短で Next.js を試したい初心者〜中級者 フロント〜バックを一体で動かす体験をしたい人（API設計の前に“動く全体像”を掴みたい） 前提（迷いやすいポイントの先出し） Node.js は LTS の最新（18 以上が目安、20+ 推奨） を利用 本記事は App Router 前提（app/ ディレクトリ） コードは TypeScript 想定（*.tsx） 💡 概要：Next.js の要点（App Router で何が変わる？） App Router は React Server Components を活用し、サーバ側での描画・データ取得が標準で簡素化。ファイルベースルーティング、ネストレイアウト、ストリーミング、部分的再生成（ISR） によって、実務で必要な機能が揃います。 RSC（Server Components）：デフォルトはサーバ実行。機密値や DB アクセスを安全に扱いやすい Client Components：UI操作やブラウザ API が必要な箇所に限定して use client を付与 Server Actions：フォーム送信やデータ更新を API ルートなし で実装可能 Turbopack：開発サーバが高速。互換性課題がある場合は webpack に切替可能 🗺️ 図解：Next.js の全体像（初心者向け） Next.js でのページ表示は、サーバ側でのデータ取得と描画を軸に、クライアント側の体験を必要最小限で足す「Server First」な設計です。 下図は、RSC/SSR/SSG・ルーティング・最適化機能の関係を簡略化したものです。 ...