Descubra o poder do Mongoose e como você pode usá-lo para gerenciar dados para um aplicativo da web simples.
Next.js é uma estrutura JavaScript full-stack versátil que é construída sobre o React, suportando seus principais recursos como JSX, componentes e ganchos. Alguns dos principais recursos do Next.js incluem roteamento baseado em arquivo, CSS em JS e renderização do lado do servidor.
Um recurso significativo do Next.js é sua capacidade de integrar-se perfeitamente com várias tecnologias de back-end, como o Mongoose, permitindo que você gerencie os dados com facilidade e eficiência.
Com o Mongoose, você pode definir facilmente uma API REST de alto desempenho a partir de um aplicativo Next.js para armazenar e recuperar dados de um banco de dados MongoDB.
Next.js: uma estrutura JavaScript de pilha completa
Ao contrário do React, o Next.js é considerado um framework web full-stack porque fornece uma solução completa para construir aplicações web renderizadas do lado do servidor.
Isso porque ele oferece recursos que possibilitam trabalhar tanto no front-end quanto no back-end de uma aplicação a partir de um único diretório de projeto. Você não precisa necessariamente configurar uma pasta de projeto de back-end separada para implementar a funcionalidade do lado do servidor, especialmente para aplicativos de pequena escala.
No entanto, por mais que o Next.js lide com algumas funcionalidades de back-end, para criar aplicativos full-stack em larga escala, você pode querer combiná-lo com uma estrutura de back-end dedicada como o Express.
Alguns dos principais recursos que fornecem ao Next.js seus recursos de pilha completa incluem:
- Renderização do lado do servidor: o Next.js fornece suporte integrado para recursos de renderização do lado do servidor. Essencialmente, significa que, uma vez que um cliente envia solicitações HTTP para um servidor, o servidor processa as solicitações e responde com o conteúdo HTML necessário para cada página a ser renderizada no navegador.
- Roteamento: o Next.js usa um sistema de roteamento baseado em página para definir e gerenciar rotas diferentes, lidar com entradas do usuário e criar páginas dinâmicas sem depender de bibliotecas de terceiros. Além disso, é fácil aumentar, pois adicionar novas rotas é tão simples quanto adicionar uma nova página, como about.js, ao diretório das páginas.
- Terminais de API: o Next.js fornece suporte integrado para recursos do lado do servidor que são usados para criar terminais de API que gerenciam solicitações HTTP e retornam dados. Isso facilita a criação de funcionalidades de back-end sem a necessidade de configurar um servidor separado usando uma estrutura de back-end dedicada como o Express. No entanto, é importante observar que o Next.js é principalmente uma estrutura da Web de front-end.
Configurar um banco de dados MongoDB
Para começar, configurar um banco de dados MongoDB. Como alternativa, você pode criar rapidamente um banco de dados MongoDB configurando um cluster MongoDB na nuvem gratuitamente. Depois de ter seu banco de dados instalado e funcionando, copie a string URI de conexão do banco de dados.
Você pode encontrar o código deste projeto neste Repositório GitHub.
Configurar um projeto Next.js
Crie um diretório para um novo projeto e cd afim disso:
mkdir nextjs-project
cd nextjs-projectEm seguida, instale o Next.js:
npx criar-próximo-aplicativo nextjs-mongodbApós a conclusão do processo de instalação, instale o Mongoose como uma dependência.
npm instalar mangustoPor fim, no diretório raiz do seu projeto, crie um novo arquivo .env para conter a string de conexão do banco de dados.
NEXT_PUBLIC_MONGO_URI = "cadeia de conexão URI do banco de dados"Configurar a conexão do banco de dados
No origem diretório, crie uma nova pasta e nomeie-a útil. Dentro desta pasta, crie um novo arquivo chamado dbConfig.js e adicione o seguinte código a ele:
importar mangusto de'mangusto';const conectarMongo = assíncrono () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
exportarpadrão conectarMongo;
Definir os modelos de dados
Os modelos de dados definem a estrutura dos dados que serão armazenados, incluindo os tipos de dados e as relações entre os dados.
O MongoDB armazena dados em documentos do tipo JSON, pois é um banco de dados NoSQL. O Mongoose fornece uma maneira de definir como os dados dos clientes Next.js devem ser armazenados e acessados a partir do banco de dados.
No diretório src, crie uma nova pasta e nomeie em models. Dentro desta pasta, crie um novo arquivo chamado userModel.js, e adicione o código abaixo:
importar { Esquema, modelo, modelos } de'mangusto';const userSchema = novo Esquema({
nome: Corda,
e-mail: {
tipo: Corda,
obrigatório: verdadeiro,
exclusivo: verdadeiro,
},
});const Usuário = modelos. Usuário || modelo('Do utilizador', userSchema);
exportarpadrão Do utilizador;
Crie os pontos de extremidade da API
Ao contrário de outras estruturas de front-end, o Next.js fornece suporte integrado para gerenciamento de API. Isso simplifica o processo de criação de APIs, pois você pode defini-las diretamente no projeto Next.js em vez de configurar um servidor separado.
Depois de definir as rotas de API dentro do diretório pages/api, o Next.js gera endpoints de API para cada um dos arquivos nesse diretório. Por exemplo, se você criar userV1/user.js, Next.js criará um terminal acessível em http://localhost: 3000/api/userV1/user.
Dentro de páginas/API, crie uma nova pasta e nomeie-a como userV1. Dentro desta pasta, crie um novo arquivo chamado usuário.js, e adicione o código abaixo:
importar conectarMongo de'../../../utils/dbConfig';
importar Do utilizador de'../../../models/userModel';/**
* @param {importar('próximo').NextApiRequest} req
* @param {importar('próximo').NextApiResponse} res
*/
exportarpadrãoassíncronofunçãouserAPI(req, res) {
tentar {
console.registro('CONECTANDO AO MONGO');
aguardam conectarMongo();
console.registro('CONECTADO AO MONGO');
se (req.método 'PUBLICAR') {
console.registro('CRIAR DOCUMENTO');
const criadoUsuário = aguardam User.create (req.body);
console.registro('DOCUMENTO CRIADO');
res.json({criadoUser});
} outrose (req.método 'PEGAR') {
console.registro('BUSCANDO DOCUMENTOS');
const usuários buscados = aguardam User.find({});
console.registro('DOCUMENTOS APROVADOS');
res.json({ fetchedUsers });
} outro {
lançarnovoErro(`Método HTTP não suportado: ${req.método}`);
}
} pegar (erro) {
console.log (erro);
res.json({ erro });
}
}
Esse código implementa um endpoint de API para armazenar e buscar dados do usuário de um banco de dados MongoDB. Ele define um userAPI função que recebe dois parâmetros: pedido e res. Eles representam a solicitação HTTP de entrada e a resposta HTTP de saída, respectivamente.
Dentro da função, o código se conecta ao banco de dados MongoDB e verifica o método HTTP da solicitação recebida.
Se o método for uma solicitação POST, o código cria um novo documento do usuário no banco de dados usando o criar método. Ao contrário, se é um PEGAR solicitação, o código busca todos os documentos do usuário no banco de dados.
Consumindo os endpoints da API
Adicione o código abaixo ao páginas/index.js arquivo:
- Faça uma solicitação POST para o endpoint da API para armazenar dados no banco de dados.
importar estilos de'@/styles/Home.module.css';
importar { useState } de'reagir';exportarpadrãofunçãoLar() {
const [nome, setName] = useState('');
const [email, setEmail] = useState('');
const [usersResults, setUsersResults] = useState([]);const criarUsuário = assíncrono () => {
tentar {
const criadoUsuário = aguardam buscar('/api/userV1/user', {
método: 'PUBLICAR',
cabeçalhos: {
'Tipo de conteúdo': 'aplicativo/json',
},
corpo: JSON.stringify({
nome,
e-mail,
}),
}).então((res) => res.json());
console.registro('DOCUMENTO CRIADO');nome do conjunto('');
setEmail('');console.log (criadoUsuário);
} pegar (erro) {
console.log (erro);
}
}; - Defina uma função para buscar os dados do usuário fazendo solicitações HTTP para o terminal GET.
const displayUsers = assíncrono () => {
tentar {
console.registro('BUSCANDO DOCUMENTOS');
const usuários buscados = aguardam buscar('/api/userV1/user').então((res) =>
res.json()
);
console.registro('DOCUMENTOS APROVADOS');
setUsersResults (fetchedUsers);
console.log (usersResults)
} pegar (erro) {
console.log (erro);
}
}; - Por fim, renderize um elemento de formulário com campos de entrada de texto e envie e exiba os botões de dados do usuário.
retornar (
<>
Por fim, vá em frente e ative o servidor de desenvolvimento para atualizar as alterações e navegue até http://localhost: 3000 no seu navegador.
npm run devUsando Next.js em Aplicativos
O Next.js é uma opção fantástica para criar aplicativos da Web interessantes, esteja você trabalhando em um projeto paralelo ou em uma solução da Web em larga escala. Ele oferece uma variedade de recursos e capacidades que agilizam o processo de criação de produtos de alto desempenho e escaláveis.
Embora seja principalmente uma estrutura robusta do lado do cliente, você também pode utilizar seus recursos do lado do servidor para ativar rapidamente um serviço de back-end.
