Nextjs app router conventions
Skill yend724/agent-skills/skills/nextjs-app-router-conventions
Next.js App Router conventions covering file-based routing, caching strategies, Server Actions, Metadata API, and framework-specific patterns. Auto-triggers when working within Next.js App Router projects (app/ directory, next.config, route handlers). Covers file-based routing, caching, Server Actions, Metadata API, and framework-specific patterns.From its SKILL.md
npx -y skills add yend724/agent-skills --skill nextjs-app-router-conventionsAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
4.4 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it
Next.js App Router Conventions
Next.js App Router のフレームワーク固有規約集。ファイルベースルーティング、キャッシュ戦略、Server Actions、Metadata API に関するルールを定義する。
When to Apply
以下の作業時に自動で参照する:
- ページ・レイアウトの作成
- Server Actions の実装
- Route Handler の作成
- キャッシュ戦略の設計
- Metadata / OGP の設定
- Proxy の実装
Compatibility
Next.js 16+
Rule Categories
| Category | Prefix |
|---|---|
| ファイル規約 | file- |
| Server Actions | actions- |
| キャッシュ戦略 | cache- |
| Metadata / SEO | metadata- |
| ルーティングパターン | routing- |
| Proxy | proxy- |
Quick Reference
ファイル規約
- file-layout-no-rerender - layout.tsx は再レンダリングされない前提で設計する
- file-loading-per-segment - 各ルートセグメントに適切な loading.tsx を配置する
- file-error-recovery - error.tsx でリカバリ可能なUIを提供する
- file-not-found-custom - not-found.tsx でユーザーフレンドリーな404を作る
- file-template-vs-layout - 再マウントが必要な場合は template.tsx を使う
- file-server-only-guard - サーバー専用モジュールには import "server-only" を付ける
Server Actions
- actions-validation - Server Action の入力は必ずサーバー側でバリデーションする
- actions-auth-check - Server Action 内で認証・認可チェックを行う
- actions-revalidate - データ変更後は適切な revalidation を実行する
- actions-error-handling - Server Action のエラーはクライアントに安全に返す
- actions-progressive-enhancement - JavaScript 無効でもフォームが動作するようにする
キャッシュ戦略
- cache-understand-layers - 4つのキャッシュレイヤーを理解して設計する
- cache-avoid-unnecessary-loading - ナビゲーション時に不要なローディングを出さない
Metadata / SEO
- metadata-generate-dynamic - 動的ページでは generateMetadata を使う
- metadata-opengraph-image - OGP画像は opengraph-image.tsx で動的生成する
- metadata-canonical-url - canonical URL を明示的に設定する
データ取得
- fetching-no-route-handler-hop - Server Component から自分自身の Route Handler を呼ばない
ルーティングパターン
- routing-group-by-feature - Route Groups で機能単位にグルーピングする
- routing-catch-all-carefully - catch-all routes の優先順位に注意する
Proxy
- proxy-lightweight - Proxy は軽量に保つ(重い処理を入れない)
- proxy-matcher - matcher で対象パスを限定する
- proxy-no-db - Proxy 内でDBアクセスしない
How to Use
個別ルールの詳細は rules/ ディレクトリ内のファイルを参照。上記 Quick Reference のリンクから各ルールにアクセスできる。
各ルールファイルには以下が含まれる:
- ルールの説明と根拠
- Bad: 間違ったコード例
- Good: 正しいコード例
- Next.js バージョン固有の注意点
What ships with it: 22 files
47.7 KB alongside SKILL.md
rules/
- actions-auth-check.md1.6 KB
- actions-error-handling.md2.4 KB
- actions-progressive-enhancement.md2.4 KB
- actions-revalidate.md2.6 KB
- actions-validation.md2.2 KB
- cache-avoid-unnecessary-loading.md2.1 KB
- cache-understand-layers.md3.0 KB
- fetching-no-route-handler-hop.md2.0 KB
- file-error-recovery.md1.8 KB
- file-layout-no-rerender.md1.9 KB
- file-loading-per-segment.md2.1 KB
- file-not-found-custom.md2.0 KB
- file-server-only-guard.md1.8 KB
- file-template-vs-layout.md1.8 KB
- metadata-canonical-url.md2.0 KB
- metadata-generate-dynamic.md2.1 KB
- metadata-opengraph-image.md2.2 KB
- proxy-lightweight.md2.4 KB
- proxy-matcher.md2.5 KB
- proxy-no-db.md2.7 KB
- routing-catch-all-carefully.md2.4 KB
- routing-group-by-feature.md1.7 KB