> nextjs-app-router
File-system routing, Layouts, and Route Groups. Use when implementing App Router routing, nested layouts, or route groups in Next.js. (triggers: app/**/page.tsx, app/**/layout.tsx, app/**/loading.tsx, App Router, Layout, Route Group, parallel routes)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-app-router?format=md"Next.js App Router
Priority: P0 (CRITICAL)
Use the App Router (app/ directory) for all new projects.
Next.js 15+ Async APIs
[!IMPORTANT]
params,searchParams,cookies(), andheaders()are now Promises. You MUST await them.
Pages & Layouts
type Props = { params: Promise<{ slug: string }> };
export default async function Page({ params }: Props) {
const { slug } = await params;
}
Server Functions (Cookies/Headers)
import { cookies } from 'next/headers';
const cookieStore = await cookies();
const theme = cookieStore.get('theme');
File Conventions
- page.tsx: UI for a route.
- layout.tsx: Shared UI wrapping children. Persists across navigation.
- loading.tsx: Suspense boundary for loading states.
- error.tsx: Error boundary (Must be Client Component).
- route.ts: Server-side API endpoint.
Structure Patterns
- Route Groups: Use parenthesis
(auth)to organize without affecting URL path. - Private Folders: Use underscore
_libto exclude from routing. - Dynamic Routes: Use brackets
[slug]or[...slug](catch-all).
Best Practices
- RSC Boundaries: Ensure props passed to Client Components are serializable. See RSC Boundaries & Serialization.
- Parallel Routes (
@folder): Render multiple pages in the same layout. Usedefault.tsxfor fallback. - Intercepting Routes (
(..)folder): Load routes within current layout context. - Colocation: Keep component files, styles, and tests inside the route folder.
- Layouts: Use Root Layout (
app/layout.tsx) for<html>and<body>tags. - Self-Hosting Standard
🚫 Anti-Patterns
- Do NOT use standard patterns if specific project rules exist.
- Do NOT ignore error handling or edge cases.
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)