nextjs について
nextjs は、プロジェクトの規約とバージョンに合った資料に沿って Next.js の開発作業を導くスキルです。既存アプリの開発者向けに、ルーティング、データアクセス、ローカライズ、テストなどの資料をタスクに応じて案内します。
主な機能
- 01プロジェクトのアーキテクチャ規約に準拠
- 02対応バージョンの Next.js ドキュメントを参照
- 03タスクに応じた資料を選択
- 04共有 API トランスポートのパターンを使用
- 05影響範囲のアプリ動作を検証
活用シーン
- 01App Router のページを実装
- 02ルーティングやキャッシュ動作を変更
- 03ローカライズされた表示テキストを追加
- 04Next.js アプリの変更をテスト
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ ulpi-io/ skills --skill nextjsインストール後、Claude Code で/nextjsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/accessibility.mdagent-readiness.mdapi-client-pattern.mdauth.mdcaching-strategy.mdclient-async-state.mdcomponent-anatomy.mderror-handling.mdfolder-structure.mdi18n-conventions.mdlogging.mdmachine-readable.mdpage-checklist.mdrouting.mdsecurity.mdseo.mdserver-actions.mdstack.mdtesting-e2e.mdtesting-unit.mdtracking.mdupgrading.md詳細
譲れないルール:
- 最初に
references/stack.mdを読みます。 - リポジトリの
AGENTS.md、CLAUDE.md、および最も近いモジュールマップがある場合は、それらを読みます。これらには、実際のルートファミリー、ローカライズ、デザイン/テーマ、認証、トランスポート、テストの規約が定められています。 - アプリケーションの
package.json、解決済みのロックファイル、そしてパッケージ内のインストール済みバージョンに対応する Next.js ドキュメント(node_modules/next/dist/docs/以下)を読んでから、バージョン固有のガイダンスを適用します。 - ユーザーがアップグレードを明示的に依頼しない限り、インストール済みのバージョンに従います。無関係な作業中に、アップグレード、ダウングレード、リリースチャネルの切り替えを行ってはいけません。
- その後、実際のタスクに必要なリファレンスだけを読み込みます。
- ユーザーに表示されるテキストは翻訳し、バックエンドとの通信はすべてプロジェクト共通の API トランスポートを使用します。
- Next.js の詳細なガイダンスは、ここに直接記述せず
references/に置きます。
nextjs
入力
$request:Next.js のページ、コンポーネント、ルーティング、キャッシュ、またはテストに関するタスク
目標
プロジェクトの App Router 規約に沿って Next.js の作業を進め、データアクセス、メタデータ、ローカライズ、レンダリング境界について、確立されたパターンに従って実装します。
ステップ 0:スタック規約を読む
必ず最初に次を読みます。
references/stack.md
ここには、ランタイム、設定、プロジェクト全体で適用される Next.js のパターンに関する固定の決定事項が記載されています。
新しいアプリケーション、バージョンの推奨、またはフレームワークのアップグレードの場合は、次も読みます。
references/upgrading.md
成功基準:編集を始める前に、プロジェクトの Next.js アーキテクチャに関する前提が明確になっていること。
ステップ 1:関連するリファレンスだけを読み込む
ルーティング表を使って、タスクに合うリファレンスファイルを選びます。リファレンス全体をまとめて読み込んではいけません。
| タスク | 読むファイル |
|---|---|
| 新しいアプリケーション、バージョンの選択、Next.js 15 から 16 へのアップグレード | references/upgrading.md |
| フォルダー構成、ファイル規約、プロジェクト構造 | references/folder-structure.md |
| ルートグループ、動的ルート、並列ルート/インターセプトルート | references/routing.md |
| ページまたはレイアウトの作成・編集 | references/page-checklist.md |
| コンポーネント構造、クライアント/サーバーの境界 | references/component-anatomy.md |
| データ取得、API クライアント、fetch ラッパー | references/api-client-pattern.md |
| ポーリング、ページネーション、自動保存、古い非同期レスポンス | references/client-async-state.md |
| サーバーアクション、変更処理、再検証 | references/server-actions.md |
| キャッシュ、ISR、オンデマンド再検証 | references/caching-strategy.md |
| 翻訳、ロケールルーティング、メッセージファイル | references/i18n-conventions.md |
| エラーバウンダリー、error.tsx、not-found.tsx | references/error-handling.md |
| 構造化ログ、ログレベル | references/logging.md |
| アナリティクス、イベントトラッキング、同意 | references/tracking.md |
| 認証、ミドルウェア、セッション | references/auth.md |
| セキュリティヘッダー、CSP、CSRF、レート制限 | references/security.md |
| SEO、メタデータ、Open Graph、サイトマップ | references/seo.md |
| エージェント向けの公開ページ、信頼アンカー、404、llms.txt | references/agent-readiness.md |
| アクセシビリティ、ARIA、キーボード操作 | references/accessibility.md |
| ユニットテスト、コンポーネントテスト | references/testing-unit.md |
| E2E テスト、Playwright | references/testing-e2e.md |
| 機械可読な出力、JSON-LD、構造化データ | references/machine-readable.md |
複数のタスクがある場合は、複数のファイルを読みます。リファレンスはそれぞれ単独で参照できます。
成功基準:現在のコンテキストに、タスクに関連する Next.js の規約だけが含まれていること。
ステップ 2:Next.js の基本的なガードレールに沿って実装する
以下のルールを常に適用してください。
- リクエストに紐づく非同期 API は
awaitします - データアクセスにはプロジェクトの API クライアントを使い、その場限りのバックエンドへのフェッチや ORM 呼び出しは使いません
- RSC/サーバーからの呼び出しにはプロジェクトのサーバードメインモジュールを使い、承認済みのインタラクティブクライアントにはブラウザドメインモジュールを使います。どちらも共有トランスポートに集約されます
- ユーザーに表示する文字列はローカライズレイヤーを介します
- リーフコンポーネントでクライアントモードが本当に必要な場合を除き、ページとレイアウトはサーバーファーストにします
- メタデータと SEO の要件はページ作業に含めます
- 認証と認可には、検証済みのバックエンドセッションを使用します。ブラウザーで制御可能なロールやワークスペースのヘッダーは使用しません
成功基準:汎用的なフレームワークの既定値ではなく、プロジェクトの App Router アーキテクチャに沿った変更であること。
ステップ 3:影響範囲を検証する
動作を証明できるレベルで、リポジトリ独自のスクリプトを実行してください。
- lint、
next typegen、型チェック、および対象を絞ったユニット/コンポーネントテスト - HTTP ステータス、ヘッダー、生 HTML、ネゴシエーション、リダイレクト、ブラウザーの動作を確認できる、ビルド済みの本番 Next.js サーバー
- Laravel セッション、CSRF、キュー、課金、ダウンロード、Webhook、またはその他のバックエンド境界が関わる場合は、標準の統合 Compose スタック
ハンドラーを直接呼び出しても、本番環境の HTTP 動作は証明できません。Laravel をモックしたフロントエンドの実行は、フルスタックテストではありません。
成功基準:変更した Next.js の範囲が引き続き正しく動作すること。
ガードレール
- Next.js ハンドブック全体を
SKILL.mdにインラインで記述しないでください。 references/stack.mdを省略しないでください。- i18n が必要な場合、ユーザーに表示する文字列をハードコードしないでください。
- プロジェクトの API クライアントとキャッシュの規約を回避しないでください。
- 無関係な作業で、プロジェクトの認証/セッションの権限元を置き換えたり移動したりしないでください。
- プロジェクトで固定された設計契約に反して、テーマのサポートを追加または削除しないでください。
- タスクにアップグレードが含まれていない限り、古いプロジェクトに Next.js 16 専用 API を適用しないでください。
- Next.js 16.3.x をすでに宣言または解決しているプロジェクトをダウングレードしないでください。
- ユーザーがそのリリースチャネルを明示的に選択しない限り、
next@canaryなどのプレリリース版を推奨しないでください。 - これは通常のドメインスキルです。
disable-model-invocationを追加しないでください。
公開ページのタスクでは、agent-readiness.md、page-checklist.md、seo.md、machine-readable.md、testing-e2e.md も読み込んでください。該当する生 HTML、正規の識別情報、構造化データ、信頼性を示すページ、HTML/Markdown の 404、およびライブ HTTP の各チェックに合格するまで、完了とみなさないでください。外部検索エンジンやブランドの見つけやすさに関する作業は、コードの完了とは分けて報告してください。
参照資料を読み込むタイミング
-
references/stack.md常に読み込みます。 -
references/upgrading.md新規アプリケーション、バージョンの選択、フレームワークのアップグレードで読み込みます。 -
その後は、タスクに関連する
references/内のファイルのみを読み込みます。
出力要件
以下を報告してください。
- 宣言されている Next.js のバージョンと解決された Next.js のバージョン、および参照したインストール済みドキュメント
- 読み込んだ Next.js の参照資料
- 従ったリポジトリのアーキテクチャまたはプロジェクトプロファイル
- 実施した変更
- 該当する各テストレベルで実行した検証
- 残っているデプロイ、ライブエンドポイント、統合、または外部からの見つけやすさに関する作業