Create your next application
npx create-next-app@latest
Install Prisma
npm install prisma --save-dev
Initialize Prisma project
npx prisma init
Add your postgres link to your .env file. Make sure that everything is on the same line.
DATABASE_URL="postgresql:blahblahblah"
Create your database schema in the prisma.schema file
// schema.prisma
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Post {
id String @default(cuid()) @id
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId String?
}
model User {
id String @default(cuid()) @id
name String?
email String? @unique
createdAt DateTime @default(now()) @map(name: "created_at")
updatedAt DateTime @updatedAt @map(name: "updated_at")
posts Post[]
@@map(name: "users")
}
Push the schema to your database
npx prisma db push
Install prisma client
`npm install @prisma/client'
Updata your prisma client
`npx prisma generate'
Create a new directory called lib and a prisma.js file in it.
In the prisma.js file you have to create an instance of the Prisma client.
Then you can import your instance of the Prisma client into any file you need. Then you create a getServerSideProps function to query the data. Then you can display those props however you want.
import prisma from '../lib/prisma';
import React from "react"
export const getServerSideProps = async () => {
const feed = await prisma.post.findMany({
where: { published: true },
include: {
author: {
select: { name: true },
},
},
});
return { props: { feed } };
}
const Blog = ({feed}) => {
console.log(feed)
return (
<div>
{feed[0].title}
</div>
)
}
export default Blog
My next post might be on creating a REST API with Prisma.
Latest comments (0)