Como Consumir uma API no Front-End: Guia Prático com Next.js

Uma das maiores dificuldades de quem está migrando do HTML e CSS básico para o desenvolvimento Front-End profissional é entender como conversar com os servidores. Os dados não caem do céu; eles precisam ser requisitados e tratados através das famosas APIs.

Neste guia prático, vamos desmistificar o consumo de APIs RESTful utilizando o framework mais popular da atualidade: o Next.js.

O que você aprenderá hoje

• O conceito real de requisição assíncrona (Promises).
• Como buscar dados do lado do servidor (Server Components) no Next.js moderno.
• O padrão ideal de arquitetura para não quebrar a sua aplicação.

---

O Que é "Consumir uma API"?

Imagine que a API é como um garçom em um restaurante. O seu aplicativo (Front-End) faz um pedido para o garçom. O garçom vai até a cozinha (Back-End/Banco de Dados), pega os dados que você pediu e entrega na sua mesa. Nós fazemos esses pedidos usando o comando universal do JavaScript chamado fetch.

A Revolução do Next.js (App Router)

Antigamente, no React puro, nós precisávamos usar o useEffect para carregar dados na tela. Isso fazia a página abrir em branco, mostrar um "Carregando..." e só depois mostrar o texto. O Next.js mudou essa regra com os React Server Components.

Agora, os dados são buscados diretamente no servidor antes mesmo da página ser entregue ao usuário, deixando o seu site incrivelmente rápido e perfeito para o Google (SEO).

Código Prático: A Busca Básica

Veja como é simples criar uma página que busca uma lista de usuários de uma API e os exibe na tela:

// app/usuarios/page.tsx

export default async function UsuariosPage() {
  // 1. Fazendo o pedido (fetch) para a API
  const resposta = await fetch('https://jsonplaceholder.typicode.com/users');
  
  // 2. Transformando a resposta do Garçom em JSON (formato que o JavaScript entende)
  const usuarios = await resposta.json();

  return (
    <main>
      <h1>Lista de Usuários</h1>
      <ul>
        {/* 3. Percorrendo a lista de usuários e mostrando o nome de cada um */}
        {usuarios.map((usuario) => (
          <li key={usuario.id}>{usuario.name}</li>
        ))}
      </ul>
    </main>
  );
}

Por que usar o "await"?

Repare na palavra mágica await antes do fetch. Como a internet não é instantânea, a requisição para a API pode demorar alguns milissegundos (ou segundos). A palavra await (aguardar) avisa ao JavaScript: "Por favor, pare o código aqui e espere o servidor responder antes de continuar a tentar desenhar a tela".

---

O Próximo Passo

Dominar o fetch é apenas o começo. APIs profissionais podem retornar erros (como um 404 Não Encontrado) ou exigir que você envie Senhas e Tokens de Autenticação.

Sua tarefa de casa é tentar criar a página acima no seu próprio projeto Next.js, mas adicionar um bloco try / catch para capturar os erros caso a URL da API esteja fora do ar. Mão na massa!