React Router v7（Remix 最新版）を活用し、公式チュートリアルの「アドレス帳アプリ」をベースに、実用的なアプリへと発展させる手順を解説します。 
 
本記事では、React Router（Remix）の基本的な扱い方を押さえつつ、エコシステムを活用した構築方法を学べる内容になっています。  

📌主な使用パッケージのバージョン
・react-router: 7.1.5  
・tailwindcss: 4.0.0

React Router v7 で Tutorial アプリをゼロから構築する手順解説🎉

はじめに

第1部 セットアップ

プロジェクト作成

VSCodeのデバッグ環境整備

Biome導入

vite.config.tsで環境変数を扱う設定

Vitest導入

GitHub設定ファイル追加（ワークフロー、テンプレート）

ファイルベースルーティング設定

shadcn/ui導入

Storybook導入

第2部 React Router Tutorialアプリ構築

Prisma導入

共通コンポーネント準備

サイドバー作成

インデックスページ作成

aboutページ作成（プリレンダリング）

react-call導入（確認用ダイアログ）

連絡先ページ作成（URLパラメータ）

連絡先の新規作成機能

Conform導入（バリデーション）

連絡先の編集画面作成

連絡先の削除機能

Toast導入（セッションストレージ利用）

ユーザーアクション処理にToast表示実装

読者コミュニティ｜React Router v7 で Tutorial アプリをゼロから構築する手順解説🎉

reactrouter

remix

atman