{"id":13515427,"url":"https://github.com/planetscale/nextjs-conf-2021","last_synced_at":"2025-12-24T10:29:48.569Z","repository":{"id":44914672,"uuid":"418569066","full_name":"planetscale/nextjs-conf-2021","owner":"planetscale","description":"The code from \"Databases as Code with PlanetScale and Prisma\" talk at Next.js Conf 2021","archived":false,"fork":false,"pushed_at":"2023-10-06T07:56:36.000Z","size":8910,"stargazers_count":34,"open_issues_count":12,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-01T19:36:26.806Z","etag":null,"topics":["databases","nextjs","planetscale","prisma"],"latest_commit_sha":null,"homepage":"https://youtu.be/5JpKZfPx-1k","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/planetscale.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-18T15:50:07.000Z","updated_at":"2024-04-24T15:31:25.000Z","dependencies_parsed_at":"2024-11-01T19:31:47.206Z","dependency_job_id":"05ad99b1-1f4e-429a-9c62-d2906b4156e4","html_url":"https://github.com/planetscale/nextjs-conf-2021","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetscale%2Fnextjs-conf-2021","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetscale%2Fnextjs-conf-2021/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetscale%2Fnextjs-conf-2021/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetscale%2Fnextjs-conf-2021/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/planetscale","download_url":"https://codeload.github.com/planetscale/nextjs-conf-2021/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246418657,"owners_count":20773934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["databases","nextjs","planetscale","prisma"],"created_at":"2024-08-01T05:01:11.180Z","updated_at":"2025-12-24T10:29:48.551Z","avatar_url":"https://github.com/planetscale.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Using Next.js with PlanetScale and Prisma\n\n\u003e 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 using `prisma db push` with no shadow branches. See the documentation on how to do migrations to your schema here:\n\nThis repo corresponds to the \"Databases as Code with PlanetScale and Prisma\" talk from Next.js Conf 2021.\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\nIn the demo from the talk, we created and edited an [API route](https://nextjs.org/docs/api-routes/introduction), [http://localhost:3000/api/stars](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](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Set up\n\nBelow 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.\n\n\u003e Prerequisite: You need to have the [Prisma](https://www.prisma.io/docs/concepts/components/prisma-cli/installatio) and [PlanetScale](https://planetscale.com/docs/reference/planetscale-environment-setup) CLIs installed\n\n1. In PlanetScale, create a `star-app` database\n2. In your database's Settings page, check \"Automatically copy migration data\" and select \"Prisma\"\n3. Create an `initial-setup` and `shadow` database branches from `main` branch\n\u003e Note: This talk contains an outdated workflow of using `prisma migrate dev` with a shadow branch to update your database schema. We now recommend using `prisma db push` with no shadow branches. See the documentation on how to do migrations to your schema here:\n4. Locally, run:\n```\nnpx create-next-app@latest --use-npm\n```\n5. Once this is complete, run:\n```cd star-app\nnpm install @prisma\\client\n```\n6. To create the files needed to use Prisma, run:\n```\nnpx prisma init\n```\n7. Edit the `prisma/schema.prisma` file:\n```\ndatasource db {\n  provider = \"mysql\"\n  url      = env(\"DATABASE_URL\")\n  shadowDatabaseUrl = env(\"SHADOW_DATABASE_URL\")\n  referentialIntegrity = \"prisma\"\n}\n\ngenerator client {\n  provider = \"prisma-client-js\"\n  previewFeatures = [\"referentialIntegrity\"]\n}\n\nmodel Star {\n  id            Int       @default(autoincrement()) @id\n  createdAt     DateTime  @default(now())\n  updatedAt     DateTime  @updatedAt\n  name          String    @db.VarChar(255)\n  consellation  String    @db.VarChar(255)\n}\n```\n8. Edit the `.env` file:\n```\nDATABASE_URL=\"mysql://root@127.0.0.1:3309/star-app\"\nSHADOW_DATABASE_URL=\"mysql://root@127.0.0.1:3310/star-app\"\n```\n9. Next, we will use `pscale` CLI to locally proxy into our PlanetScale database. In a two different terminal tabs, run:\n```\npscale connect star-app initial-setup --port 3309\n```\n```\npscale connect star-app shadow --port 3310\n```\n10. In a different terminal, run the following to create the initial data model and do your first Prisma migrate:\n```\nprisma migrate dev --name init\n```\nYou will notice a `prisma/migrations` folder as well as the schema in your `initial-setup` branch in PlanetScale.\n11. Create `lib/prisma.js` file:\n```javascript\nimport { PrismaClient } from '@prisma/client'\n\nconst prisma = global.prisma || new PrismaClient();\n\nif (process.env.NODE_ENV === \"development\") global.prisma = prisma;\n\nexport default prisma\n```\n12. Create `pages/api/stars.js` file:\n```javascript\nimport prisma from \"../../lib/prisma\";\n\nexport default async function assetHandler(req, res) {\n    const { method } = req;\n\n    switch (method) {\n        case \"GET\":\n            try {\n                const stars = await prisma.star.findMany();\n                res.status(200).json(stars);\n            } catch(e) {\n                console.error(\"Request error\", e);\n                res.status(500).json({ error: \"Error fetching posts\" });\n            }\n            break;\n        default:\n            res.setHeader(\"Allow\", [\"GET\"]);\n            res.status(405).end(`Method ${method} Not Allowed`);\n            break;\n    }\n}\n```\n13. 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 your `intial-setup` branch in PlanetScale.\n14. Run:\n```npm run dev```\nNavigate to http://localhost:3000/api/stars to see data returned from your API endpoint!\n15. 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.\n\n## Deploy on Vercel\n\n\u003e 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.\n\nDeploy this application quickly to Vercel using the following Deploy button:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fplanetscale%2Fnextjs-conf-2021\u0026env=DATABASE_URL\u0026envDescription=Create%20a%20new%20Password%20in%20PlanetScale%20and%20get%20the%20Prisma%20URL.%20Example%3A%20mysql%3A%2F%2F%5Busername%5D%3A%5Bpassword%5D%40%5Bhost%5D%2Fstar-app%3Fsslaccept%3Dstrict\u0026envLink=https%3A%2F%2Fplanetscale.com%2Fdocs%2Fconcepts%2Fconnection-strings)\n\nIn 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`\n\nYou 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:\n\n![Connect modal in PlanetScale app showing passwords](https://cdn.sanity.io/images/f1avhira/production/ecc1910dce37410254a169060a35538976a1fdf5-1624x1298.png)\n\n\u003e Note: If you see a 404 page after your build is successful, go into your app's Vercel Settings \u003e General \u003e Build \u0026 Development Settings and make sure that Next.js is the selected framework.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanetscale%2Fnextjs-conf-2021","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplanetscale%2Fnextjs-conf-2021","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanetscale%2Fnextjs-conf-2021/lists"}