スキル nextjs-app-router-patterns
⚡
nextjs-app-router-patterns
安全 🌐
ネットワークアクセス⚙️
外部コマンド🔑
環境変数
Next.js App Routerパターンの適用
App Routerの機能構成と選択は難しい場合があります。このスキルは、Next.js 14以降のルーティング、データフェッチ、Server Componentsについて、明確なパターンと例を提供します。
対応: Claude Codex Code(CC)
1
スキルZIPをダウンロード
2
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
3
オンにして利用開始
テストする
「nextjs-app-router-patterns」を使用しています。 ストリーミングとキャッシュを備えた商品ページのシンプルな計画を示してください。
期待される結果:
- 最初にレンダリングされるように商品ヘッダーにserver componentを使用する
- ローディングUIとともにSuspenseでレビューと推奨事項をラップする
- 制御されたキャッシュ更新のために商品フェッチにタグベースrevalidationを適用する
セキュリティ監査
安全v4 • 1/17/2026
Pure documentation skill containing only markdown explanations and TypeScript code examples. No executable scripts, network calls, filesystem access, or external commands are implemented. All code is illustrative documentation for Next.js App Router patterns.
2
スキャンされたファイル
721
解析された行数
3
検出結果
4
総監査数
リスク要因
🌐 ネットワークアクセス (11)
⚙️ 外部コマンド (23)
SKILL.md:33-44 SKILL.md:44-48 SKILL.md:48-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-158 SKILL.md:158-162 SKILL.md:162-196 SKILL.md:196-200 SKILL.md:200-243 SKILL.md:243-245 SKILL.md:245-249 SKILL.md:249-285 SKILL.md:285-289 SKILL.md:289-352 SKILL.md:352-356 SKILL.md:356-398 SKILL.md:398-402 SKILL.md:402-445 SKILL.md:445-449 SKILL.md:449-494 SKILL.md:494-500 SKILL.md:500-522
🔑 環境変数 (2)
監査者: claude 監査履歴を表示 →
品質スコア
38
アーキテクチャ
100
保守性
81
コンテンツ
22
コミュニティ
100
セキュリティ
87
仕様準拠
作れるもの
App Routerビルドの開始
新しいNext.js 14+アプリで、レイアウト、ローディング状態、データフェッチの明確な構成を取得します。
ルーティングアーキテクチャの計画
ダッシュボードや複雑なフローのために、並列ルーティングとインタセプティングルーティングを一貫したローディングUIで設計します。
データフェッチの最適化
商品リストや詳細ページのキャッシュとrevalidation戦略を選択します。
これらのプロンプトを試す
App Routerの基礎
コアのApp Routerファイル規則と、Server ComponentsとClient Componentsをいつ使用するかについて説明してください。
Server Actionsの追加
アイテムのカートへの追加のためのrevalidationとリダイレクトを含むServer Actionsパターンを提供してください。
並列ルーティング計画
分析チームとチームパネルのためのローディング状態を含む並列ルーティング構成を提案してください。
高度なキャッシュ
タグinvalidatonを使用した商品リストと詳細ページのキャッシュとrevalidationの推奨選択を教えてください。
ベストプラクティス
- Server Componentsから始めて、必要な場合にのみclientを追加する
- データフェッチを使用するコンポーネントと併置する
- ストリーミングと明確なローディング状態を可能にするためにSuspense境界を使用する
回避
- サーバーフォールバックなしでClient Componentsで重要なデータをフェッチする
- レンダリングツリーを膨張させる過度なレイアウトのネスト
- 低速なデータソースのローディング状態をスキップする
よくある質問
Next.js 14および15と互換性がありますか
はい。Next.js 14および15と互換性のあるままのApp Routerパターンを対象としています。
このスキルの制限は何ですか
ガイダンスと例を提供しますが、コードを実行したりプロジェクトを構築したりしません。
既存のApp Routerアプリで使用できますか
はい。既存構造にパターン增量的に適用できます。
データやファイルにアクセスしますか
いいえ。ガイダンスのみを提供し、ローカルデータにはアクセスしません。
パターンと設定が矛盾する場合はどうすればよいですか
制約を共有して、パターンの調整されたバリエーションをリクエストしてください。
公式ドキュメントと比較するとどうですか
例とともにパターンを要約して整理します。公式ドキュメントが主要なリファレンスのままです。