Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Interactuar con una base de datos PostgreSQL o cualquier otra base de datos aumenta directamente la cantidad de SQL que escribe. Esto puede presentar problemas de seguridad, como ataques de inyección SQL, y limita la portabilidad de su base de datos. Es recomendable utilizar un ORM (Object Relation Mapper) como Prisma que proporciona una capa de abstracción encima de su base de datos.

Aprenda a usar Prisma en Next.js para conectarse e interactuar con una base de datos PostgreSQL.

Creación de una aplicación Next.js

Antes de crear una aplicación Next.js, asegúrese de tener Nodo y npm instalados en su entorno de desarrollo.

Cree una aplicación Next.js llamada prisma-next ejecutando este comando en su terminal:

npx crear-siguiente-aplicación prisma-siguiente

Esto creará un nuevo directorio llamado prisma-next con archivos básicos para comenzar.

Navegue hasta el directorio prisma-next e inicie el servidor de desarrollo con este comando:

instagram viewer 
npm ejecutar dev

Esto inicia un servidor de desarrollo en http://localhost: 3000.

Estos son los pasos básicos para crear una nueva aplicación Next.js. Puede obtener más información sobre las funciones de Next.js consultando este artículo sobre por qué migrar a Next.js.

Instalación del Cliente Prisma

Para empezar a usar prisma, necesitará los paquetes prisma y @prisma/client. prisma es la herramienta CLI de Prisma, mientras que @prisma/client es un generador de consultas generado automáticamente que lo ayudará a consultar su base de datos.

Instale estos dos paquetes a través de npm.

npm instalar prisma @prisma/cliente

Luego, inicialice prisma ejecutando el comando npx prisma init en la terminal.

inicio prisma npx

Esto generará un nuevo archivo llamado esquema.prisma que contiene el esquema de la base de datos y un .env archivo al que agregará la URL de conexión de la base de datos.

Agregar la URL de conexión

Necesita una URL de conexión para conectar prisma a su Base de datos PostgreSQL. El formato general para una URL de conexión es este:

postgres://{nombre de usuario}:{contraseña}@{nombre de host}:{puerto}/{nombre de la base de datos}

Reemplace los elementos entre corchetes con los detalles de su propia base de datos y luego guárdelos en el archivo .env:

DATABASE_URL = "su cadena de conexión"

Luego, en schema.prisma, especifique la URL de conexión de la base de datos:

fuente de datos db {
 proveedor = "PostgreSQL"
 url = env("DATABASE_URL")
}

Definición del esquema de la base de datos

El esquema de la base de datos es una estructura que define el modelo de datos de su base de datos. Especifica las tablas, las columnas y las relaciones entre las tablas de la base de datos, así como las restricciones y los índices que debe utilizar la base de datos.

Para crear un esquema para una base de datos con una tabla de usuarios, abra el archivo schema.prisma y agregue un modelo de usuario.

usuario modelo {
 id Cadena @default (cuid()) @id
 nombre Cadena?
 cadena de correo electrónico @unique
}

El modelo de usuario tiene una columna de identificación que es la clave principal, una columna de nombre de tipo cadena y una columna de correo electrónico que debe ser única.

Después de definir el modelo de datos, debe implementar su esquema en la base de datos utilizando el npx prisma dbempujar dominio.

empuje npx prisma db

Este comando crea las tablas reales en la base de datos.

Usando Prisma en Next.js

Para usar Prisma en Next.js, debe crear una instancia de cliente prisma.

Primero, genere el cliente Prisma.

npx prisma generar

Luego, cree una nueva carpeta llamada lib y agregue un nuevo archivo llamado prisma.js en ella. En este archivo, agregue el siguiente código para crear una instancia de cliente prisma.

importar { Cliente Prisma } de"@prisma/cliente";
dejar prisma;
si (tipo deventana"indefinido") {
si (proceso.env. NODE_ENV "producción") {
 prisma = nuevo ClientePrisma();
 } demás {
si (!global.prisma) {
 global.prisma = nuevo ClientePrisma();
 }


 prisma = global.prisma;
 }
}
exportarpor defecto prisma;

Ahora, puede importar el cliente prisma como "prisma" en sus archivos y comenzar a consultar la base de datos.

Consultar la base de datos en una ruta API Next.js

Prisma generalmente se usa en el lado del servidor, donde puede interactuar de manera segura con su base de datos. En una aplicación Next.js, puede configurar una ruta API que use Prisma para obtener datos de la base de datos y devolverlos al cliente. Luego, las páginas o los componentes pueden obtener datos de la ruta API mediante un Biblioteca HTTP como Axios o fetch.

Cree la ruta API abriendo la carpeta pages/api y creando una nueva subcarpeta llamada db. En esta carpeta, cree un archivo llamado crearusuario.js y agregue la siguiente función de controlador.

importar prisma de"@/lib/prisma";
exportarpor defectoasíncronofunciónmanipulador(requerimiento, res) {
constante { nombre, correo electrónico } = req.consulta;


intentar {
constante newUer = esperar prisma. Usuario.crear({
 datos: {
 nombre,
 correo electrónico,
 },
 });
 res.json({ usuario: newUer, error: nulo });
 } atrapar (error) {
 res.json({ error: mensaje de error, usuario: nulo });
 }
}

Esta función obtiene el nombre y el correo electrónico del cuerpo de la solicitud. Luego, en el bloque try/catch, utiliza el método de creación proporcionado por Prisma Client para crear un nuevo usuario. La función devuelve un objeto JSON que contiene el usuario y el mensaje de error, si lo hubiera.

En uno de sus componentes, ahora puede realizar una solicitud a esta ruta API. Para demostrarlo, cree una nueva carpeta llamada perfil en el directorio de la aplicación y agregue un nuevo archivo llamado page.js. Luego agregue un formulario simple que contenga dos cuadros de entrada para el nombre y el correo electrónico y un botón de envío.

En el formulario, agregue un evento de envío que llame a una función llamada handleSubmit. El formulario debería verse así:

"usar cliente";
importar Reaccionar, { estado de uso } de"reaccionar";
exportarpor defectofunciónPágina() {
constante [nombre, nombre del conjunto] = useState("");
constante [email, setemail] = useState("");


constante manejarEnviar = asíncrono (e) => {
 e.preventDefault();
 };


devolver (




 tipo = {texto}
 marcador de posición ="Añadir nombre"
 valor={nombre}
 onChange={nombre del conjunto((mi) => e.objetivo.valor)}
 />


 tipo = {texto}
 marcador de posición ="Añadir correo electrónico"
 valor = {correo electrónico}
 onChange={setmail((mi) => e.objetivo.valor)}
 />

En la función handleSubmit, use el método fetch para realizar una solicitud a la ruta /api/db/createuser.

constante manejarEnviar = asíncrono (e) => {
 e.preventDefault();
constante usuario = esperar buscar("/api/db/createuser", {
 Tipo de contenido: "aplicación/json",
 cuerpo: JSON.stringify({nombre, correo electrónico}),
 });
};

Ahora, cuando se envíe el formulario, Prisma creará un nuevo registro de usuario en la tabla Usuario.

Hacer más con Prisma

Puede usar Prisma para conectarse y consultar una base de datos PostgreSQL desde una aplicación Next.js.

Además de agregar nuevos registros a la base de datos, también puede ejecutar otros comandos SQL. Por ejemplo, puede eliminar filas, seleccionar filas en función de condiciones específicas e incluso actualizar los datos existentes almacenados en la base de datos.