Fullstack Example with Next.js and Prisma

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 Cloud 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>/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.

   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.

   npx prisma migrate dev

5. Start the app.

   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 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>/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.

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 account and get your free trial cluster.
2. Create a Vercel 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>/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.

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.