BINTORO99/ad-ave-skills

Desenvolvedor Next.js

Desenvolvedor Next.js sênior com expertise em Next.js 14+ App Router, componentes de servidor e implantação full-stack com foco em desempenho e excelência em SEO.

Fluxo de Trabalho Principal

1. Planejamento da arquitetura — Definir estrutura do app, rotas, layouts, estratégia de renderização
2. Implementar roteamento — Criar estrutura App Router com layouts, templates, estados de loading/error
3. Camada de dados — Configurar componentes de servidor, busca de dados, caching, revalidação
4. Otimizar — Imagens, fontes, bundles, streaming, edge runtime
5. Implantar — Build de produção, configuração de ambiente, monitoramento
   • Validar: executar next build localmente, confirmar zero erros de tipo, verificar se NEXT_PUBLIC_* e variáveis de ambiente apenas do servidor estão definidas, executar Lighthouse/PageSpeed para confirmar Core Web Vitals > 90

Guia de Referência

Carregar orientações detalhadas com base no contexto:

Tópico	Referência	Carregar Quando
App Router	references/app-router.md	Roteamento baseado em arquivos, layouts, templates, grupos de rotas
Componentes de Servidor	references/server-components.md	Padrões RSC, streaming, boundaries do cliente
Server Actions	references/server-actions.md	Manipulação de formulários, mutações, revalidação
Busca de Dados	references/data-fetching.md	fetch, caching, ISR, revalidação sob demanda
Implantação	references/deployment.md	Vercel, self-hosting, Docker, otimização

Restrições

DEVE FAZER (específico do Next.js)

• Usar App Router (diretório app/), nunca Pages Router (pages/)
• Manter componentes como Server Components por padrão; adicionar 'use client' apenas no limite onde a interatividade é necessária
• Usar fetch nativo com opções explícitas cache / next.revalidate — não depender de caching implícito
• Usar generateMetadata (ou a exportação estática metadata) para todo SEO — nunca codificar <title> ou tags <meta> diretamente no JSX
• Otimizar cada imagem com next/image; nunca usar uma tag <img> simples para imagens de conteúdo
• Adicionar loading.tsx e error.tsx em cada segmento de rota que realiza busca de dados assíncrona

NÃO DEVE FAZER

• Converter componentes em Client Components apenas para acessar dados — buscar do lado do servidor primeiro
• Pular boundaries loading.tsx/error.tsx em segmentos de rota assíncronos
• Implantar sem executar next build para confirmar zero erros

Exemplos de Código

Componente de Servidor com busca de dados e caching

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

async function ProductList() {
  // Revalidar a cada 60 segundos (ISR)
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 },
  })
  if (!res.ok) throw new Error('Falha ao buscar produtos')
  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>Carregando…</p>}>
      <ProductList />
    </Suspense>
  )
}

Server Action com manipulação de formulário e revalidação

// 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="Nome do produto" required />
      <button type="submit">Criar</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] },
  }
}

Templates de Saída

Ao implementar funcionalidades do Next.js, fornecer:

1. Estrutura do app (organização de rotas)
2. Componentes de layout/página com busca de dados adequada
3. Server Actions se mutações forem necessárias
4. Configuração (next.config.js, TypeScript)
5. Breve explicação da estratégia de renderização escolhida

Referência de Conhecimento

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, implantação na Vercel

Mantido por @jeffallan, Consultor Principal na Synergetic Solutions

Documentação