https://github.com/tidbcloud/nextjs-prisma-example
Fullstack Example with Next.js and Prisma.
https://github.com/tidbcloud/nextjs-prisma-example
Last synced: 4 months ago
JSON representation
Fullstack Example with Next.js and Prisma.
- Host: GitHub
- URL: https://github.com/tidbcloud/nextjs-prisma-example
- Owner: tidbcloud
- Created: 2022-12-19T06:47:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-22T05:04:33.000Z (about 1 year ago)
- Last Synced: 2025-03-22T06:18:25.386Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 385 KB
- Stars: 7
- Watchers: 10
- Forks: 7
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fullstack Example with Next.js and Prisma
> Modified form [Prisma Examples](https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-api-routes)
This 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).
Deploy on Local
### 🧑🍳 Before We Start
1. Create a [TiDB Cloud](https://tidbcloud.com/) account and get your free trial cluster.
### 1. Get connection details
1. Navigate to your TiDB Cloud Serverless cluster's dashboard.
2. Get **Endpoint**, **Port** and **User** field from the Connection tab.
3. Build your DATABASE_URL string: `mysql://:@:/rest_nextjs?sslaccept=strict`
You will use this DATABASE_URL string to connect to TiDB Cloud Serverless cluster later.
### 2. Deploy on your workspace
1. Clone the code.
```shell
git clone https://github.com/tidbcloud/nextjs-prisma-example.git
cd nextjs-prisma-example
```
2. Set DATABASE_URL environment variables.
```shell
export DATABASE_URL=${your_DATABASE_URL_string}
```
3. Install dependence.
```shell
npm install .
```
4. Migrate your database.
````shell
npx prisma migrate dev
````
5. Start the app.
```shell
npm run dev
```
🎉 Mission Completes.
The app is now running, navigate to http://localhost:3000/ in your browser to explore its UI.
Deploy on Netlify
### 🧑🍳 Before We Start
1. Create a [TiDB Cloud](https://tidbcloud.com/) account and get your free trial cluster.
2. Create a [Netlify](https://app.netlify.com/signup) account.
### 1. Get connection details
1. Navigate to your TiDB Serverless cluster's dashboard.
2. Get **Endpoint**, **Port** and **User** field from the Connection tab.
3. Build your DATABASE_URL string: `mysql://:@:/rest_nextjs?sslaccept=strict`
You will use this DATABASE_URL string to connect to TiDB Cloud Serverless cluster later.
### 2. Deploy on Netlify
The **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.
[](https://app.netlify.com/start/deploy?repository=https://github.com/tidbcloud/nextjs-prisma-example)
1. Click the **Deploy to Netlify** button.
2. Click **Connect to GitHub** and authenticate GitHub account.
3. Fill in **Repository name** for your own GitHub repository.
4. Enter the DATABASE_URL string, get in the previous step, in the **Set database URL** field.
5. Click **Save & Deploy**.
🎉 Mission Completes.
Now wait for the deployment to complete, then you can view your site on the default domain generated by Netlify.
Deploy on Vercel
### 🧑🍳 Before We Start
1. Create a [TiDB Cloud](https://tidbcloud.com/) account and get your free trial cluster.
2. Create a [Vercel](https://vercel.com/signup) account.
### 1. Get connection details
1. Navigate to your TiDB Serverless cluster's dashboard.
2. Get **Endpoint**, **Port** and **User** field from the Connection tab.
3. Build your DATABASE_URL string: `mysql://:@:/rest_nextjs?sslaccept=strict`
You will use this DATABASE_URL string to connect to TiDB Cloud Serverless cluster later.
### 2. Deploy on Vercel
The **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.
[](https://vercel.com/new/clone?repository-name=nextjs-prisma-example&repository-url=https%3A%2F%2Fgithub.com%2Ftidbcloud%2Fnextjs-prisma-example&env=DATABASE_URL&envDescription=TiDB%20Cloud%20connection%20string)
1. Click the **Deploy** button.
2. Click **GitHub** button and authenticate GitHub account.
3. Select your **Git Scope** and fill in **Repository Name** for your own GitHub repository.
4. Click **Create** to create the git repository.
5. Enter the DATABASE_URL string, get in the previous step, in the **Value** field.
6. Click **Deploy**.
🎉 Mission Completes.
Now wait for the deployment to complete, then you can view your site on the default domain generated by Vercel.