Important update: This talk contains an outdated workflow of using
prisma migrate dev
with a shadow branch to update your database schema. We now recommend usingprisma db push
with no shadow branches. See the documentation on how to do migrations to your schema here:
This repo corresponds to the "Databases as Code with PlanetScale and Prisma" talk from Next.js Conf 2021.
This is a Next.js project bootstrapped with create-next-app
.
In the demo from the talk, we created and edited an API route, http://localhost:3000/api/stars. This endpoint can be edited in pages/api/stars.js
. The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
Below are the steps I went through in the talk during Next.js Conf. You will likely find the talk to include a few more details around each step. I have created the following steps to give a brief idea for what is needed to go to production.
Prerequisite: You need to have the Prisma and PlanetScale CLIs installed
- In PlanetScale, create a
star-app
database - In your database's Settings page, check "Automatically copy migration data" and select "Prisma"
- Create an
initial-setup
andshadow
database branches frommain
branch
Note: This talk contains an outdated workflow of using
prisma migrate dev
with a shadow branch to update your database schema. We now recommend usingprisma db push
with no shadow branches. See the documentation on how to do migrations to your schema here:
- Locally, run:
npx create-next-app@latest --use-npm
- Once this is complete, run:
npm install @prisma\client
- To create the files needed to use Prisma, run:
npx prisma init
- Edit the
prisma/schema.prisma
file:
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
referentialIntegrity = "prisma"
}
generator client {
provider = "prisma-client-js"
previewFeatures = ["referentialIntegrity"]
}
model Star {
id Int @default(autoincrement()) @id
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
name String @db.VarChar(255)
consellation String @db.VarChar(255)
}
- Edit the
.env
file:
DATABASE_URL="mysql://[email protected]:3309/star-app"
SHADOW_DATABASE_URL="mysql://[email protected]:3310/star-app"
- Next, we will use
pscale
CLI to locally proxy into our PlanetScale database. In a two different terminal tabs, run:
pscale connect star-app initial-setup --port 3309
pscale connect star-app shadow --port 3310
- In a different terminal, run the following to create the initial data model and do your first Prisma migrate:
prisma migrate dev --name init
You will notice a prisma/migrations
folder as well as the schema in your initial-setup
branch in PlanetScale.
11. Create lib/prisma.js
file:
import { PrismaClient } from '@prisma/client'
const prisma = global.prisma || new PrismaClient();
if (process.env.NODE_ENV === "development") global.prisma = prisma;
export default prisma
- Create
pages/api/stars.js
file:
import prisma from "../../lib/prisma";
export default async function assetHandler(req, res) {
const { method } = req;
switch (method) {
case "GET":
try {
const stars = await prisma.star.findMany();
res.status(200).json(stars);
} catch(e) {
console.error("Request error", e);
res.status(500).json({ error: "Error fetching posts" });
}
break;
default:
res.setHeader("Allow", ["GET"]);
res.status(405).end(`Method ${method} Not Allowed`);
break;
}
}
- Add data using
npx prisma studio
, which will open a browser window. After you add data, then close Prisma Studio. You can also check to see that the data is in yourintial-setup
branch in PlanetScale. - Run:
npm run dev
Navigate to http://localhost:3000/api/stars to see data returned from your API endpoint! - You are now ready to open a deploy request in PlanetScale. Once you have opened a deploy request and merged it into your main branch, you are now ready to deploy to Vercel! Remember to add data again to your
main
database branch; otherwise, your API route will return no data.
Warning: You need to make sure to follow the steps from the "Databases as Code with PlanetScale and Prisma" talk at Next.js Conf before deploying to Vercel.
Deploy this application quickly to Vercel using the following Deploy button:
In order to connect your database to your application deployed in Vercel, you will need to set the DATABASE_URL
variable. This URL is how your Vercel application is able to securely connect to PlanetScale. The URL is in the following format: mysql://[username]:[password]@[host]/star-app?sslaccept=strict
You can create a password in PlanetScale and generate this URL in the Connect modal in the database branch of your choice, select "Prisma" to get the Prisma specific URL:
Note: If you see a 404 page after your build is successful, go into your app's Vercel Settings > General > Build & Development Settings and make sure that Next.js is the selected framework.