home/categories/full-stack/daishiman-aiworkfloworchestrator-docs-99-claude-skills-nextjs-app-router-skill-md
full-stackdevelopment

nextjs-app-router

Next.js App Routerのアーキテクチャと実装パターンを専門とするスキル。 ディレクトリベースルーティング、Server/Client Components分離、レンダリング戦略選択を支援。 Anchors: • Guillermo Rauch "Server-First" / 適用: コンポーネント配置判断 / 目的: デフォルトサーバー・例外クライアントの徹底 • Learning React (Banks, Porcello) / 適用: コンポーネント設計 / 目的: 再利用性と単一責任の原則適用 • Next.js公式ドキュメント / 適用: 特殊ファイル規約・レンダリング戦略 / 目的: フレームワーク規約準拠 Trigger: Use when designing Next.js routing structures, implementing app directory patterns, deciding Server vs Client Components, choosing rendering strategies (SSG, ISR, Dynamic), or structuring layouts and route groups. Keywords: app router, server components, client components, dynamic routes, route groups, parallel routes, intercepting routes, layout, template, loading, error

daishiman
maintainer
daishiman
업데이트됨 1/18/2026
스타
4
포크
0
quick start

Installation and usage

Next.js App Routerのアーキテクチャと実装パターンを専門とするスキル。 ディレクトリベースルーティング、Server/Client Components分離、レンダリング戦略選択を支援。 Anchors: • Guillermo Rauch "Server-First" / 適用: コンポーネント配置判断 / 目的: デフォルトサーバー・例外クライアントの徹底 • Learning React (Banks, Porcello) / 適用: コンポーネント設計 / 目的: 再利用性と単一責任の原則適用 • Next.js公式ドキュメント / 適用: 特殊ファイル規約・レンダリング戦略 / 目的: フレームワーク規約準拠 Trigger: Use when designing Next.js routing structures, implementing app directory patterns, deciding Server vs Client Components, choosing rendering strategies (SSG, ISR, Dynamic), or structuring layouts and route groups. Keywords: app router, server components, client components, dynamic routes, route groups, parallel routes, intercepting routes, layout, template, loading, error

설치
$ install --globalskills.sh
사용법

설치 후 터미널에서 다음 명령을 실행하여 이 스킬을 사용할 수 있습니다:

skills use nextjs-app-router