원클릭으로 Manus에서 모든 스킬 실행

nextjs-app-router-conventions

스타2

포크0

업데이트2026년 5월 18일 03:45

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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

yend724

yend724/agent-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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 バージョン固有の注意点

이 저장소의 다른 Skills

같은 저장소

function-programming-conventions

yend724/agent-skills

Functional programming conventions for TypeScript logic layers. Auto-triggers when writing utilities, services, domain logic, or data transformation logic to ensure pure functions, immutability, and proper side-effect isolation.

2026-05-182

react-component-conventions

yend724/agent-skills

React component design conventions focusing on Server/Client component boundaries, composition patterns, and data flow. Auto-triggers when writing or modifying React components to ensure correct RSC patterns and optimal component architecture.

2026-05-182

testing-conventions

yend724/agent-skills

Testing conventions covering unit tests, component tests, and E2E tests. Auto-triggers when writing or modifying test files. Uses Vitest for unit/component tests and Playwright for E2E tests.

2026-05-182

typescript-coding-conventions

yend724/agent-skills

General TypeScript coding conventions for type safety, exported API design, and module structure. Auto-triggers when writing or refactoring TypeScript code outside framework-specific rules.

2026-05-182

frontend-architecture

yend724/agent-skills

Feature-based frontend architecture conventions. Auto-triggers when creating new files, directories, or organizing project structure. Defines rules for feature-based code organization, module boundaries, dependency direction, and public API design.

2026-05-042

name	nextjs-app-router-conventions
description	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.

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 バージョン固有の注意点