Prisma + Neon

As a part of building Toolgebra, I recently had to setup Prisma as the ORM and NextAuth as the authentication framework. The details on how to get those two working together locally have already been discussed in the previous blog post

In this post we will discuss how to get a nextjs prisma app deployed to cloud using Neon.

Deploying the NextJS app

If you have already deployed your NextJS app, you can skip this section. If not, deploying it using Vercel is a breeze. Just push it to github, and connect your vercel account to your github account and link a vercel project to it. There is no need to describe how to do that in this blog as it is very trivial to figure out from Vercel UI itself or you can check out any of the various tutorial available on Youtube. If you are trying to deploy the project we created in the previous blog post, you might face a deployment error that the env var DATABASE_URL is missing. We will fix that in the next section

Setting up Neon

Neon is a hosted postgres solution which offers excellent cold start capabilities and generous free tier. You can login to Neon and setup a Project - which would create a database.

After that, it is easy to link it to a Vercel app. Just go to Vercel Project Settings -> Integrations and search for Neon integration. You will be able to link a Neon DB project to the Vercel project using that integration. It will take care of configuring the DATABASE_URL.

Configuring NextJS

Add the required env vars like AUTH_SECRET (a random string you can obtain using a command like openssl rand -base64 32), AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET (From Google cloud console as discussed in the previous post)

Next step, add a postinstall command in package.json - to generate prisma client during the build process

  "scripts": {
    ...
    "postinstall": "prisma generate",
    ...
  },

The build should work correctly now. But still the website won’t load correctly and you should see error logs which say Prisma Client could not locate the Query Engine for runtime "rhel-openssl-3.0.x".

We can fix this error by making the following changes

Add rhel-openssl as a target in schema.prisma and also change the provider name from prisma-client to prisma-client-js (Not sure why it matters. But it does)

 generator client {
    provider = "prisma-client-js"
    output   = "../app/generated/prisma"
    binaryTargets = ["native", "rhel-openssl-3.0.x"]
 }

Also change next.config.ts to include the generated prisma files

const nextConfig: NextConfig = {
  /* config options here */
  outputFileTracingIncludes: {
    '/**/*': ['./app/generated/prisma/**/*'],
  },
};

After these 2 steps, the Query engine related runtime error should get resolved. But you will still see another error in the logs saying table not found - The table public.User does not exist in the current database.

This happens because the build process does not do the prisma migrations. We can fix this by including a vercel.json file like this

{
  "buildCommand": "npx prisma generate && npx prisma migrate deploy && npm run build"
}

After this the setup should work correctly. You can go to the deployed app (available as a .vercel.app link in your vercel project) and verify that the login functionality works correctly. If you check your Neon console, you should be able to see new user entries created in the User table.