Application error: a server-side exception has occurred next.js

Question

I tried to deploy my nextjs application to vercel. This project is built using Prisma and Nextauth. The deployement went well, however when I go the url of my project it shows this error: Application error: a server-side exception has occurred (see the server logs for more information). The error in my console is this Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error..

When I tried the npm run build command it worked well locally, and the only place where it doesn't work is the vercel deployment. Any help is appreciated.

Answer 1

I may not know much about prisma env setup on a nextjs with next-auth, but I had a similar problem only without prisma in it.

if your using a custom path for lets say signing in (e.g /auth/signIn), then you have to configure it to your NEXTAUTH_URL production environment variables using vercel env add

What i did since i was using next auth with a custom sign in page, i had to setup the nextjs environment variables of NEXTAUTH_URL to match the path for the deployed vercel project as https://yoururl.vercel.app/yourbasepath

Then, i also had to add a NEXTAUTH_SECRET also to my environment variables,

The last thing was to add the path on my SessionProvider component as

` import { SessionProvider } from "next-auth/react";

function NextAuthProvider ({ children }) {
  return <SessionProvider basePath="/api/auth">
        {children
     </SessionProvider>;
}`

I hope you find this helpful.

Answer 2

Remember the .env file is excluded from version control! Therefore when you start using it, your deploy will start to fail. The variables just need adding into your hosting platform separately.