Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 19.1 — Server Action com Revalidação de Caminho (revalidatePath)

Contexto: Server Action com Revalidação de Caminho (revalidatePath) no contexto de Server Actions, Caching Estratégico e SEO no Next.js.

Requisitos de Execução:

  1. Criar Server Action que insira novo produto no banco e execute revalidatePath('/produtos') para atualizar o cache estático.

Resultado Esperado

Cache da página estática revalidado sob demanda.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_1_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Server Actions, Caching Estratégico e SEO no Next.js
🔑 Gabarito de Código & Solução Comentada 
// app/actions/produtoActions.ts
'use server';

import { revalidatePath } from 'next/cache';

export async function criarProdutoAction(formData: FormData) {
  const nome = formData.get('nome') as string;
  // Persistência no banco
  revalidatePath('/produtos');
}

🔍 Nível 2: Prática

Problema 19.2 — Revalidação Baseada em Tags com revalidateTag()

Contexto: Revalidação Baseada em Tags com revalidateTag() no contexto de Server Actions, Caching Estratégico e SEO no Next.js.

Requisitos de Execução:

  1. Configurar fetch com tag fetch(url, { next: { tags: ['catalogo'] } }) e invalidar via revalidateTag('catalogo').

Resultado Esperado

Cache granular invalidado seletivamente por tag sem reconstruir a aplicação.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_2_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Server Actions, Caching Estratégico e SEO no Next.js
🔑 Gabarito de Código & Solução Comentada 
// revalidateTagDemo.ts
'use server';
import { revalidateTag } from 'next/cache';

export async function atualizarEstoqueAction() {
  revalidateTag('catalogo');
}

⚡ Nível 3: Integração

Problema 19.3 — Configuração Dinâmica de Metadados de SEO com generateMetadata()

Contexto: Configuração Dinâmica de Metadados de SEO com generateMetadata() no contexto de Server Actions, Caching Estratégico e SEO no Next.js.

Requisitos de Execução:

  1. Gerar tags OpenGraph e Twitter Cards dinamicamente a partir dos dados do produto com generateMetadata().

Resultado Esperado

Metadados de SEO ricos gerados para compartilhamento em redes sociais.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_3_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Server Actions, Caching Estratégico e SEO no Next.js
🔑 Gabarito de Código & Solução Comentada 
// app/produtos/[id]/page.tsx (SEO)
import { Metadata } from 'next';

export async function generateMetadata({ params }: any): Promise<Metadata> {
  return {
    title: `Produto ${params.id} | Loja Oficial`,
    description: 'Compre com o melhor preço e entrega rápida.',
    openGraph: { images: ['/og-produto.jpg'] },
  };
}

🏆 Nível 4: Desafio Corporativo

Problema 19.4 — Rotas de API Route Handlers (route.ts) e Proteção de Endpoints

Contexto: Rotas de API Route Handlers (route.ts) e Proteção de Endpoints no contexto de Server Actions, Caching Estratégico e SEO no Next.js.

Requisitos de Execução:

  1. Criar endpoint /api/webhook manipulando requisições POST com validação de assinatura HMAC no header.

Resultado Esperado

Webhook processado com verificação criptográfica de segurança.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_4_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Server Actions, Caching Estratégico e SEO no Next.js
🔑 Gabarito de Código & Solução Comentada 
// app/api/webhook/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const sig = req.headers.get('x-webhook-signature');
  if (sig !== 'assinatura_valida') {
    return NextResponse.json({ error: 'Não autorizado' }, { status: 401 });
  }
  return NextResponse.json({ received: true });
}