Database Integration

For Authenticating using Username and Password, we are using SQL Database with the Prisma ORM.

We are going to use the PlanetScale database to show you, how to integrate the database with the Next.js template.

Feel free to choose any SQL database that fits your requirements.

MySQL on PlanetScale

Login to your PlanetScale account and follow the steps to create a Database and generate a URL.

1. Click on the New Database button to create a Database.

Add the Name and choose the Region from the dropdown menu and then click on the Create Database.

2. Once you click on that button it’ll take a few seconds to create the Database.

3. Get the Database Connection URL by clicking the Connect button.

4. When you click on that button you’ll be asked to generate a new password. Go ahead and choose the Branch and Role for this Connect URL.

5. Now get the connection string from here. Make sure to choose the framework you are using. We are using Prisma, so we’ll choose Prisma. After you choose the framework you’ll get the Database URL as shown below.

6. Copy it and paste it to the .env file to the following variable:

DATABASE_URL=YOUR_DB_CONNECT_URL

Migrate the Schema

Now that you’ve added the connection string to the .env file you have to push the schema to the PlanetScale Database you created earlier.

Run this command to push the schema to PlanetScale.

npx prisma db push

If the code runs properly the schema will be added to the PlanetScale Database. You can go to the Console and run show tables; to see the Schema.

Now run this command.

npx prisma generate

Go ahead and signup using the form. If everything is done properly you’ll see the user on your PlanetScale database.

PostgreSQL on Vercel

In the Solid starter template, we used Vercel Postgres Database for Authentication. In this part of the documentation, we are going to show you you can integrate Vercel Postgres with the Next.js template.

Getting the Database URL

Before we integrate the database in the template first you have to deploy it to Vercel.

Once you deploy it follow the instruction to create the database.

1. Go to the Storage tab.

1. Now Scroll down and click on the Create New Database button.

After that select Postgres and then the Continue button. ****

Now do the following to create a new database:

1. Enter the database name. The name can only contain alphanumeric letters, "_" and "-" and can't exceed 32 characters.
2. Select a region.
3. Click Create.

The Database is created successfully.

Because we created the database in a project, we won’t have to add the environment variables manually to Vercel. It’ll be added automatically.

Now we have to pull the environment variables to the local project.

To do that, first of all, you have to install Vercel CLI

npm i -g vercel@latest

After that run this command to pull the .env variables.

vercel env pull .env

Note: You have to connect the local project with Vercel for this command to work. Follow this instruction to link the project.

Migrate the Schema

Now that you’ve added the connection string to the .env file you have to push the schema to the Database you created earlier.

Run this command to push the schema to Vercel Storage.

npx prisma db push

After you run this you’ll be able to see the Tables on Vercel Storage.

Now run this command

npx prisma generate

Now go ahead and signup using the Form. If everything was done properly you’ll see the user on the Database.

Notes:

If you are using Prisma ORM

Make sure you run Prisma generate command before the final build

prisma generate

then

npm run build

Also, while deploying your app on Vercel, edit build command and make it like the screenshot below: