← スキル一覧に戻る
nextjs-app-router-fundamentals
by kensleDev
⭐ 0🍴 0📅 2026年1月16日
Manusで実行SKILL.md
name: nextjs-app-router-fundamentals
IMPORTANT: Keep description on ONE line for Claude Code compatibility
prettier-ignore
description: Next.js App Router (13+). Migrating from Pages, file conventions (layout, page, loading, error), routing patterns, metadata, generateStaticParams. allowed-tools: Read, Write, Edit, Glob, Grep, Bash
Next.js App Router Fundamentals
Quick Start
Files: layout.tsx (required), page.tsx (route), loading.tsx, error.tsx,
not-found.tsx, route.ts (API)
Pages → App: pages/index.tsx → app/page.tsx, pages/[id].tsx →
app/[id]/page.tsx
// app/layout.tsx (REQUIRED)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html lang="en"><body>{children}</body></html>;
}
// app/page.tsx
export default function Page() {
return <h1>Home</h1>;
}
// Metadata
export const metadata = { title: 'My Page' };
Reference Files
- migration-guide.md - Pages Router to App Router migration steps and pitfalls
- file-conventions.md - layout, page, loading, error, not-found, template, route files
- routing-patterns.md - Dynamic routes, catch-all, route groups, parallel/intercepting routes
- metadata-handling.md - Static and dynamic metadata API
- generate-static-params.md - SSG with generateStaticParams
Notes
- Root layout MUST include
<html>and<body>tags - Use
Linkfromnext/linkinstead of<a>tags - Last verified: 2025-01-11
スコア
総合スコア
40/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です