{"id":21846557,"url":"https://github.com/tidbcloud/nextjs-prisma-example","last_synced_at":"2026-02-23T23:31:49.049Z","repository":{"id":69928584,"uuid":"579877013","full_name":"tidbcloud/nextjs-prisma-example","owner":"tidbcloud","description":"Fullstack Example with Next.js and Prisma.","archived":false,"fork":false,"pushed_at":"2025-03-22T05:04:33.000Z","size":394,"stargazers_count":7,"open_issues_count":12,"forks_count":7,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-03-22T06:18:25.386Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/tidbcloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-12-19T06:47:32.000Z","updated_at":"2025-03-20T04:56:37.000Z","dependencies_parsed_at":"2025-03-22T06:18:15.331Z","dependency_job_id":"2b640004-70b3-4af6-bfc6-13ee35a6eb93","html_url":"https://github.com/tidbcloud/nextjs-prisma-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Fnextjs-prisma-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Fnextjs-prisma-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Fnextjs-prisma-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Fnextjs-prisma-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tidbcloud","download_url":"https://codeload.github.com/tidbcloud/nextjs-prisma-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886816,"owners_count":21177751,"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:25.995Z","updated_at":"2026-02-23T23:31:44.029Z","avatar_url":"https://github.com/tidbcloud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fullstack Example with Next.js and Prisma\n\n\u003e Modified form [Prisma Examples](https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-api-routes)\n\nThis example shows how to implement a **fullstack app in TypeScript with [Next.js](https://nextjs.org/)** using [React](https://reactjs.org/) and [Prisma Client](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client).\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch2\u003eDeploy on Local\u003c/h2\u003e\u003c/summary\u003e\n\n### 🧑‍🍳 Before We Start\n\n1. Create a [TiDB Cloud](https://tidbcloud.com/) account and get your free trial cluster.\n\n### 1. Get connection details\n\n1. Navigate to your TiDB Cloud Serverless cluster's dashboard.\n2. Get **Endpoint**, **Port** and **User** field from the Connection tab.\n3. Build your DATABASE_URL string: `mysql://\u003cUser\u003e:\u003cPassword\u003e@\u003cEndpoint\u003e:\u003cPort\u003e/rest_nextjs?sslaccept=strict`\n\n![image](https://user-images.githubusercontent.com/35677990/202609001-ecf07f3d-a7a3-4376-9b7d-54f4096aaec6.jpg)\n\nYou will use this DATABASE_URL string to connect to TiDB Cloud Serverless cluster later.\n\n### 2. Deploy on your workspace\n\n1. Clone the code.\n   ```shell\n   git clone https://github.com/tidbcloud/nextjs-prisma-example.git\n   cd nextjs-prisma-example\n   ```\n2. Set DATABASE_URL environment variables.\n   ```shell\n   export DATABASE_URL=${your_DATABASE_URL_string}\n   ```\n3. Install dependence.\n   ```shell\n   npm install .\n   ```\n4. Migrate your database.\n   ````shell\n   npx prisma migrate dev\n   ````\n5. Start the app.\n   ```shell\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 its UI.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch2\u003eDeploy on Netlify\u003c/h2\u003e\u003c/summary\u003e\n\n### 🧑‍🍳 Before We Start\n\n1. Create a [TiDB Cloud](https://tidbcloud.com/) account and get your free trial cluster.\n2. Create a [Netlify](https://app.netlify.com/signup) account.\n\n### 1. Get connection details\n\n1. Navigate to your TiDB Serverless cluster's dashboard.\n2. Get **Endpoint**, **Port** and **User** field from the Connection tab.\n3. Build your DATABASE_URL string: `mysql://\u003cUser\u003e:\u003cPassword\u003e@\u003cEndpoint\u003e:\u003cPort\u003e/rest_nextjs?sslaccept=strict`\n\n![image](https://user-images.githubusercontent.com/35677990/202609001-ecf07f3d-a7a3-4376-9b7d-54f4096aaec6.jpg)\n\nYou will use this DATABASE_URL string to connect to TiDB Cloud Serverless cluster later.\n\n### 2. Deploy on Netlify\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-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 DATABASE_URL string, get in the previous step, in the **Set database URL** field.\n5. Click **Save \u0026 Deploy**.\n\n![img](https://user-images.githubusercontent.com/35677990/208869376-c642e816-cb74-4012-9070-9a2cc301b72e.jpg)\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\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch2\u003eDeploy on Vercel\u003c/h2\u003e\u003c/summary\u003e\n\n### 🧑‍🍳 Before We Start\n\n1. Create a [TiDB Cloud](https://tidbcloud.com/) account and get your free trial cluster.\n2. Create a [Vercel](https://vercel.com/signup) account.\n\n### 1. Get connection details\n\n1. Navigate to your TiDB Serverless cluster's dashboard.\n2. Get **Endpoint**, **Port** and **User** field from the Connection tab.\n3. Build your DATABASE_URL string: `mysql://\u003cUser\u003e:\u003cPassword\u003e@\u003cEndpoint\u003e:\u003cPort\u003e/rest_nextjs?sslaccept=strict`\n\n![image](https://user-images.githubusercontent.com/35677990/202609001-ecf07f3d-a7a3-4376-9b7d-54f4096aaec6.jpg)\n\nYou will use this DATABASE_URL string to connect to TiDB Cloud Serverless cluster later.\n\n### 2. Deploy on Vercel\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-name=nextjs-prisma-example\u0026repository-url=https%3A%2F%2Fgithub.com%2Ftidbcloud%2Fnextjs-prisma-example\u0026env=DATABASE_URL\u0026envDescription=TiDB%20Cloud%20connection%20string)\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. Enter the DATABASE_URL string, get in the previous step, in the **Value** field.\n6. Click **Deploy**.\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftidbcloud%2Fnextjs-prisma-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftidbcloud%2Fnextjs-prisma-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftidbcloud%2Fnextjs-prisma-example/lists"}