Optimizar el flujo de trabajo de desarrollo de un proyecto es importante para realizar entregas más rápidas y mejores. En este artículo, explorará cómo configurar un entorno de desarrollo local óptimo para un proyecto Next.js utilizando   Postgres e implementándolo en   . Neon Vercel    una aplicación CRUD que muestra una lista de detalles del usuario de una base de datos. El énfasis está en las mejores prácticas y opiniones; por lo tanto, el artículo cubrirá el desarrollo y la implementación local, la ramificación y los entornos al examinar  Con más detalle, cubriremos:  Configuración de un proyecto Neon Postgres para el desarrollo local  Cómo implementar un proyecto Next.js en Vercel usando la CLI de Vercel  Cómo utilizar las funciones de borde de Vercel para mejorar las operaciones en tiempo de ejecución y obtener una respuesta más rápida a las solicitudes  Cómo proteger la base de datos Neon de ataques de inyección SQL.  Ramificación de base de datos en Neon.  Prerrequisitos  Los requisitos para seguir esta guía son los siguientes:  Competencia con  Next.js.  Una  cuenta Neon  Una cuenta  de Vercel  Una vez aclarado esto, trabajemos en las configuraciones del proyecto para Neon y Vercel.  Cómo configurar un proyecto Neon Postgres    es un Postgres sin servidor que separa la computación del almacenamiento. Ofrece funciones modernas para desarrolladores, como escalado automático, ramificación y restauración en un momento determinado, lo que permite un desarrollo escalable y más rápido. Neon  Crea una cuenta gratuita de Neon si aún necesitas hacerlo. Una vez que hayas terminado, Neon te redireccionará a una página de configuración del proyecto, donde deberás proporcionar un nombre de proyecto y de base de datos, una versión de Postgres y una región (recomendamos seleccionar una cercana a tu ubicación) destinada al proyecto.   Neon proporciona una herramienta CLI para la integración con su entorno local, pero este artículo utilizará Neon a través de su interfaz web para ciertas operaciones.  Una vez que haya creado su proyecto, copie la cadena de conexión agrupada de la interfaz de Neon Dashboard y péguela en un archivo   dentro de su proyecto Next.js.  .env.production  Hablando del proyecto Next.js, este artículo utilizará un proyecto Next.js actualmente en funcionamiento que contiene una tabla de datos de   . ShadcnUI  Para obtener este proyecto, clone este   en su máquina local usando el comando. repositorio   git clone https://github.com/muyiwexy/dev_env_hackmamba.git  Una vez que hayas clonado el repositorio, crea un archivo   para alojar las variables de entorno en el directorio principal del proyecto y pega la cadena de conexión. Debería verse así: .env.production   DATABASE_URL = 'postgresql://neondb_owner:**************-withered-sea-a5nyklf9.us-east-2.aws.neon.tech/neondb?sslmode=require'  A continuación, diríjase al editor SQL de Neon en el panel de control de Neon. Aquí, puede pegar comandos SQL para realizar acciones específicas necesarias para su proyecto. Copie y pegue el siguiente comando en el editor para crear una tabla SQL con algunos campos obligatorios:   CREATE TABLE user_details ( member_number VARCHAR(10) PRIMARY KEY, created_at VARCHAR, name VARCHAR(100), email VARCHAR(255), phone_number VARCHAR(15), gender VARCHAR(10), zone VARCHAR(50), service_unit VARCHAR(100), conference_shirt VARCHAR(5), fee_payment VARCHAR(20), paid BOOLEAN );  Nota: Puede encontrar este comando en el archivo   dentro de la plantilla Next.js proporcionada anteriormente.  /sql/user_data.sql  Puede consultar la sección   en cualquier momento para confirmar si la tabla recién creada está disponible. Ahora que tiene esa información, implementará su aplicación en Vercet. Puede hacerlo a través de la interfaz de usuario web de Vercel, pero utilizaremos la CLI de Vercel para este tutorial. Tablas  Implementación de su aplicación Next.js en Vercel  Sin perder mucho tiempo, dirígete a tu terminal y pega el siguiente comando:   npm i -g vercel  Nota: Los usuarios de Mac pueden recibir a veces un error de acceso denegado, por lo que deben anteponer la palabra clave   al comando. sudo  El comando instala la CLI globalmente, lo que permite un fácil acceso a la CLI en cualquier lugar de su máquina local.  El siguiente paso es iniciar sesión en su cuenta de Vercel mediante la CLI. Para ello, pegue el siguiente comando en su terminal:   vercel login  Continúe seleccionando su proveedor de registro de Vercel de la lista, autentificándose y buscando el mensaje de éxito en la página de confirmación.   A continuación, implementará su programa en Vercel usando el siguiente comando:   vercel  Este proceso implica varios pasos para configurar la implementación. Para garantizar la uniformidad, siga las opciones que aparecen en la imagen siguiente.   Nota: Después de la compilación, puede verificar la implementación para confirmar si su aplicación se está ejecutando como se esperaba.  A continuación, este artículo mostrará cómo utilizar una función de Vercel Edge para recuperar información del usuario de una base de datos Neon.  Creación de una función de borde Vercel    mejoran el rendimiento. Son funciones de JavaScript o TypeScript que son más eficientes y rápidas que la computación sin servidor tradicional debido a sus operaciones de ejecución más eficientes. Las funciones Vercel Edge  Regrese a su proyecto clonado y cree un archivo   dentro del directorio   . Para ejecutar esta función en el borde, especifique un entorno de ejecución en la base de código de la siguiente manera: /api/route.ts /app   import { NextRequest, NextResponse } from "next/server"; export const runtime = "edge"; export async function GET(req: NextRequest, res: NextResponse) { return NextResponse.json({ message: "Hello from the Edge!" }); }  Antes de continuar, instalará el   ,   y el paquete   usando el comando: controlador sin servidor Neon Zod sqlstring   npm install @neondatabase/serverless zod sqlstring  Además, debes instalar los tipos   como una dependencia de desarrollo usando el siguiente comando. sqlstring   npm i --save-dev @types/sqlstring -D  Puede probar si hay una conexión exitosa a su base de datos reemplazando el código en el archivo   con el código a continuación: /api/route.ts   import { NextRequest, NextResponse } from "next/server"; import { Pool } from "@neondatabase/serverless"; export const runtime = "edge"; export async function GET(req: NextRequest) { const pool = new Pool({ connectionString: process.env.DATABASE_URL, }); const sql = ` SELECT NOW(); `; const { rows } = await pool.query(sql); const now = rows[0]; await pool.end(); return NextResponse.json( { now }, { status: 200, } ); }  Debería obtener una respuesta como la imagen a continuación cuando acceda a la ruta   en el navegador.  /api  El siguiente paso es agregar la cadena de conexión de la base de datos a las variables de entorno de Vercel. Para ello, utilice la CLI de Vercel y agregue esta cadena con el comando:   vercel env add  Sigue las indicaciones para agregar el nombre de la variable (te recomendamos que uses el nombre en tu   ) y el valor (el valor debe ser la cadena en sí). A continuación, selecciona el entorno en el que deseas utilizar la variable entre producción, vista previa y desarrollo. .env.production  Nota: Exploraremos la ramificación más adelante, por lo que no es necesario crear múltiples cadenas de conexión.  Ahora que ha agregado la URL de su base de datos a su proyecto, vuelva a implementarla usando el comando:   Vercel  En la siguiente sección, podrás enviar algunos datos a Neon mediante una solicitud POST desde la ruta API de tu función.  Envío de datos a Neon  Es difícil comprender cualquiera de estos conceptos sin trabajar con datos. Por lo tanto, enviemos algunos datos ficticios a una base de datos Neon. Esta sección cubrirá la inyección SQL y la prevención de ataques en la base de datos mediante   . También analizaremos la ramificación de la base de datos, que nos brinda más flexibilidad y protege la credibilidad de su rama de producción. Zod  Exploremos esta función   para procesar una solicitud HTTP POST pegando el código a continuación en    del controlador de ruta API /api/route.ts .   export async function POST(req: any) { try { const data = await req.json(); const { member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid, } = schema.parse(data); const sql = sqlstring.format( ` INSERT INTO user_details ( member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid ) VALUES (?,?,?,?,?,?,?,?,?,?,?) `, [ member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid, ] ); console.log("sql", sql); await pool.query(sql); await pool.end(); return NextResponse.json(data); } catch (error) { console.error("Error processing request:", error); return NextResponse.json( { message: "Failed to save user details" }, { status: 500 } ); } }  Esta función Edge desestructura los valores del formulario con estos detalles:   desde el JSON de la solicitud. A continuación, valida los datos del formulario con   . Para ello, pega el código siguiente en  member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid Zod /api/route.ts   const schema = zod.object({ member_number: zod.string().min(5).max(12), created_at: zod.string(), name: zod.string().min(1, "Name is required").max(100, "Name is too long"), email: zod .string() .email("Invalid email format") .min(5, "Email is too short") .max(100, "Email is too long"), phone_number: zod .string() .min(7, "Phone number is too short") .max(15, "Phone number is too long"), gender: zod .string() .min(1, "Gender is required") .max(6, "Gender is too long"), zone: zod.string().min(1, "Zone is required").max(50, "Zone is too long"), service_unit: zod .string() .min(1, "Service Unit is required") .max(50, "Service Unit is too long"), conference_shirt: zod .string() .min(1, "Conference shirt size is required") .max(5, "Conference shirt size is too long"), fee_payment: zod .string() .min(1, "Fee Payment info is required") .max(50, "Fee Payment info is too long"), paid: zod.boolean(), });  El código anterior define un esquema que describe la estructura y las reglas de validación de un objeto que representa los datos del formulario. Ahora, puede realizar una consulta   a la base de datos correctamente. INSERT  Debería verse como la imagen a continuación cuando revise su base de datos.   De forma rápida y sencilla, puedes completar tu base de datos de Neon. La pregunta ahora es: ¿qué pasa si se trata de una base de datos de producción? No es aconsejable utilizar datos de prueba en un entorno de producción. Neon ha evolucionado para permitirnos   (similares a cómo funcionan las ramas de GitHub) para tu base de datos. Ahora, puedes probar y desarrollar tu aplicación rápidamente sin inconvenientes ni temor a contaminar la base de datos de producción. crear ramas  En la siguiente sección, este artículo explorará   . la ramificación de bases de datos con Neon  Ramificación de bases de datos en Neon  Dirígete a la sección   en la consola de Neon y selecciona   . Debes nombrar una rama con la rama principal como padre al crearla. Algo que nos llamó la atención fue que nos permitía poner los datos que queríamos en la rama por período, lo que garantizaba más flexibilidad.  Ramas Crear rama  Después de crear una rama, recibirás una cadena de conexión, tal como lo hiciste al crear un proyecto; asegúrate de guardarla en un lugar seguro.   Recuerde, esta rama es una base de datos separada con datos reales como la rama principal.  Para utilizar esta nueva cadena de conexión de base de datos, cree un archivo   similar al archivo   que creó y configure la credencial   con la cadena de conexión como su valor. .env.local .env.production DATABASE_URL  Next.js detecta automáticamente qué archivo de entorno utilizar durante el desarrollo o la producción.  Cuando prueba la tabla de la rama de la base de datos con datos nuevos, puede compararla con la rama de producción.   Puede realizar tantas modificaciones en la rama como desee, como cambiar el esquema de la tabla o eliminar datos.  Conclusión  El desarrollo puede ser complicado, pero con las herramientas que ofrece Neon Postgres, crear aplicaciones escalables y confiables es más rápido. Este artículo proporcionó una guía detallada sobre cómo configurar un entorno de desarrollo local con Neon e implementarlo en Vercel. Cubrimos aspectos esenciales como configuraciones de desarrollo local, procesos de implementación, ramificaciones y administración de diferentes entornos. Continúe con el desarrollo de aplicaciones con esta configuración; nos encantaría saber cómo va.  Puedes consultar el proyecto completo en   . GitHub

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

¿Está creando una aplicación web? Este método lo hace más rápido, seguro e inteligente

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

El modelo Bitcoin UTXO, impulsando un ecosistema único

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

El modelo Bitcoin UTXO, impulsando un ecosistema único

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps