# Nextjs App Router Patterns

> Domina Next.js 14+ App Router con Server Components, streaming, rutas paralelas y data fetching avanzado. Úsalo al construir apps Next.js, implementar SSR/SSG u optimizar React Server Components.

Fuente: https://skillsagentes.com/skills/wshobson/agents/nextjs-app-router-patterns
Markdown: https://skillsagentes.com/skills/wshobson/agents/nextjs-app-router-patterns.md

Repositorio: https://github.com/wshobson/agents
Autor: wshobson
Licencia: MIT
Actualizado: hace 4 meses
Coste de contexto: 53 tok instalada, 929 tok al activarse, 3.4k tok con todos los archivos del bundle
Bundle: 2 archivos, 13 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent claude-code
# Cursor
npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent cursor
# Codex
npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent codex
# Gemini CLI
npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent gemini
# Windsurf
npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent windsurf
# Cline
npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent cline
```

## Qué hace

- Aplica patrones de arquitectura de Next.js 14+ App Router: Server Components, streaming, rutas paralelas e interceptadas
- Define convenciones de archivos (layout.tsx, page.tsx, loading.tsx, error.tsx, route.ts, etc.)
- Guía la elección entre rendering Server, Client, estático, dinámico y streaming
- Establece buenas prácticas de data fetching, caching y Server Actions

## Cuándo usarla

- Construir nuevas aplicaciones Next.js con App Router
- Migrar de Pages Router a App Router
- Implementar Server Components y streaming
- Configurar rutas paralelas e interceptadas u optimizar data fetching/caching

## Qué la activa

- "Ayúdame a migrar mi app de Pages Router a App Router en Next.js"
- "Cómo implemento streaming con Suspense en Next.js 14"
- "Necesito configurar rutas paralelas en mi proyecto Next.js"

## Antes de instalar

- Requiere Next.js 14+ con App Router; hay detalles adicionales en references/details.md.
- makes network requests

## Archivos

- SKILL.md — 4 KB
- references/details.md — 10 KB

## SKILL.md

Reproducido tal cual desde wshobson/agents bajo MIT. Esta sección es el documento original y está en inglés.

# 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 (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

// 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 (
    <main>
      <h1>Products</h1>
      <ProductGrid products={products} />
    </main>
  )
}
```

## 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

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [wshobson](https://skillsagentes.com/creators/wshobson.md) — 183 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Hermes Tweet](https://skillsagentes.com/skills/wshobson/agents/hermes-tweet.md): Instala y opera Hermes Tweet, un plugin de Hermes Agent para investigar X/Twitter, leer timelines, analizar tweets y ejecutar operaciones privadas o de cambio de estado con aprobación previa.
- [Superself](https://skillsagentes.com/skills/wshobson/agents/superself.md): Úsalo cuando un proyecto guarda su estado en Superself: lee `self context` al iniciar sesión, vincula el trabajo a una work unit, reporta con evidencia y registra decisiones confirmadas.
- [Grounded Vault](https://skillsagentes.com/skills/wshobson/agents/grounded-vault.md): Úsalo para mantener un almacén Markdown de conocimiento donde cada afirmación compilada se rastrea hasta una fuente inmutable y el drift se detecta con git diff sin gastar tokens.
- [Postgresql Table Design](https://skillsagentes.com/skills/wshobson/agents/postgresql-table-design.md): Úsalo al diseñar o revisar un esquema específico de PostgreSQL: buenas prácticas, tipos de datos, indexación, restricciones, patrones de rendimiento y funciones avanzadas.
- [Prompt Engineering Patterns](https://skillsagentes.com/skills/wshobson/agents/prompt-engineering-patterns.md): Úsalo cuando pidan optimizar un prompt, mejorar su rendimiento, diseñar una plantilla, aplicar chain-of-thought, few-shot prompting o técnicas avanzadas de prompt engineering para producción.

## Skills relacionadas

- [Rust Async Patterns](https://skillsagentes.com/skills/wshobson/agents/rust-async-patterns.md): Domina la programación async en Rust con Tokio, traits async, manejo de errores y patrones concurrentes; útil al construir apps async, sistemas concurrentes o depurar código async.
- [React Native Architecture](https://skillsagentes.com/skills/wshobson/agents/react-native-architecture.md): Crea apps React Native listas para producción con Expo, navegación, módulos nativos, sincronización offline y patrones multiplataforma.
- [Python Type Safety](https://skillsagentes.com/skills/wshobson/agents/python-type-safety.md): Seguridad de tipos en Python con anotaciones, genéricos, protocolos y verificación estricta con mypy/pyright.
- [Python Resource Management](https://skillsagentes.com/skills/wshobson/agents/python-resource-management.md): Gestión de recursos en Python con context managers, patrones de limpieza y streaming: conexiones, manejadores de archivos y lógica de cleanup con estado acumulado.
- [Python Configuration](https://skillsagentes.com/skills/wshobson/agents/python-configuration.md): Gestión de configuración en Python mediante variables de entorno y settings tipados. Útil al externalizar config, configurar pydantic-settings, gestionar secretos o implementar comportamiento por entorno.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)