Descubra el poder de Mongoose y cómo puede usarlo para administrar datos para una aplicación web simple.
Next.js es un marco JavaScript versátil de pila completa que se basa en React y es compatible con sus funciones principales, como JSX, componentes y ganchos. Algunas de las características principales de Next.js incluyen enrutamiento basado en archivos, CSS en JS y renderizado del lado del servidor.
Una capacidad importante de Next.js es su capacidad para integrarse a la perfección con varias tecnologías de back-end, como Mongoose, lo que le permite administrar fácilmente los datos de manera eficiente.
Con Mongoose, puede definir fácilmente una API REST eficaz desde una aplicación Next.js para almacenar y recuperar datos de una base de datos MongoDB.
Next.js: un marco de JavaScript de pila completa
A diferencia de React, Next.js se considera un marco web de pila completa porque proporciona una solución completa para crear aplicaciones web renderizadas del lado del servidor.
Esto se debe a que ofrece funciones que hacen posible trabajar tanto en el front-end como en el back-end de una aplicación desde un único directorio de proyecto. No necesariamente necesita configurar una carpeta de proyecto de back-end separada para implementar la funcionalidad del lado del servidor, especialmente para aplicaciones de pequeña escala.
Sin embargo, por mucho que Next.js maneje algunas funciones de back-end, para crear aplicaciones full-stack a gran escala, es posible que desee combinarlo con un marco de back-end dedicado como Express.
Algunas de las características principales que le dan a Next.js sus capacidades de pila completa incluyen:
- Representación del lado del servidor: Next.js proporciona soporte integrado para capacidades de representación del lado del servidor. Esencialmente significa que, una vez que un cliente envía solicitudes HTTP a un servidor, el servidor procesa las solicitudes y responde con el contenido HTML requerido para que cada página se muestre en el navegador.
- Enrutamiento: Next.js utiliza un sistema de enrutamiento basado en páginas para definir y administrar diferentes rutas, manejar las entradas de los usuarios y crear páginas dinámicas sin tener que depender de bibliotecas de terceros. Además, es fácil de escalar, ya que agregar nuevas rutas es tan simple como agregar una nueva página, como about.js, al directorio de páginas.
- Puntos finales de API: Next.js proporciona soporte integrado para capacidades del lado del servidor que se utilizan para crear puntos finales de API que administran solicitudes HTTP y devuelven datos. Esto facilita la creación de funciones de back-end sin tener que configurar un servidor separado utilizando un marco de back-end dedicado como Express. Sin embargo, es importante tener en cuenta que Next.js es principalmente un marco web front-end.
Configurar una base de datos MongoDB
Para empezar, configurar una base de datos MongoDB. Alternativamente, puede activar rápidamente una base de datos MongoDB al configurar un clúster de MongoDB en la nube de forma gratuita. Una vez que tenga su base de datos en funcionamiento, copie la cadena URI de conexión de la base de datos.
Puedes encontrar el código de este proyecto en este repositorio GitHub.
Configurar un proyecto Next.js
Cree un directorio para un nuevo proyecto y cd en ello:
mkdir nextjs-proyecto
cd nextjs-proyectoLuego instale Next.js:
npx crear-siguiente-aplicación nextjs-mongodbUna vez que se complete el proceso de instalación, instale Mongoose como una dependencia.
npm instalar mangostaFinalmente, en el directorio raíz de su proyecto, cree un nuevo archivo .env para contener la cadena de conexión de su base de datos.
NEXT_PUBLIC_MONGO_URI = "cadena de conexión URI de base de datos"Configurar la conexión de la base de datos
En el origen directorio, crea una nueva carpeta y asígnale un nombre útiles. Dentro de esta carpeta, crea un nuevo archivo llamado dbConfig.js y agregarle el siguiente código:
importar mangosta de'mangosta';constante conectarMongo = asíncrono () => mangosta.conectar (proceso.env. SIGUIENTE_PÚBLICO_MONGO_URI);
exportarpor defecto conectarMongo;
Definir los modelos de datos
Los modelos de datos definen la estructura de los datos que se almacenarán, incluidos los tipos de datos y las relaciones entre los datos.
MongoDB almacena datos en documentos tipo JSON ya que es un Base de datos NoSQL. Mongoose proporciona una manera de definir cómo se deben almacenar y acceder los datos de los clientes de Next.js desde la base de datos.
En el directorio src, cree una nueva carpeta y nombre en models. Dentro de esta carpeta, crea un nuevo archivo llamado modelo de usuario.js, y agrega el siguiente código:
importar { Esquema, modelo, modelos } de'mangosta';constante esquema de usuario = nuevo Esquema({
nombre: Cadena,
correo electrónico: {
tipo: Cadena,
requerido: verdadero,
único: verdadero,
},
});constante Usuario = modelos. Usuario || modelo('Usuario', esquema de usuario);
exportarpor defecto Usuario;
Crear los puntos finales de la API
A diferencia de otros marcos front-end, Next.js brinda soporte integrado para la administración de API. Esto simplifica el proceso de creación de API, ya que puede definirlas directamente en el proyecto Next.js en lugar de configurar un servidor separado.
Una vez que definió las rutas API dentro del directorio pages/api, Next.js genera puntos finales API para cada uno de los archivos en este directorio. Por ejemplo, si crea userV1/user.js, Next.js creará un punto final accesible en http://localhost: 3000/api/usuarioV1/usuario.
Dentro de páginas/api, cree una nueva carpeta y asígnele el nombre userV1. Dentro de esta carpeta, crea un nuevo archivo llamado usuario.jsy agregue el siguiente código:
importar conectarMongo de'../../../utils/dbConfig';
importar Usuario de'../../../modelos/modelo de usuario';/**
* @param {importar('próximo').NextApiRequest} solicitud
* @param {importar('próximo').NextApiResponse} res
*/
exportarpor defectoasíncronofunciónAPI de usuario(requerimiento, res) {
intentar {
consola.registro('CONEXIÓN A MONGO');
esperar conectarMongo();
consola.registro('CONECTADO A MONGO');
si (método requerido 'CORREO') {
consola.registro('CREANDO DOCUMENTO');
constante usuariocreado = esperar Usuario.crear (req.cuerpo);
consola.registro('DOCUMENTO CREADO');
res.json({usuariocreado});
} demássi (método requerido 'CONSEGUIR') {
consola.registro('BUSCANDO DOCUMENTOS');
constante usuarios obtenidos = esperar Usuario.find({});
consola.registro('DOCUMENTOS RECOGIDOS');
res.json({usuariosobtenidos});
} demás {
tirarnuevoError(`Método HTTP no compatible: ${req.método}`);
}
} atrapar (error) {
consola.log (error);
res.json({error});
}
}
Este código implementa un punto final de API para almacenar y obtener datos de usuario de una base de datos MongoDB. Define un API de usuario función que toma dos parámetros: requerimiento y resolución. Estos representan la solicitud HTTP entrante y la respuesta HTTP saliente, respectivamente.
Dentro de la función, el código se conecta a la base de datos MongoDB y verifica el método HTTP de la solicitud entrante.
Si el método es una solicitud POST, el código crea un nuevo documento de usuario en la base de datos usando el crear método. Por el contrario, si es un CONSEGUIR solicitud, el código obtiene todos los documentos de usuario de la base de datos.
Consumir los puntos finales de la API
Agregue el siguiente código a la páginas/index.js archivo:
- Realice una solicitud POST al extremo de la API para almacenar datos en la base de datos.
importar estilos de'@/estilos/Inicio.módulo.css';
importar { estado de uso } de'reaccionar';exportarpor defectofunciónHogar() {
constante [nombre, establecerNombre] = usarEstado('');
constante [email, setEmail] = useState('');
constante [resultados de usuarios, establecer resultados de usuarios] = estado de uso ([]);constante crearUsuario = asíncrono () => {
intentar {
constante usuariocreado = esperar buscar('/api/usuarioV1/usuario', {
método: 'CORREO',
encabezados: {
'Tipo de contenido': 'aplicación/json',
},
cuerpo: JSON.stringificar({
nombre,
correo electrónico,
}),
}).entonces((resolución) => res.json());
consola.registro('DOCUMENTO CREADO');escoger un nombre('');
establecer correo electrónico ('');consola.log (usuariocreado);
} atrapar (error) {
consola.log (error);
}
}; - Defina una función para obtener los datos del usuario realizando solicitudes HTTP al punto final GET.
constante mostrarUsuarios = asíncrono () => {
intentar {
consola.registro('BUSCANDO DOCUMENTOS');
constante usuarios obtenidos = esperar buscar('/api/usuarioV1/usuario').entonces((resolución) =>
res.json()
);
consola.registro('DOCUMENTOS RECOGIDOS');
setUsersResults (obtenidosUsuarios);
consola.log (resultados de usuarios)
} atrapar (error) {
consola.log (error);
}
}; - Por último, represente un elemento de formulario con campos de entrada de texto y envíe y muestre botones de datos de usuario.
devolver (
<>
Finalmente, continúe y active el servidor de desarrollo para actualizar los cambios y navegue hasta http://localhost: 3000 en tu navegador.
npm ejecutar devUso de Next.js en aplicaciones
Next.js es una opción fantástica para crear aplicaciones web geniales, ya sea que esté trabajando en un proyecto paralelo o en una solución web a gran escala. Ofrece una gama de características y capacidades que agilizan el proceso de creación de productos escalables y de alto rendimiento.
Aunque es principalmente un marco sólido del lado del cliente, también puede utilizar sus capacidades del lado del servidor para activar rápidamente un servicio de back-end.