File-system routing, Layouts, and Route Groups.
Scanned 9/8/2026
Install to Claude Code
Skills Directorynpx -y skills add ngxtm/devkit --skill app-router --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of App Router?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/ngxtm-app-router)More formats (shields.io, HTML) on the badges page.
---
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 `_lib` to 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 `useRouter` hook (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.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
