A simple contact application on how to integrate Prisma" into a
NextJs` application.
- HTML5
- Tailwind CSS
- NextJs
- React
- Typescript
- Prisma
- Sqlite
-
Run
npm install
to install the required dependencies. -
I have used a custom port, so run your server with
npm run dev -- -p 3200
. You can change to a port number of your choice by changing"dev:" "next dev -p [your_port_number]"
the in thepackage.json
file. -
Open http://localhost:3200 with your browser to see the result.
-
You can start editing the page by modifying
pages/index.js
. The page auto-updates as you edit the file.
-
Run
npx prisma init
to create your prisma schema in the prisma directory. -
Set the
DATABASE_URL
in the.env
file to point to your existing database. If your database has no tables yet, read Getting started. -
Set the
provider
of thedatasource
block inschema.prisma
to match your database:postgresql
,mysql
,sqlite
,sqlserver
ormongodb
. -
Run
prisma db pull
to turn your database schema into a Prisma schema. -
Run
prisma generate
to generate the Prisma Client. You can then start querying your database.
Just in case you are curious about the original commands I ran for this setup...
npx create-next-app@latest --ts`
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm i -D prisma
npm i @prisma/client
npx prisma init
-
npx prisma migrate dev
to run migrations. -
npx prisma studio
to open Prisma Studio in the browser.