2b:["$","div","1",{"className":"grid gap-4 mb-8","children":[["$","div","0",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":1}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 1 - Defina os tipos da sua API: Crie interfaces que espelham exatamente o que a API retorna. Um type por endpoint. Se a API tem documentação OpenAPI/Swagger, extraia os tipos de lá."}}]}]]}],["$","div","1",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":2}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 2 - Crie um fetch wrapper genérico: Uma função async que aceita URL, options e um generic T. Ela faz fetch, checa o status, faz response.json() e retorna T. Todo o tratamento de erro fica centralizado."}}]}]]}],["$","div","2",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":3}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 3 - Tipe as options do Next.js: O Next.js estende RequestInit com next.revalidate (number), next.tags (string[]) e cache ('force-cache' | 'no-store'). Tipe essas options no seu wrapper."}}]}]]}],["$","div","3",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":4}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 4 - Use o wrapper nos Server Components: Chame o wrapper com o tipo genérico: const posts = await api('/posts'). Posts agora tem tipo Post[] com autocomplete completo."}}]}]]}],["$","div","4",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":5}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 5 - Adicione tratamento de erro tipado: Crie um tipo Result com success/error. O wrapper retorna { data, error } ao invés de lançar exceção. O componente sabe exatamente como tratar cada caso."}}]}]]}],["$","div","5",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":6}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 6 - Configure revalidação tipada: Use next.revalidate pra cache por tempo e next.tags pra invalidação on-demand. Tipe as tags como union literal pra evitar typos."}}]}]]}]]}]