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.
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
53 tok en reposo
13 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent claude-codeSe instala solo en este repositorio.
Este skill makes network requests.
Di cualquiera de estas frases y el agente debería cargar este skill.
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
| 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 |
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
// 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 pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Reproducido de wshobson/agents bajo licencia MIT. Leer esta página en markdown.
2 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Requiere Next.js 14+ con App Router; hay detalles adicionales en references/details.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.
Crea apps React Native listas para producción con Expo, navegación, módulos nativos, sincronización offline y patrones multiplataforma.
Seguridad de tipos en Python con anotaciones, genéricos, protocolos y verificación estricta con mypy/pyright.
