Cómo Crear una Aplicación CRUD Básica con Next.js?

introducción en esta guía, recorreremos la construcción de una aplicación crud completa (crear, leer, actualizar, eliminar) utilizando next js para tu frontend, emparejado con back4app como tu solución de backend configurarás un proyecto llamado basic crud app nextjs , diseñarás un esquema de base de datos dinámico e integrarás una funcionalidad crud robusta en tu aplicación next js cubrirá todo, desde la configuración de tu proyecto back4app y el diseño de colecciones hasta la conexión de tu interfaz next js utilizando el sdk de parse o métodos rest/graphql al final, tendrás una aplicación web lista para producción con autenticación de usuario segura y gestión de datos eficiente conclusiones clave construir una aplicación crud completa con next js y back4app aprender a diseñar un esquema de backend flexible adaptado a tus necesidades de datos utilizar una interfaz de administración intuitiva y de arrastrar y soltar para la gestión de datos descubrir las mejores prácticas para el despliegue, incluyendo la contenedorización con docker y la integración con github requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app con un nuevo proyecto configurado para obtener orientación, consulta introducción a back4app https //www back4app com/docs/get started/new parse app un entorno de desarrollo de next js usa crear next app https //nextjs org/docs/api reference/create next app o una herramienta similar asegúrate de que node js (versión 14 o posterior) esté instalado un conocimiento básico de javascript, next js y integraciones de api visita la documentación de next js https //nextjs org/docs para una visión general si es necesario paso 1 – configurando tu proyecto iniciar un nuevo proyecto en back4app inicia sesión en tu cuenta de back4app haz clic en el botón “nueva app” en tu panel ingresa el nombre del proyecto basic crud app nextjs y sigue las instrucciones crear nuevo proyecto tu nuevo proyecto aparece en el panel, sirviendo como el núcleo de tu backend crea tu aplicación next js abre tu terminal y ejecuta npx create next app\@latest basic crud app nextjs cambia a tu directorio de proyecto cd basic crud app nextjs este comando configura un marco de proyecto next js listo para personalización paso 2 – creando el esquema de tu base de datos estructurando tu modelo de datos para esta aplicación crud, crearás colecciones esenciales a continuación se presentan dos colecciones principales con detalles de los campos que permiten las funcionalidades básicas 1 colección de artículos esta colección almacena detalles sobre cada artículo campo tipo de dato descripción id objectid identificador único generado automáticamente título cadena el nombre o título del artículo descripción cadena un breve resumen del artículo creado en fecha marca de tiempo cuando se crea el elemento actualizado en fecha marca de tiempo para la última actualización 2 colección de usuarios esta colección maneja los perfiles de usuario y los datos de autenticación campo tipo de dato descripción id objectid identificador único generado automáticamente nombre de usuario cadena nombre de usuario único para el usuario correo electrónico cadena dirección de correo electrónico única hash de contraseña cadena contraseña hash segura para la autenticación de usuarios creado en fecha marca de tiempo cuando se creó la cuenta actualizado en fecha marca de tiempo para la última actualización de la cuenta puedes definir manualmente estas colecciones en el panel de control de back4app creando una nueva clase para cada colección y añadiendo las columnas relevantes crear nueva clase crea campos eligiendo el tipo de dato apropiado, nombrando la columna y estableciendo valores predeterminados o requisitos crear columna usando el asistente de ia de back4app para la configuración del esquema el asistente de ia de back4app simplifica la generación de esquemas de bases de datos describe tus colecciones y campos deseados, y deja que el asistente genere automáticamente la estructura pasos para usar el asistente de ia abre el asistente de ia encuéntralo en el menú de tu panel de control de back4app describe tu modelo de datos pega un aviso detallado que describa tus colecciones y requisitos de campo revisa y aplica verifica el esquema generado e implementalo en tu proyecto ejemplo de aviso create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) este método no solo ahorra tiempo, sino que también asegura que tu esquema sea consistente y optimizado paso 3 – activando la interfaz de administración y funciones crud explorando la interfaz de administración la interfaz de administración de back4app ofrece una solución sin código para gestionar tus datos de backend con su intuitivo sistema de arrastrar y soltar, puedes realizar fácilmente operaciones crud habilitando la interfaz de administración navega a la sección “más” en tu panel de control de back4app haz clic en “admin app” y luego selecciona “habilitar admin app ” configura tus credenciales de administrador configurando tu primer usuario administrador esto también establece roles como b4aadminuser y colecciones de sistema necesarias habilitar la aplicación de administración después de la activación, inicie sesión en la interfaz de administración para comenzar a gestionar sus datos panel de control de la aplicación de administración ejecutando operaciones crud a través de la interfaz de administración dentro de la interfaz de administración puedes crear registros usa el botón “agregar registro” en una colección (por ejemplo, artículos) para insertar nuevos datos ver o actualizar registros haz clic en un registro para inspeccionar o modificar sus campos eliminar registros usa la opción de eliminar para quitar entradas obsoletas esta interfaz simplificada hace que la gestión de datos sea directa y eficiente paso 4 – conectando next js a back4app con tu backend configurado, el siguiente paso es conectar tu aplicación next js opción a usando el sdk de parse instala el sdk de parse npm install parse inicializa parse en tu aplicación next js crea un archivo (por ejemplo, lib/parseconfig js ) // lib/parseconfig js import parse from 'parse'; // replace with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integra parse en una página de next js por ejemplo, crea una página para obtener y mostrar elementos // pages/index js import { useeffect, usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function home() { const \[items, setitems] = usestate(\[]); useeffect(() => { const loaditems = async () => { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error('error retrieving items ', error); } }; loaditems(); }, \[]); return ( \<div style={{ padding '2rem' }}> \<h1>item list\</h1> \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item get('title')}\</strong> {item get('description')} \</li> ))} \</ul> \</div> ); } opción b usando rest o graphql si prefieres no usar el sdk de parse, puedes gestionar operaciones crud con rest o graphql por ejemplo, para obtener artículos a través de rest const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integra estas llamadas a la api en tus componentes de next js según sea necesario paso 5 – asegurando tu backend implementando listas de control de acceso (acls) asegura tus datos asignando acls a los objetos por ejemplo, para crear un artículo al que solo su propietario pueda acceder async function addprivateitem(itemdetails, owner) { const items = parse object extend('items'); const newitem = new items(); newitem set('title', itemdetails title); newitem set('description', itemdetails description); // configure acl owner only read and write const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); newitem setacl(acl); try { const saveditem = await newitem save(); console log('private item added ', saveditem); } catch (error) { console error('error adding item ', error); } } configurando permisos a nivel de clase (clps) dentro del panel de control de back4app, ajusta los clps para cada colección para restringir el acceso a los datos solo a usuarios autorizados paso 6 – implementando la autenticación de usuarios configurando cuentas de usuario back4app aprovecha la clase de usuario incorporada de parse para la autenticación en tu aplicación next js, gestiona el registro y el inicio de sesión como se muestra a continuación // pages/signup js import { usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function signup() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const registeruser = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration failed ' + error message); } }; return ( \<form onsubmit={registeruser}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ); } un enfoque similar se puede utilizar para la gestión de inicio de sesión y sesiones también puedes habilitar características adicionales como inicios de sesión sociales, verificación de correo electrónico y recuperación de contraseña a través del panel de control de back4app paso 7 – desplegando tu frontend de next js las opciones de despliegue de back4app te permiten alojar tu aplicación de next js sin esfuerzo, ya sea a través de la integración con github o la contenedorización con docker 7 1 construyendo tu versión de producción abre tu directorio de proyecto en la terminal ejecuta el comando de construcción npm run build esto genera una next carpeta que contiene archivos estáticos y renderizados en el servidor optimizados 7 2 organizando y subiendo tu código tu repositorio debe contener todos los archivos fuente para tu aplicación de next js una estructura típica podría ser basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md ejemplo lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ejemplo pages/index js (consulta el fragmento de código proporcionado en el paso 4) comprometiendo tu código a github inicializa un repositorio de git git init agrega todos los archivos git add confirma tus cambios git commit m "initial commit of next js crud application" crea un repositorio de github por ejemplo, nómbralo basic crud app nextjs sube tu código git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 integración con el despliegue web de back4app acceder al despliegue web inicie sesión en su panel de back4app, navegue a su proyecto y seleccione la función de despliegue web conectar su cuenta de github siga las instrucciones para vincular su repositorio seleccionar su repositorio y rama elija el repositorio (por ejemplo, basic crud app nextjs ) y la rama (por ejemplo, main ) que contiene su código 7 4 configuración de los ajustes de despliegue comando de construcción si su repositorio no incluye una carpeta preconstruida next , especifique el comando (por ejemplo, npm run build ) directorio de salida establezca el directorio de salida en next para que back4app sepa dónde se encuentran sus archivos compilados variables de entorno agregue cualquier variable de entorno necesaria, como claves api 7 5 contenerizando tu aplicación next js con docker si prefieres docker para el despliegue, incluye un dockerfile en tu repositorio # use an official node runtime as the base image from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the source code copy \# build the next js application run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/ next /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] selecciona la opción de despliegue de docker en back4app para contenerizar y desplegar tu aplicación 7 6 lanzando tu aplicación despliega tu aplicación haz clic en el desplegar botón en back4app monitorea el proceso de construcción back4app obtendrá tu código, ejecutará el comando de construcción y desplegará tu aplicación accede a tu aplicación en vivo una vez que se complete el despliegue, se proporcionará una url donde se aloja tu aplicación next js 7 7 verificando tu despliegue visita la url proporcionada abre la url en tu navegador prueba la funcionalidad asegúrate de que tus páginas se carguen correctamente y que todas las operaciones crud estén funcionando soluciona problemas si es necesario utiliza las herramientas de desarrollador del navegador y los registros de back4app para diagnosticar cualquier problema paso 8 – conclusión y próximos pasos ¡felicidades! has construido con éxito una robusta aplicación crud con next js y back4app configuraste tu proyecto, diseñaste colecciones personalizadas y conectaste tu frontend de next js con un backend seguro próximos pasos mejora tu frontend expande tu aplicación next js con características avanzadas como vistas detalladas, funcionalidad de búsqueda o actualizaciones en tiempo real aumenta tu backend explora funciones en la nube, integraciones de terceros o controles de acceso adicionales sigue aprendiendo visita la documentación de back4app https //www back4app com/docs y recursos de next js para más optimización y personalización al seguir este tutorial, ahora posees las habilidades para crear una aplicación crud escalable y segura utilizando next js y back4app ¡feliz codificación!