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

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 Neon Postgres e implementándolo en Vercel .

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 una aplicación CRUD que muestra una lista de detalles del usuario de una base de datos.

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

Neon 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.

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 .env.production dentro de su proyecto Next.js.

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 repositorio en su máquina local usando el comando.

 git clone https://github.com/muyiwexy/dev_env_hackmamba.git

Una vez que hayas clonado el repositorio, crea un archivo .env.production para alojar las variables de entorno en el directorio principal del proyecto y pega la cadena de conexión. Debería verse así:

 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 /sql/user_data.sql dentro de la plantilla Next.js proporcionada anteriormente.

Puede consultar la sección Tablas 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.

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 sudo al comando.

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

Las funciones Vercel Edge 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.

Regrese a su proyecto clonado y cree un archivo /api/route.ts dentro del directorio /app . Para ejecutar esta función en el borde, especifique un entorno de ejecución en la base de código de la siguiente manera:

 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 controlador sin servidor Neon , Zod y el paquete sqlstring usando el comando:

 npm install @neondatabase/serverless zod sqlstring

Además, debes instalar los tipos sqlstring como una dependencia de desarrollo usando el siguiente comando.

 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 /api/route.ts con el código a continuación:

 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 /api en el navegador.

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 .env.production ) 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.

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 Zod . 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.

Exploremos esta función del controlador de ruta API para procesar una solicitud HTTP POST pegando el código a continuación en /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: member_number, created_at, name, email, phone_number, gender, zone, service_unit, conference_shirt, fee_payment, paid desde el JSON de la solicitud. A continuación, valida los datos del formulario con Zod . Para ello, pega el código siguiente en /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 INSERT a la base de datos correctamente.

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 crear ramas (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.

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 Ramas en la consola de Neon y selecciona Crear rama . 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.

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 .env.local similar al archivo .env.production que creó y configure la credencial DATABASE_URL con la cadena de conexión como su valor.

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 .