nextjs-pathname-id-fetch
✓Next.js の URL パラメーターを使用してデータを取得するための焦点を当てたパターン。動的ルート ([id]、[slug]) の作成と、サーバー コンポーネントのルート パラメーターにアクセスして API からデータをフェッチする方法について説明します。 URL パラメーターに基づいて個々のアイテム (製品ページ、ブログ投稿、ユーザー プロフィール) を表示するページを構築する場合に使用します。 nextjs-dynamic-routes-params を簡素化された一般的なパターンで補完します。
SKILL.md
Use this pattern whenever a page needs to load data based on whatever identifier appears in the URL. Common scenarios include:
If the requirement says the data should change depending on the current URL path, the route segment must be dynamic (e.g., [id], [slug], [...slug]).
Unless requirements explicitly call for /products/[id], keep the structure at the top level (app/[id]/page.tsx).
Next.js の URL パラメーターを使用してデータを取得するための焦点を当てたパターン。動的ルート ([id]、[slug]) の作成と、サーバー コンポーネントのルート パラメーターにアクセスして API からデータをフェッチする方法について説明します。 URL パラメーターに基づいて個々のアイテム (製品ページ、ブログ投稿、ユーザー プロフィール) を表示するページを構築する場合に使用します。 nextjs-dynamic-routes-params を簡素化された一般的なパターンで補完します。 ソース: wsimmonds/claude-nextjs-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/wsimmonds/claude-nextjs-skills --skill nextjs-pathname-id-fetch- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
nextjs-pathname-id-fetch とは？
Next.js の URL パラメーターを使用してデータを取得するための焦点を当てたパターン。動的ルート ([id]、[slug]) の作成と、サーバー コンポーネントのルート パラメーターにアクセスして API からデータをフェッチする方法について説明します。 URL パラメーターに基づいて個々のアイテム (製品ページ、ブログ投稿、ユーザー プロフィール) を表示するページを構築する場合に使用します。 nextjs-dynamic-routes-params を簡素化された一般的なパターンで補完します。 ソース: wsimmonds/claude-nextjs-skills。
nextjs-pathname-id-fetch のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/wsimmonds/claude-nextjs-skills --skill nextjs-pathname-id-fetch インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/wsimmonds/claude-nextjs-skills