← スキル一覧に戻る
nextjs-app-router
by HoangNguyen0403
nextjs-app-routerは、other分野における実用的なスキルです。複雑な課題への対応力を強化し、業務効率と成果の質を改善します。
⭐ 111🍴 40📅 2026年1月23日
Manusで実行SKILL.md
name: Next.js App Router description: File-system routing, Layouts, and Route Groups. metadata: labels: [nextjs, routing, app-router] triggers: files: ['app//page.tsx', 'app//layout.tsx', 'app/**/loading.tsx'] keywords: [App Router, Layout, Route Group, parallel routes]
Next.js App Router
Priority: P0 (CRITICAL)
Use the App Router (app/ directory) for all new projects.
File Conventions
- page.tsx: The UI for a route.
- layout.tsx: Shared UI wrapping children. Persists across navigation.
- template.tsx: Similar to layout, but remounts on navigation.
- loading.tsx: Suspense boundary for loading states.
- error.tsx: Error boundary (Must be Client Component).
- not-found.tsx: Custom 404 UI.
- route.ts: Server-side API endpoint.
Structure Patterns
- Route Groups: Use parenthesis
(auth)to organize routes without affecting URL path.app/(auth)/login/page.tsx->/login
- Private Folders: Use underscore
_libto exclude folders from routing. - Dynamic Routes: Use brackets
[slug].app/blog/[slug]/page.tsx->/blog/abc
- Catch-all:
[...slug]matches subsequent segments.
Navigation
- Link Component: Use
<Link href="/dashboard">for prefetching. - Programmatic: Use
useRouterhook (Client Components only).router.push('/dashboard')
- Redirect: Use
redirect('/login')in Server Components.
Best Practices
- Colocation: Keep component files, styles, and tests inside the route folder.
- Layouts: Use Root Layout (
app/layout.tsx) for<html>and<body>tags.
スコア
総合スコア
85/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
✓説明文
100文字以上の説明がある
+10
✓人気
GitHub Stars 100以上
+5
✓最近の活動
3ヶ月以内に更新
+5
✓フォーク
10回以上フォークされている
+5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
✓タグ
1つ以上のタグが設定されている
+5
レビュー
💬
レビュー機能は近日公開予定です
