Longe vão os dias em que você tinha que criar um back-end separado para o seu site. Com o roteamento de API baseado em arquivo Next.js, você pode facilitar sua vida escrevendo sua API dentro de um projeto Next.js.
Next.js é um meta-framework React com recursos que simplificam o processo de criação de aplicativos da Web prontos para produção. Você verá como criar uma API REST em Next.js e consumir os dados dessa API em uma página Next.js.
Criar um projeto Next.js usando create-next-app
Você pode criar um novo projeto Next.js usando a ferramenta CLI create-next-app. Ele instala os pacotes e arquivos necessários para você começar a criar um aplicativo Next.js.
Execute este comando em um terminal para criar uma nova pasta Next.js chamada api-routes. Você pode receber uma solicitação para instalar o aplicativo create-next.
npx criar-próximo-app api-routes
Quando o comando terminar, abra a pasta api-routes para começar a criar as rotas da API.
Roteamento de API em Next.js
As rotas de API são executadas no servidor e têm muitos usos, como salvar dados do usuário em um banco de dados ou buscar dados de uma API sem aumentar o
erro de política CORS.No Next.js, você deve criar rotas de API dentro da pasta /pages/api. Next.js gera endpoints de API para cada um dos arquivos nesta pasta. Se você adicionar user.js a /pages/api, Next.js criará um endpoint em http://localhost: 3000/api/usuário.
Uma rota básica da API Next.js tem a seguinte sintaxe.
exportarpadrãofunçãomanipulador(req, res) {
res.status (200).json({ nome: 'John Doe' })
}
Você deve exportar a função do manipulador para que ela funcione.
Criando rotas de API
Crie um novo arquivo chamado todo.js no /pages/api pasta para adicionar uma rota de API para itens de tarefas.
Zombando do banco de dados Todo
Para obter todos, você deve criar um terminal GET. Pela simplicidade. Este tutorial usa uma matriz de itens de tarefas em vez de um banco de dados, mas fique à vontade para usar um banco de dados como MongoDB ou MySQL.
Crie os itens de tarefas em todo.js na pasta raiz do seu aplicativo e adicione os seguintes dados.
exportarconst todos = [
{
identificação: 1,
pendência: "Faça algo de bom para alguém de quem gosto",
concluído: verdadeiro,
ID do usuário: 26,
},
{
identificação: 2,
pendência: "Memorize os cinquenta estados e suas capitais",
concluído: falso,
ID do usuário: 48,
},
// outros todos
];
Esses itens de tarefas são do site DummyJSON, um API REST para dados fictícios. Você pode encontrar os dados exatos deste Endpoint de todos DummyJSON.
Em seguida, crie a rota da API em /pages/api/todos.js e adicione a função do manipulador.
importar { todos } de "../../pendência";exportarfunçãomanipulador(req, res) {
const { método } = req;
trocar (método) {
caso "PEGAR":
res.status(200).json(todos);
quebrar;
caso "PUBLICAR":
const { todo, concluído } = req.body;
todos.empurrar({
eu ia: todos.comprimento + 1,
pendência,
concluído,
});
res.status(200).json(todos);
quebrar;
padrão:
res.setHeader("Permitir", ["PEGAR", "PUBLICAR"]);
res.status(405).fim(`Método ${método} Não permitido`);
quebrar;
}
}
Essa rota manipula os pontos de extremidade GET e POST. Ele retorna todos os afazeres para a solicitação GET e adiciona um item a fazer ao banco de dados de afazeres para uma solicitação POST. Para outros métodos, o manipulador retorna um erro.
Consumindo Rotas de API no Frontend
Você criou um terminal de API que retorna um objeto JSON contendo uma matriz de todos.
Para consumir a API, crie uma função chamada fetchTodos que recupere dados do endpoint da API. A função usa o método de busca, mas você também pode usar Axios para fazer solicitações de API. Em seguida, chame essa função ao clicar em um botão.
importar Cabeça de "próximo/cabeça";
importar { useState } de "reagir";exportarpadrãofunçãoLar() {
const [todos, settodos] = useState([]);const buscarTodos = assíncrono () => {
const resposta = aguardam buscar("/api/todos");
const dados = aguardam resposta.json();
settodos (dados);
};
retornar (
<div className={styles.container}>
<Cabeça>
<título>Criar próximo aplicativo</title>
<metanome="descrição" conteúdo="Gerado por criar próximo aplicativo" />
<link rel ="ícone" href="/favicon.ico" />
</Head>
<principal>
<botão onClick={fetchTodos}>Obter todos</button>
<ul>
{todos.map((todo) => {
retornar (
<li
estilo={{ cor: `${todo.concluído? "verde": "vermelho"}` }}
chave={todo.id}
>
{todo.todo}:{todo.concluído}.
</li>
);
})}
</ul>
</main>
</div>
);
}
A lista neste snippet exibe os itens de tarefas quando eles são buscados.
Para o endpoint POST, crie uma nova função chamada saveTodo que faz uma solicitação POST para a API. A solicitação de busca armazena o novo item de tarefa no corpo e retorna todos os itens de tarefa, incluindo o novo. A função saveTodo então os armazena no estado todos.
const salvarTodo = assíncrono () => {
const resposta = aguardam buscar("/api/todos", {
método: "PUBLICAR",
corpo: JSON.stringify (novoTodo),
cabeçalhos: {
"Tipo de conteúdo": "aplicativo/json",
},
});
const dados = aguardam resposta.json();
settodos (dados);
};
Em seguida, crie um formulário com uma barra de entrada de texto para receber o novo item de tarefa. A função de manipulador de envio deste formulário chamará a função saveTodo.
importar Cabeça de "próximo/cabeça";
importar { useReducer, useState } de "reagir";
importar estilos de "../estilos/Home.module.css";exportarpadrãofunçãoLar() {
const [todos, settodos] = useState([]);const [novoTodo, setnovoTodo] = useState({
pendência: "",
concluído: falso,
});const buscarTodos = assíncrono () => {
// buscaTodos
};
const salvarTodo = assíncrono (e) => {
const resposta = aguardam buscar("/api/todos", {
método: "PUBLICAR",
corpo: JSON.stringify (novoTodo),
cabeçalhos: {
"Tipo de conteúdo": "aplicativo/json",
},
});const dados = aguardam resposta.json();
settodos (dados);
};const handleChange = (e) => {
setnewTodo({
pendência: e.alvo.valor,
});
};const handleSubmit = (e) => {
e.preventDefault();
salvarTodo();
setnewTodo({
pendência: '',
});
};retornar (
<div className={styles.container}>
<Cabeça>
<título>Criar próximo aplicativo</title>
<metanome="descrição" conteúdo="Gerado por criar próximo aplicativo" />
<link rel ="ícone" href="/favicon.ico" />
</Head>
<principal>
// Busca os itens de tarefas quando clicado
<botão onClick={fetchTodos}>Obter todos</button>
// Salva um novo item de tarefa quando enviado
<formulário onSubmit={handleSubmit}>
<tipo de entrada ="texto" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// lista itens de tarefas}
</ul>
</main>
</div>
);
}
O manipulador adiciona uma nova tarefa ao banco de dados toda vez que um usuário envia o formulário. Além disso, essa função atualiza o valor de todos usando os dados recebidos da API que, por sua vez, adiciona o novo item de tarefas à lista.
O roteamento de API é apenas um dos pontos fortes do Next.js
Você viu como criar e usar uma rota de API Next.js. Agora você pode criar um aplicativo de pilha completa sem sair da pasta do projeto Next.js. O roteamento de API é um dos muitos benefícios que o Next.js oferece.
O Next.js também oferece otimizações de desempenho, como divisão de código, carregamento lento e suporte integrado a CSS. Se você está construindo um site que precisa ser rápido e otimizado para SEO, considere o Next.js.
