If you have recently deployed a Next.js application to Vercel and are greeted with a generic 500 error page that reads: "Application error: a server-side exception has occurred", don't panic. If your build succeeded but the application crashes at runtime, the issue is almost always related to environment variables.
When using Supabase as your backend, this error is incredibly common on first deployment.
The Root Cause
When you check your Vercel runtime logs (accessible from the Vercel Dashboard under the "Logs" tab for your deployment), you will likely see an error that looks like this:
> `⨯ Error: Your project's URL and API key are required to create a Supabase client!`
Your application is trying to initialize the Supabase client to fetch data, but it cannot find the required connection details because the environment variables were not set in the Vercel project settings.
How to Fix It
To resolve this runtime crash, you need to add your Supabase connection strings to your Vercel deployment.
1. Log in to your Vercel Dashboard. 2. Select your project (e.g., `the-social-work-guide`). 3. Navigate to Settings → Environment Variables. 4. Add the following required variables:
| Variable Name | Value | | :--- | :--- | | `NEXT_PUBLIC_SUPABASE_URL` | Your Supabase project URL (e.g., `https://xyzxyz.supabase.co`) | | `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Your Supabase anon/public key |
*(You can find both of these values in your Supabase Dashboard under Settings → API).*
### Advanced Integrations (Server-Side)
If your Next.js application performs server-side operations that require bypassing Row Level Security (RLS), you might also need to add your service role key:
| Variable Name | Value | | :--- | :--- | | `SUPABASE_SERVICE_ROLE_KEY` | Your service role key |
Security Warning: Never prefix your service role key with `NEXT_PUBLIC_`. Doing so will expose it to the browser, granting full database access to anyone who inspects your frontend code.
Redeploy
Once you have added and saved the environment variables in Vercel, the changes will not apply to the current crashed deployment automatically. You must trigger a new deployment.
Go to the Deployments tab in Vercel, click the three dots next to your most recent deployment, and select Redeploy. Once the new build finishes, your application should connect to Supabase successfully and the 500 error will disappear.