---
name: patrones-app-router-nextjs
description: Guia de referencia completa sobre la arquitectura App Router de Next.js 14+: Server Components, streaming, rutas paralelas y fetching de datos avanzado. Imprescindible para construir aplicaciones React full-stack modernas con SSR, SSG e ISR.
license: MIT
metadata:
id: 0327ce9f
slug: patrones-app-router-nextjs
titulo: "Patrones App Router Next.js 14+"
servicio: Web
categoria_recurso: Web-Desarrollo
tipo: referencia
nivel: intermedio
idioma: es
idioma_original: en
acceso: gratis
precio_eur: 0
plataformas: [Next.js, React, TypeScript, Vercel]
dependencias: [next, react, typescript]
licencia: { spdx: MIT, redistribuible: true, uso_comercial: true }
fuente:
repo: wshobson/agents
url: https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns
commit: cc37bfd
autor: wshobson
nombre_original: nextjs-app-router-patterns
duplicados_en: []
seguridad: { veredicto: seguro, riesgo: bajo, escaneado: "2026-06-14", motor: "grep-estatico+auditor-llm" }
ficha:
que_hace: "Documenta los patrones clave del App Router de Next.js 14+ para construir aplicaciones web modernas con Server Components, streaming y Server Actions."
como_lo_hace: "Proporciona tablas de referencia, convenciones de archivos, ejemplos de codigo TypeScript y buenas practicas para cada modo de renderizado (Server, Client, Static, Dynamic, Streaming)."
content_hash: "0327ce9f9c75d3bc4e3f99da86b6dad0bd76e820fd024ab24a5a09e8b5f3faf5"
version: 1.0.0
---
# Next.js App Router Patterns
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
## When to Use This Skill
- Building new Next.js applications with App Router
- Migrating from Pages Router to App Router
- Implementing Server Components and streaming
- Setting up parallel and intercepting routes
- Optimizing data fetching and caching
- Building full-stack features with Server Actions
## Core Concepts
### 1. Rendering Modes
| Mode | Where | When to Use |
| --------------------- | ------------ | ----------------------------------------- |
| **Server Components** | Server only | Data fetching, heavy computation, secrets |
| **Client Components** | Browser | Interactivity, hooks, browser APIs |
| **Static** | Build time | Content that rarely changes |
| **Dynamic** | Request time | Personalized or real-time data |
| **Streaming** | Progressive | Large pages, slow data sources |
### 2. File Conventions
```
app/
├── layout.tsx # Shared UI wrapper
├── page.tsx # Route UI
├── loading.tsx # Loading UI (Suspense)
├── error.tsx # Error boundary
├── not-found.tsx # 404 UI
├── route.ts # API endpoint
├── template.tsx # Re-mounted layout
├── default.tsx # Parallel route fallback
└── opengraph-image.tsx # OG image generation
```
## Quick Start
```typescript
// app/layout.tsx
import { Inter } from 'next/font/google'
import { Providers } from './providers'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: { default: 'My App', template: '%s | My App' },
description: 'Built with Next.js App Router',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
// app/page.tsx - Server Component by default
async function getProducts() {
const res = await fetch('https://api.example.com/products', {
next: { revalidate: 3600 }, // ISR: revalidate every hour
})
return res.json()
}
export default async function HomePage() {
const products = await getProducts()
return (
Products
)
}
```
## Detailed patterns and worked examples
Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.
## Best Practices
### Do's
- **Start with Server Components** - Add 'use client' only when needed
- **Colocate data fetching** - Fetch data where it's used
- **Use Suspense boundaries** - Enable streaming for slow data
- **Leverage parallel routes** - Independent loading states
- **Use Server Actions** - For mutations with progressive enhancement
### Don'ts
- **Don't pass serializable data** - Server → Client boundary limitations
- **Don't use hooks in Server Components** - No useState, useEffect
- **Don't fetch in Client Components** - Use Server Components or React Query
- **Don't over-nest layouts** - Each layout adds to the component tree
- **Don't ignore loading states** - Always provide loading.tsx or Suspense