Claude CodeでRouterを安全に実装する

【結論】Routerを既存構成へ追加する

Router実装ではフレームワーク名だけでなく、正確なバージョン、採用済みルーター、SSR・CSR、認証、404、エラー境界、SEO要件を確認します。

Next.js App Router、React Router Data Routerなどは仕様が異なるため、既存package.jsonとディレクトリ構造を根拠にします。

認証ガードは画面リダイレクトだけでなく、サーバー側の認可を必須とします。

# ターミナルで実行：利用中のフレームワークを確認
cat package.json
# ターミナルで実行：ルート構造を確認
find app src/pages src/routes -maxdepth 3 -type f 2>/dev/null
# ターミナルで実行：Planモードで起動
claude --permission-mode plan
# ターミナルで実行：既存テストを実行
npm test -- --runInBand

具体的な手順・設定方法

1. 現在のRouter、バージョン、URL一覧、パラメータ、レイアウト、データ取得方式を整理します。

2. 追加予定ルート、認可、Loading、Error、Not Found、リンク、テストを計画します。

3. 小さな単位で実装し、直接URL、戻る操作、リロード、無効ID、未認証をテストします。

実践プロンプト / 活用テクニック

# 起動後のセッション内で入力
package.jsonと現在のルート構造を確認し、採用中のRouterを特定してください。
/dashboardと/users/:idを追加する計画を作成してください。
認証はサーバー側でも検証し、404、loading、error、無効IDのテストを含めてください。
まだファイルは変更しないでください。

注意点・よくあるエラーと対処法

将来のバージョン番号を固定して古いAPIを禁止するだけでは正しい実装になりません。

クライアントのPrivateRouteはセキュリティ境界ではありません。

動的ルートのパラメータをDBやファイルパスへ渡す前に検証してください。