# Nextjs App Router Patterns

> Architect and implement modern Next.js App Router applications with Server Components (RSC), Server Actions, Parallel/Intercepting Routes, and Streaming SSR.

- Skill: `pedroiff0/nextjs-app-router-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pedroiff0/nextjs-app-router-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pedroiff0/nextjs-app-router-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: pedroiff0 (https://skillmd.com/u/pedroiff0)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/pedroiff0/nextjs-app-router-patterns

---


# Next.js App Router Architecture & Patterns

Best practices for structuring modern full-stack web applications using React Server Components and Next.js App Router.

## Key Principles

1. **Default to Server Components**: Keep data fetching on the server; only mark components with client directive when browser APIs, event listeners, or hooks are needed.
2. **Colocation of Route Segments**: Structure routes using folder hierarchies with `page.tsx`, `layout.tsx`, `loading.tsx`, and `error.tsx`.
3. **Mutations via Server Actions**: Use server action functions for forms and state mutations with `revalidatePath` and `revalidateTag`.