{"id":21846562,"url":"https://github.com/tidbcloud/nextjs-prisma-edge-example","last_synced_at":"2025-10-25T03:41:53.685Z","repository":{"id":69928595,"uuid":"590773781","full_name":"tidbcloud/nextjs-prisma-edge-example","owner":"tidbcloud","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-11T17:39:09.000Z","size":1510,"stargazers_count":2,"open_issues_count":13,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-12-17T01:03:11.656Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tidbcloud.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":"2023-01-19T07:05:50.000Z","updated_at":"2024-10-21T12:25:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"b9f80f9e-ede2-47cd-bb66-3d3a39a97acd","html_url":"https://github.com/tidbcloud/nextjs-prisma-edge-example","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/tidbcloud%2Fnextjs-prisma-edge-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Fnextjs-prisma-edge-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Fnextjs-prisma-edge-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Fnextjs-prisma-edge-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tidbcloud","download_url":"https://codeload.github.com/tidbcloud/nextjs-prisma-edge-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235700112,"owners_count":19031671,"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":[],"created_at":"2024-11-27T23:14:27.256Z","updated_at":"2025-10-08T09:31:38.951Z","avatar_url":"https://github.com/tidbcloud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Prisma Edge functions\n\n\u003e Modified from [prisma-edge-functions](https://github.com/ruheni/prisma-edge-functions). Thanks for their excellent work.\n\nEdge functions are serverless functions at The Edge. They are written in JavaScript or TypeScript and run on a global network. It allows running server-side code geographically close to end users and enjoy lower latency.\n\nThis sample application shows how you can work with TiDB Cloud and edge functions. And here is a [live demo](https://vercel-edge-functions-prod.vercel.app/) build on vercel.\n\n\n## Set up TiDB Cloud\n\n1. Go to [TiDB Cloud](https://tidbcloud.com/) and create a serverless tier cluster.\n2. Navigate to your serverless tier cluster's dashboard.\n3. Click **Connect** to set a password, you can also build the prisma connect string with this pattern `mysql://USER:PASSWORD@HOST:PORT/edge_function?sslaccept=strict`.\n\n![tidbcloud-connect.png](img/connect.png)\n\n4. Connect to your serverless tier cluster and create a database named edge_function. This application will build on this database.\n\n## Set up Prisma Data Proxy\n\nEdge environments only support HTTP-based connections. Therefore, we can not connect to TiDB Cloud which use long-lived TCP connections directly.\n\nThe Prisma Data Proxy is a proxy server for your database that allows you to interact with your database over HTTP, manages a connection pool, and ensures database connections are reused. It allows database access from Edge runtimes such as Vercel Edge Functions, Netlify Edge Functions and Cloudflare Workers.\n\n1. sign in to the [Prisma Data Platform](https://cloud.prisma.io/) and click **New Project**.\n2. Fill in the **Connection string** with this pattern `mysql://USER:PASSWORD@HOST:PORT/edge_function?sslaccept=strict`. You can find the connection information in your [TiDB Cloud console](https://tidbcloud.com/console/clusters).\n3. Leave the **Static IPs** as disabled because TiDB Cloud Serverless Tier is accessible from any IP address.\n4. Select a Data Proxy region that is geographically close to your TiDB Cloud cluster location. Then click **Create project**.\n\n   ![prisma_project.png](img/prisma_project.png)\n\n5. Click **Skip and continue to Data Platform** to go to the Data Platform.\n6. Click **Data Proxy** in Data Platform, then click **Create a new connection string** to create a new connection string that starts with `prisma://`. Copy and save it for later use.\n\n   ![proxy.png](img/proxy.png)\n\n7. Click **Schema Viewer** in Data Platform, you can fill in the repository and click **Link Prisma schema** after you fork a repository. It is optional, if you don't link to your repository, prisma data proxy will sync the schema automatically by introspection mechanism.\n\n   ![schema.png](img/schema.png)\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch2\u003eDeploy on Local\u003c/h2\u003e\u003c/summary\u003e\n\n1. Fork this repository and clone it to your local machine.\n    \n    ```\n    git clone https://github.com/${user_name}/nextjs-prisma-edge-example.git\n    cd nextjs-prisma-edge-example\n    ```\n\n2. Optional: Link Prisma schema to the new repository you create. Follow [Set up Prisma Data Proxy](#how-to-set-up-prisma-data-proxy) step 7.\n   \n3. Set DATABASE_URL environment variables.\n\n    ```\n    export DATABASE_URL=mysql://\u003cUser\u003e:\u003cPassword\u003e@\u003cEndpoint\u003e:\u003cPort\u003e/edge_function?sslaccept=strict\n    ```\n\n4. apply prisma migrate and seed.\n\n    ```\n    npx prisma migrate deploy\n    npx prisma db seed\n    ```\n\n5. Replace the `DATABASE_URL` with the connection string you got from Prisma Data Platform.\n\n   ```\n   export DATABASE_URL=DATABASE_URL=prisma://aws-us-east-1.prisma-data.com/?api_key=•••••••••••••••••\n   ```\n\n6. Generate Prisma Client that will connect through the Prisma Data Proxy using HTTP.\n\n   ```\n   npx prisma generate --data-proxy\n   ```\n   \n7. Start the app.\n\n    ```\n    npm run dev\n    ```\n\n🎉 Mission Completes.\n\nThe app is now running, navigate to http://localhost:3000/ in your browser to explore it.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch2\u003eDeploy on Vercel\u003c/h2\u003e\u003c/summary\u003e\n\nThe Deploy button will take you through Vercel's project creation flow. Vercel will help to clone this job to your own GitHub repository and automatically deploy it.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ftidbcloud%2Fnextjs-prisma-edge-example\u0026env=MIGRATE_DATABASE_URL,DATABASE_URL\u0026envDescription=TiDB%20Cloud%20and%20prisma%20data%20proxy%20connect%20string%20)\n\n1. Click the **Deploy** button.\n2. Click **GitHub** button and authenticate GitHub account.\n3. Select your **Git Scope** and fill in **Repository Name** for your own GitHub repository.\n4. Click **Create** to create the git repository.\n5. Optional: Link Prisma schema to the new repository you create. Follow [Set up Prisma Data Proxy](#how-to-set-up-prisma-data-proxy) step 7.\n6. Enter the environment variables:\n   - `MIGRATE_DATABASE_URL`: the tidb cloud connection string.\n   - `DATABASE_URL`: the Prisma Data Proxy connection string.\n7. Click **Deploy**.\n\n![img/vercel.png](img/vercel.png)\n\n🎉 Mission Completes.\n\nNow wait for the deployment to complete, then you can view your site on the default domain generated by Vercel.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch2\u003eDeploy on Netlify\u003c/h2\u003e\u003c/summary\u003e\n\nThe **Deploy to Netlify** button will take you to Netlify's deployment page. Then Netlify will help to clone this job to your own GitHub repository and automatically deploy it.\n\n[![Deploy to Netlify button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/tidbcloud/nextjs-prisma-edge-example)\n\n1. Click the **Deploy to Netlify** button.\n2. Click **Connect to GitHub** and authenticate GitHub account.\n3. Fill in **Repository name** for your own GitHub repository.\n4. Enter the environment variables:\n   - `MIGRATE_DATABASE_URL`: the tidb cloud connection string.\n   - `DATABASE_URL`: the Prisma Data Proxy connection string.\n5. Click **Save \u0026 Deploy**.\n6. [Optional]: Link Prisma schema to the new repository you create. Follow [Set up Prisma Data Proxy](#how-to-set-up-prisma-data-proxy) step 7.\n\n![img/netlify.png](img/netlify.png)\n\n🎉 Mission Completes.\n\nNow wait for the deployment to complete, then you can view your site on the default domain generated by Netlify.\n\n\u003c/details\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftidbcloud%2Fnextjs-prisma-edge-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftidbcloud%2Fnextjs-prisma-edge-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftidbcloud%2Fnextjs-prisma-edge-example/lists"}