#実戦ビルド
15 件の記事
Next.jsでショップを作る #4 チェックアウトと決済シミュレーション
Server Actionsで注文を作成し、偽の決済ゲートウェイで成功/失敗をシミュレーションします。useActionStateとuseFormStatusでフォーム状態を扱う実戦パターンまで整理します。
Next.jsでショップを作る #3 カート
Client ContextとlocalStorageでカートの状態を管理します。リロードしても維持される永続カート、数量変更、合計計算、hydration安全パターンまで整理します。
Next.jsでショップを作る #2 商品カタログ
Server Componentで商品一覧と詳細ページを作り、searchParamsでカテゴリフィルタを付けます。next/image、generateStaticParams、notFoundまで一度に整理します。
Next.jsでショップを作る #1 開始と設計
Next.js App RouterでECショップを一から作ります。最初の記事は要件、技術決定、ルート構造、商品データモデル、プロジェクトのセットアップまで整理します。
Next.jsでブログを作る #4 コメント (Server Actions)
記事ごとにコメントを付けられるようにします。Server Actionsでフォーム送信と検証を処理し、useActionStateでUXを整えるパターンを実戦に適用します。
Next.jsでブログを作る #3 タグと検索
タグ別記事まとめページと、URLクエリパラメータで動作する検索機能を追加します。動的ルートの2つのパターン(generateStaticParams vs searchParams)が一度に登場します。
Next.jsでブログを作る #2 記事一覧と詳細ページ
Server Componentでfsを使ってMDXファイルを直接読み、動的ルートで本文をコンパイルして画面に描く中核の流れを作ります。
Next.jsでブログを作る #1 開始と設計
モダンReactシリーズで学んだServer ComponentsとServer Actionsを実戦プロジェクトに適用してみます。最初の記事は要件、データモデル、フォルダ構造、MDXのセットアップまで。
ReactでTodoアプリを作る #5 永続化と締めくくり
localStorageでデータを永続化してリロードしても維持されるように仕上げます。シリーズ全体を振り返りながら次のステップも案内します。
ReactでTodoアプリを作る #4 編集機能
項目をダブルクリックするとインライン編集モードに入り、Enterで保存 / Escapeでキャンセルする編集機能を作りながらuseRefも初めて使ってみます。