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 Link from next/link instead of <a> tags
Last verified: 2025-01-11

Score

Total Score

40/100

Based on repository quality metrics

✓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

Reviews

💬

Reviews coming soon