[Dúvida] Como consumir uma api rest usando next

Oi Delano, tudo bem?

Agradeço pela sua pergunta e pelo interesse no curso "Next.js: tour pelo Next.js". Com relação às requisições POST, PUT e DELETE no Next.js, é importante destacar que existem várias abordagens possíveis, dependendo do cenário e das necessidades do seu projeto.

Quando se trata de requisições GET, o Next.js oferece suporte nativo para o SSG (Static Site Generation), SSR (Server-Side Rendering) e ISG (Incremental Static Generation), como você mencionou. No entanto, para as requisições POST, PUT e DELETE, é necessário lidar com a lógica de envio de dados e atualização do estado do aplicativo.

Uma das abordagens mais comuns é utilizar as API Routes do Next.js. Essas rotas permitem criar endpoints personalizados no seu aplicativo Next.js, que são tratados como rotas do servidor. Dessa forma, você pode separar a lógica da API do lado do cliente, escondendo as chamadas diretas à API.

Para fazer uma requisição POST utilizando uma API Route, você pode criar um arquivo no diretório pages/api com um nome descritivo, como meu-endpoint.js. Dentro desse arquivo, você pode definir a lógica para lidar com a requisição POST. Por exemplo:

// pages/api/meu-endpoint.js

export default function handler(req, res) {
  if (req.method === 'POST') {
    // Lógica para processar a requisição POST
    const { data } = req.body;
    // Faça algo com os dados recebidos

    res.status(200).json({ message: 'Requisição POST processada com sucesso' });
  } else {
    res.status(405).json({ message: 'Método não permitido' });
  }
}

Nesse exemplo, estamos definindo um endpoint chamado /api/meu-endpoint que irá lidar com as requisições POST. Dentro do bloco if (req.method === 'POST'), você pode implementar a lógica específica para processar os dados enviados na requisição POST. Em seguida, enviamos uma resposta com um código de status 200 para indicar que a requisição foi processada com sucesso.

No lado do cliente, você pode utilizar a função fetch ou outras bibliotecas de HTTP, como o Axios, para fazer a chamada à API Route. Por exemplo:

// Componente do lado do cliente

async function enviarDados() {
  const response = await fetch('/api/meu-endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ data: 'meus-dados' }),
  });

  const data = await response.json();
  console.log(data);
}

// Chamada da função para enviar os dados
enviarDados();

Nesse trecho de código, estamos utilizando a função fetch para enviar uma requisição POST para a API Route /api/meu-endpoint. No corpo da requisição, estamos enviando um objeto JSON contendo os dados que desejamos enviar. Após receber a resposta da API, estamos convertendo a resposta em JSON e exibindo no console.

Espero que tenha te ajudado.

Um abraço e bons estudos.