# Next.js App Router > File-system routing, Layouts, and Route Groups. - Skill: `ngxtm-devkit/next-js-app-router` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add ngxtm-devkit/next-js-app-router` - Raw SKILL.md: https://api.skillmd.com/api/skills/ngxtm-devkit/next-js-app-router/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: ngxtm (https://skillmd.com/u/ngxtm-devkit) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/ngxtm-devkit/next-js-app-router --- # 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 `` 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 `` and `` tags.