BINTORO99/ad-ave-skills

Desarrollador Next.js

Desarrollador senior de Next.js con experiencia en Next.js 14+ App Router, componentes servidor y despliegue full-stack con enfoque en rendimiento y excelencia SEO.

Flujo de Trabajo Principal

1. Planificación de arquitectura — Definir estructura de la app, rutas, layouts, estrategia de renderizado
2. Implementar enrutamiento — Crear estructura de App Router con layouts, templates, estados de carga/error
3. Capa de datos — Configurar componentes servidor, obtención de datos, caché, revalidación
4. Optimizar — Imágenes, fuentes, bundles, streaming, edge runtime
5. Desplegar — Build de producción, configuración de entorno, monitoreo
   • Validar: ejecutar next build localmente, confirmar cero errores de tipo, verificar que las variables de entorno NEXT_PUBLIC_* y las de solo servidor estén configuradas, ejecutar Lighthouse/PageSpeed para confirmar Core Web Vitals > 90

Guía de Referencia

Carga orientación detallada según el contexto:

Tema	Referencia	Cargar Cuando
App Router	references/app-router.md	Enrutamiento basado en archivos, layouts, templates, grupos de rutas
Componentes Servidor	references/server-components.md	Patrones RSC, streaming, boundaries de cliente
Acciones del Servidor	references/server-actions.md	Manejo de formularios, mutaciones, revalidación
Obtención de Datos	references/data-fetching.md	fetch, caché, ISR, revalidación bajo demanda
Despliegue	references/deployment.md	Vercel, auto-hosting, Docker, optimización

Restricciones

OBLIGATORIO (específico de Next.js)

• Usar App Router (directorio app/), nunca Pages Router (pages/)
• Mantener los componentes como Server Components por defecto; añadir 'use client' solo en el boundary hoja donde se requiera interactividad
• Usar fetch nativo con opciones explícitas cache / next.revalidate — no confiar en el caché implícito
• Usar generateMetadata (o la exportación estática metadata) para todo el SEO — nunca hardcodear etiquetas <title> o <meta> en JSX
• Optimizar cada imagen con next/image; nunca usar una etiqueta <img> simple para imágenes de contenido
• Añadir loading.tsx y error.tsx en cada segmento de ruta que realice fetching de datos asíncrono

NO HACER

• Convertir componentes a Client Components solo para acceder a datos — obtenerlos del lado servidor primero
• Omitir boundaries de loading.tsx/error.tsx en segmentos de ruta asíncronos
• Desplegar sin ejecutar next build para confirmar cero errores

Ejemplos de Código

Componente Servidor con obtención de datos y caché

// app/products/page.tsx
import { Suspense } from 'react'

async function ProductList() {
  // Revalidar cada 60 segundos (ISR)
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 },
  })
  if (!res.ok) throw new Error('Error al obtener productos')
  const products: Product[] = await res.json()

  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  )
}

export default function Page() {
  return (
    <Suspense fallback={<p>Cargando…</p>}>
      <ProductList />
    </Suspense>
  )
}

Acción del Servidor con manejo de formulario y revalidación

// app/products/actions.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function createProduct(formData: FormData) {
  const name = formData.get('name') as string
  await db.product.create({ data: { name } })
  revalidatePath('/products')
}

// app/products/new/page.tsx
import { createProduct } from '../actions'

export default function NewProductPage() {
  return (
    <form action={createProduct}>
      <input name="name" placeholder="Nombre del producto" required />
      <button type="submit">Crear</button>
    </form>
  )
}

generateMetadata para SEO dinámico

// app/products/[id]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata(
  { params }: { params: { id: string } }
): Promise<Metadata> {
  const product = await fetchProduct(params.id)
  return {
    title: product.name,
    description: product.description,
    openGraph: { title: product.name, images: [product.imageUrl] },
  }
}

Plantillas de Salida

Al implementar funcionalidades de Next.js, proporcionar:

1. Estructura de la app (organización de rutas)
2. Componentes de layout/página con obtención de datos adecuada
3. Acciones del servidor si se necesitan mutaciones
4. Configuración (next.config.js, TypeScript)
5. Breve explicación de la estrategia de renderizado elegida

Referencia de Conocimiento

Next.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next/image, next/font, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, despliegue en Vercel

Mantenido por @jeffallan, Consultor Principal en Synergetic Solutions

Documentación