← Pagina Inicial

Rotas de API

1 - 2 - 3 - 4

Detalhes das rotas da API

Você pode obter informações detalhadas sobre rotas de API em nossa documentação. Mas aqui estão algumas informações essenciais que você deve saber sobre rotas de API.

Não obtenha uma rota de API de getStaticProps ou getStaticPaths

Você não deve buscar uma rota de API em getStaticProps ou getStaticPaths. Em vez disso, escreva seu código no server-side diretamente em getStaticProps ou getStaticPaths (ou chamar uma função auxiliar).

Eis o motivo: getStaticProps e getStaticPaths são executados apenas no server-side. Ele nunca será executado no client-side. Ele nem será incluído no pacote JS do navegador. Isso significa que você pode escrever código como consultas diretas ao banco de dados sem que elas sejam enviadas para os navegadores.

Um bom caso de uso: manipulação de entrada de formulário

Um bom caso de uso para rotas de API é manipular a entrada de formulário. Por exemplo, você pode criar um formulário em sua página e enviar uma solicitação POST para sua rota de API. Você pode escrever o código para salvá-lo diretamente no seu banco de dados. O código de rota da API não fará parte do seu pacote de clientes, portanto, você pode escrever com segurança o código do servidor.

export default (req, res) => {
  const email = req.body.email
  // Then save email to your database, etc...
}

Modo de pré-visualização

A geração estática é útil quando suas páginas buscam dados de um headless CMS. No entanto, não é o ideal quando você está escrevendo um rascunho no seu CMS decapitado e deseja visualizá-lo imediatamente na sua página. Você deseja que o Next.js renderize essas páginas no momento da solicitação, em vez do tempo de compilação, e busque o conteúdo de rascunho em vez do conteúdo publicado. Você quer que o Next.js ignore a Geração estática apenas neste caso específico.

O Next.js possui o recurso chamado Modo de visualização, que resolve esse problema e utiliza rotas de API. Para saber mais, consulte a documentação do Modo de visualização.

Rotas de API dinâmicas

As rotas da API podem ser dinâmicas, assim como as páginas comuns. Dê uma olhada na documentação de rotas de API dinâmicas para saber mais.

É isso aí!

Na próxima e na lição básica final, falaremos sobre como implantar o aplicativo Next.js. em produção.

← Pagina Inicial