Nextjs y Prisma ORM desde Cero usando Typescript
Nextjs y Prisma ORM son dos herramientas muy populares en el desarrollo web moderno. Nextjs es un framework de React que permite crear aplicaciones web de forma rápida y eficiente, mientras que Prisma ORM es una capa de abstracción de la base de datos que facilita el acceso y manipulación de los datos.
En este artículo, vamos a aprender cómo utilizar Nextjs y Prisma ORM desde cero, utilizando Typescript para mejorar la seguridad y legibilidad de nuestro código.
Instalación de Nextjs
Lo primero que debemos hacer es instalar Nextjs en nuestro proyecto. Para ello, abrimos una terminal y ejecutamos el siguiente comando:
npx create-next-app@latest mi-proyecto
Esto creará un nuevo proyecto de Nextjs con la configuración inicial necesaria.
Instalación de Prisma ORM
Una vez que tenemos nuestro proyecto de Nextjs creado, podemos instalar Prisma ORM utilizando el siguiente comando:
npm install @prisma/client
Esto instalará Prisma ORM y nos permitirá conectar nuestra aplicación con la base de datos.
Configuración de Prisma ORM
Para configurar Prisma ORM, debemos crear un archivo de configuración llamado prisma/schema.prisma en la raíz de nuestro proyecto. En este archivo, definiremos los modelos de datos y la conexión a la base de datos:
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model User {
id Int @id @default(autoincrement())
email String
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
body String?
author User @relation(fields: [authorId], references: [id])
authorId Int
}
Uso de Prisma ORM en Nextjs
Una vez que tenemos Prisma configurado, podemos utilizarlo en nuestra aplicación Nextjs para acceder a la base de datos. Para ello, primero debemos generar el cliente de Prisma ejecutando el siguiente comando:
npx prisma generate
Esto generará el cliente de Prisma que nos permitirá acceder a la base de datos desde nuestra aplicación. Luego, podemos utilizar este cliente en nuestros controladores para realizar consultas y modificaciones en la base de datos.
Conclusión
En este artículo, hemos aprendido cómo utilizar Nextjs y Prisma ORM desde cero, utilizando Typescript para mejorar la seguridad y legibilidad de nuestro código. Con estas herramientas, podemos crear aplicaciones web modernas de forma rápida y eficiente, con acceso a una base de datos de forma sencilla y segura.
Desplegue en Railway de esta aplicación ➡ https://youtu.be/bOo9A20bd4M
Gracias Fazt, tremendo tutorial. Invaluable como todas tus enseñanzas. Como dicen por ahí, genio no es el que mas lee, genio es el que mas enseña!!!!, Gracias….. Una pregunta como sacaste el símbolo de diferente en el min 12:09 if (process.env.NODE <simbolo> 'production').
Saludos Fazt! Como puedo hacerme miembro del canal?
Hola Fazt, me encanto el video me dio una idea de usar para un demo de portafolio que estoy haciendo para la uni con una seccion de entradas de blogs, solo un pedido si el proximo video o algun otro ejemplo que vayas hacer hagas más enfasis o un ejemplo del Context de React, realmente me está costado un poco entenderlo, lo demás todo fino, solo esa parte se me hizo demasiado denso y un poco que me perdí. Saludos!
El nuevo next13 hace cache a los fetch por default 54:45 , puedes agregar un parametro fetch(`https://…`, { cache: 'no-store' }) para que recargue con nueva informacion
Cuando hago la petición get en 27:55 me da este error:
RequestContentLengthMismatchError: Request body length does not match content-length header
code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
Creo que hice todo igual al tutorial, igualmente yo estoy usando planetscale.
Si me ayudan, muchisimas gracias.
Genial buen video, para cuando tengas tiempo un video de maestro detalle utilizando prisma utillizando relaciones de muchos a uno estimado seria genial
Gracias por usar Next y ts conb mas tecnologias , me permite practicas ts , un poco de react sumado a Next con mas tecnologias y expandir mi conocimiento en lo que pongo en practica lo que he ido aprendiendo en tus videos anteriores , Gracias Fazt !
Tengo un pregunta, si el contexto lleva el "use client", se supone que todos sus hijos serian de tipo cliente? I si toda la app esta enviealta en el conteto, pues toda la aplicacion seria de tipo client?
Muchas gracias Fazt eres un crack, de casualidad no tienes un tutorial usando next, prisma, graphql y apollo usando typescript?
Hola muchas gracias por toda esta info aprendí mucho! Una recomendación también podría ser ya que estás usando prisma aprovechar los types que ya te genera prisma al hacer las migraciones o con el prisma generate para importarlos y no tener que andar recreándolos, así sólo omites los que haga falta con el método que mostraste, nuevamente gracias y saludos!
llevo 30 segundos y ya estoy perdido :D. Tenia entendido que con Prisma no podías conectar a varias bbdd distintas…por eso lo tenia descartado en mis proyectos.
bro algun video de micro servicios con java
Haz un video de mikroORM <3
Genial tutorial Fazt! Cuál es tu tema de vscode?
Muchas gracias fazt! Un saludo <3
Buenas Fazt , excelente proyecto !
La web de producción tiene notas raras, revisala
Hola fazt eres un genio gracias a ti he podido solucionar varios errores de programación y además aprender muchas otras cosas