Building and Deploying a Next.js App with Prisma

Before deploying our app to Vercel, it's crucial to ensure it builds correctly locally. This tutorial will guide you through making the necessary changes and preparing your Next.js app, which uses Prisma, for deployment.

Step 1: Modify the Build Command

When deploying a Next.js app that uses Prisma, you need to adjust the build command to avoid errors. Prisma requires a command to generate the necessary client files. Here’s how to update the build command:

1. Open package.json: Locate the scripts section.
2. Update the Build Command: Change the build script to include Prisma generation:

   
   "scripts": {
     "build": "npx prisma generate && next build"
   }
                   

   This ensures that Prisma generates the required files before the Next.js build process starts.

Step 2: Adjust Prisma Example and Logging

We will make a few changes to the Prisma example for clarity and logging purposes.

1. Navigate to the Prisma Example: Find the Prisma example file in your project.
2. Comment Out Item Creation: If the example includes code for creating items, comment it out. This step is for reference only and will not be executed.
3. Set Up Logging: Add logging to confirm when certain processes run. This helps track the Prisma operations during deployment.

Step 3: Manage Tasks and Clean the Database

Before deploying, it’s a good practice to clean your database to start fresh.

1. Display Task Heading: Ensure that if there are no tasks, a heading is displayed. You can copy the code from the task list component to maintain consistency.
2. Remove All Items: Clean out the database by removing all items. This can be done through the Prisma Studio or directly in your application:
   • Via Application: Iterate through tasks and delete them.
   • Via Prisma Studio: Use the Prisma Studio interface to remove tasks directly.

Step 4: Build the Application

1. Stop the Dev Server: If your development server is running, stop it.
2. Run the Build Command: Execute the build command to generate the static files and server-rendered pages:

   npm run build

Step 5: Understand Pre-rendering and Server-rendering

Next.js can pre-render pages as static HTML or server-render them on-demand.

1. Static HTML: Pages pre-rendered during the build process. These pages do not show a loading spinner because they are fully generated.
2. Server-rendered Pages: Generated on the fly when a user visits the page. These pages may show a loading spinner while fetching data.

Step 6: Verify the Build Output

Check the build output to understand which pages are pre-rendered and which are server-rendered. Static pages will have a circle icon, while server-rendered pages will have a lambda icon.

Step 7: Run the Application Locally

1. Start the Application: Run the application locally to ensure everything works correctly.

   npm start

2. Test Functionality: Verify that pre-rendered pages load without a spinner and dynamic pages load with a spinner initially but are cached for subsequent visits.

Step 8: Deploy to Vercel

With everything set up and verified locally, you're ready to deploy your project to Vercel:

1. Push Changes to Repository: Ensure all changes are committed and pushed to your repository.
2. Deploy via Vercel: Use the Vercel dashboard or CLI to deploy your project.

By following these steps, you can ensure your Next.js app with Prisma is built correctly and ready for deployment to Vercel.