Creación de una potente aplicación CRUD con Next.js y Vercel Postgres

Siguiente.js es un marco popular de código abierto para crear aplicaciones web estáticas y renderizadas del lado del servidor utilizando React. Proporciona un entorno eficiente y fácil de desarrollar para crear proyectos web rápidos y escalables.

Con Next.js, puedes manejar fácilmente el enrutamiento, renderizado del lado del servidory Rutas APIentre otras características.

Vercel Postgres

Vercel Postgres es un administrado PostgreSQL Servicio de base de datos proporcionado por Vercel, los creadores de Next.js. Ofrece una solución de base de datos totalmente administrada y escalable que se integra perfectamente con los proyectos de Next.js. Algunos beneficios de utilizar Vercel Postgres incluyen:

• Facilidad de uso: Vercel Postgres simplifica la configuración y administración de bases de datos PostgreSQL, lo que permite a los desarrolladores concentrarse en crear sus aplicaciones.
• Escalado automático: Vercel Postgres maneja automáticamente el escalado según las necesidades de su aplicación, lo que garantiza un rendimiento y disponibilidad óptimos.
• Alta seguridad: Vercel Postgres proporciona funciones de seguridad sólidas, incluido el cifrado en reposo y en tránsito, lo que garantiza la seguridad de sus datos.
• Copias de seguridad y recuperación de datos: Vercel Postgres realiza copias de seguridad de sus datos con regularidad y le permite restaurarlos fácilmente en caso de problemas inesperados.
• Integración con Vercel: Vercel Postgres se integra perfectamente con la plataforma de implementación de Vercel, lo que facilita la implementación y administración de sus aplicaciones Next.js con una base de datos PostgreSQL.

Acerca de este tutorial

Crear una aplicación CRUD con Next.js y Vercel Postgres implica varios pasos. Este tutorial lo guiará a través de la configuración de un proyecto Next.js, su conexión a una base de datos Vercel Postgres y la implementación de operaciones de creación, lectura, actualización y eliminación (CRUD).

Antes de comenzar, asegúrese de tener Node.js instalado en su máquina.

1. Configurando el proyecto Next.js

1. Crear una aplicación Next.js: Correr npx create-next-app your-app-name en su terminal para crear un nuevo proyecto Next.js.
2. Navega a la carpeta de tu proyecto: Ingresar cd your-app-name para pasar al directorio de su proyecto.
3. Instalar los paquetes necesarios: Correr npm install para instalar dependencias.

2. Configuración de Vercel Postgres

1. Regístrate en Vercel: Si no tienes una cuenta, regístrate en Sitio web de Vercel.
2. Crear una nueva base de datos de Postgres: En su panel de Vercel, cree una nueva base de datos de Postgres. Tenga en cuenta los detalles de conexión proporcionados, incluido el host, el nombre de la base de datos, el usuario y la contraseña.
3. Instalar pg (cliente PostgreSQL para Node.js): Correr npm install pg en su proyecto Next.js para interactuar con su base de datos Postgres.

3. Configurar variables de entorno

1. Configurar variables de entorno: En su proyecto Next.js, cree un .env.local archivo y agregue los detalles de conexión de su base de datos como este:

DATABASE_URL="postgres://YourUser:YourPassword@YourHost:YourPort/YourDatabase"

4. Implementación de operaciones CRUD

A. Crear una conexión de base de datos

1. Crear un nuevo archivo para la conexión a la base de datos: En su proyecto, cree un archivo llamado db.js.
2. Configurar la conexión:

const { Pool } = require('pg');
const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
});

module.exports = pool;

B. Crear (POST)

1. Crear una nueva ruta API: En el pages/api directorio, cree un archivo para su operación de creación, por ejemplo, create.js.
2. Implementar el método POST:

import pool from '../../db';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { yourDataFields } = req.body;
    try {
      const result = await pool.query('INSERT INTO yourTableName (column1, column2) VALUES ($1, $2) RETURNING *', [yourDataFields.column1, yourDataFields.column2]);
      res.status(200).json(result.rows[0]);
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  }
}

C. Leer (OBTENER)

1. Cree una nueva ruta API para leer datosp.ej, read.js.
2. Implementar el método GET:

import pool from '../../db';

export default async function handler(req, res) {
  try {
    const result = await pool.query('SELECT * FROM yourTableName');
    res.status(200).json(result.rows);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

D. Actualización (PUT)

1. Cree una nueva ruta API para actualizar datosp.ej, update.js.
2. Implementar el método PUT:

import pool from '../../db';

export default async function handler(req, res) {
  if (req.method === 'PUT') {
    const { id, updatedData } = req.body;
    try {
      const result = await pool.query('UPDATE yourTableName SET column1 = $1, column2 = $2 WHERE id = $3 RETURNING *', [updatedData.column1, updatedData.column2, id]);
      res.status(200).json(result.rows[0]);
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  }
}

E. Eliminar (ELIMINAR)

1. Cree una nueva ruta API para eliminar datosp.ej, delete.js.
2. Implementar el método DELETE:

import pool from '../../db';

export default async function handler(req, res) {
  if (req.method === 'DELETE') {
    const { id } = req.body;
    try {
      await pool.query('DELETE FROM yourTableName WHERE id = $1', [id]);
      res.status(200).json({ message: 'Deleted successfully' });
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  }
}

Conclusión

Next.js es un marco de código abierto para crear aplicaciones web estáticas y renderizadas en el lado del servidor utilizando React. Vercel Postgres es un servicio de base de datos PostgreSQL administrado proporcionado por Vercel, que ofrece facilidad de uso, escalamiento automático, alta seguridad, copias de seguridad de datos e integración con la plataforma de implementación de Vercel.

Este tutorial lo guía a través de la configuración de un proyecto Next.js, su conexión a Vercel Postgres y la implementación de operaciones CRUD. Los pasos incluyen la creación de una aplicación Next.js, la configuración de Vercel Postgres, la configuración de variables de entorno y la implementación de operaciones de creación, lectura, actualización y eliminación mediante rutas API y un cliente PostgreSQL para Node.js.