Fullstack Example with Next.js (REST API)

Modified form Prisma Examples

This example shows how to implement a fullstack app in TypeScript with Next.js using React and Prisma Client.

Deploy on Local

🧑‍🍳 Before We Start

1. Create a TiDB Cloud account and get your free trial cluster.

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://<User>:<Password>@<Endpoint>:<Port>/bookshop

You will use this DATABASE_URL string to connect to TiDB Serverless cluster later.

2. Deploy on your workspace

1. Clone the code.

   git clone https://github.com/tidbcloud/nextjs-prisma-example.git
   cd nextjs-prisma-example

2. Set DATABASE_URL environment variables.

   export DATABASE_URL=${your_DATABASE_URL_string}

3. Install dependence.

   npm install .

4. Migrate your database.

   prisma migrate dev

5. Start the project.

   npm run dev

Deploy on Netlify

### 🧑‍🍳 Before We Start

1. Create a TiDB Cloud account and get your free trial cluster.
2. Create a Netlify 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://<User>:<Password>@<Endpoint>:<Port>/bookshop

You will use this DATABASE_URL string to connect to TiDB Serverless cluster later.

2. Deploy on Netlify

The Deploy to Netlify button will take you Netlify's deployment page. Then Netlify will help to clone this job to your own GitHub repository and automatically deploy it.

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. Click Save & Deploy.
5. Navigate to Site setting panel.
6. Click Add a variable in the Environment variables sidebar.
7. Enter "DATABASE_URL" in the Key field.
8. Enter the DATABASE_URL string, set in the previous step, in the Values field.
9. Click Create variable to complete adding environment variable.
10. Navigate to Deploys panel.
11. Click Trigger deploy and choose Deploy site.

🎉 Mission Completes.

Now you can view your site on default domain generated by Netlify.