When running the app in development and preview environment, the app runs into error saying unable to reach supabase. It works perfectly in prod env. I have checked the env variable the supabase keys are correctly setup for dev, prev and prod env.
You’re getting that error because your Vercel deployment environment doesn’t have the NEXT_PUBLIC_SUPABASE_URL variable set, or it’s not set for the correct environment (like “Preview” or “Production”).
Here’s how you can set environment variables in your Vercel project:
Go to your Vercel Dashboard: Log in to your Vercel account.
Select your Project: Click on the project where you’re encountering the error (e.g., “slitwindow”).
Navigate to Project Settings:
In the project dashboard, click on the “Settings” tab.
Then, click on “Environment Variables” in the sidebar.
Add the Environment Variable:
You’ll see a list of existing environment variables (if any).
Click the “Add New” button (or similar, depending on the UI version).
Name: Enter NEXT_PUBLIC_SUPABASE_URL (exactly as written, case-sensitive).
Value: This is where you need to paste your Supabase Project URL.
Go to your Supabase Dashboard.
Navigate to Project Settings (the gear icon in the sidebar) → API.
Under “Project URL”, copy the exact URL (it will look something like https://.supabase.co).
Paste this value into the “Value” field in Vercel.
Environments: This is crucial! Make sure you select the environments where this variable should be available.
If you’re deploying to production, select “Production”.
If you’re using Vercel’s preview deployments (e.g., for pull requests), select “Preview”.
If you want it available for local development when running vercel dev, select “Development”.
It’s generally recommended to select all three for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
Click “Add” (or “Save”).
Repeat for NEXT_PUBLIC_SUPABASE_ANON_KEY:
Follow the same steps for NEXT_PUBLIC_SUPABASE_ANON_KEY.
The value for this variable is also found in your Supabase Dashboard under Project Settings → API, specifically the anon public key (a long string starting with eyJ…).
Redeploy your Project: After adding or updating the environment variables, you’ll need to trigger a new deployment for the changes to take effect. You can usually do this by going back to your project’s “Deployments” tab and clicking “Redeploy” on the latest deployment, or by pushing a new commit to your connected Git repository.
Once these variables are correctly set in Vercel for the relevant environments, your application should be able to connect to Supabase and fetch data without the “Missing environment variable” error.
The code returns the following error:
Error fetching people from Supabase: TypeError: Failed to fetch
at getPeople (/app/people/actions)
at async PeoplePage (/app/people/page)
Revise the code to address the error.
I was previewing: /people
You’re still encountering the TypeError: Failed to fetch when fetching people, specifically when previewing /people. This is a critical network error that indicates your Vercel preview deployment cannot establish a connection to your Supabase project’s API.
As we’ve discussed, this error is almost always due to incorrect or missing environment variables in your Vercel project settings, specifically for the “Preview” environment, or a network connectivity issue between Vercel’s preview infrastructure and Supabase.
The code for getPeople in app/people/actions.ts and createClient in lib/supabase/server-action.ts is already designed to log the presence of your Supabase environment variables and catch fetch errors. The TypeError: Failed to fetch is a low-level network error, meaning the connection itself is failing before any Supabase-specific API errors can be returned.
Since the code is already set up to help diagnose this, no further code changes are needed at this moment. The solution lies in meticulously verifying your Vercel environment configuration.
Please follow these crucial steps again, paying extremely close attention to the “Preview” scope:
Absolute Verification of Supabase Environment Variables in Vercel (Most Likely Cause):
Go to your Vercel Dashboard → Your Project → Settings → Environment Variables.
Find NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
For each of these variables:
Crucially, ensure they are explicitly checked for the “Preview” environment. If they are only checked for “Production”, they will not be available in your preview deployments.
Double-check their values: Copy them directly from your Supabase project settings (Project Settings → API → Project URL and anon public key) and paste them into Vercel. Ensure there are no typos, extra spaces, or missing characters.
Verify Supabase Redirect URLs for Vercel Previews:
Go to your Supabase Dashboard → Authentication → URL Configuration.
In the “Redirect URLs” section, ensure you have added a wildcard URL that covers your Vercel preview deployments. A common pattern is:
https://.vercel.app (broad, covers all Vercel previews)
Or, more specifically: https://-git--.vercel.app
(e.g., https://slitwindow-git-*-your-org-slug.vercel.app)
This is essential for Supabase to correctly redirect back to your preview URL after authentication.
Review Vercel Preview Deployment Logs (After Re-deploying):
After making any changes to environment variables in Vercel, trigger a new deployment for your preview branch.
Go to your Vercel dashboard, select your project, and view the latest deployment logs for the preview deployment.
Look for the output from lib/supabase/server-action.ts:
— createClient (server-action) debug —
NEXT_PUBLIC_SUPABASE_URL: Present (or Missing/Undefined)
NEXT_PUBLIC_SUPABASE_ANON_KEY: Present (or Missing/Undefined)
If either is reported as “Missing/Undefined” here, the problem is definitively with your Vercel environment variable configuration for the “Preview” scope.
Look for the output from app/people/actions.ts:
— getPeople action called —
Supabase client created in getPeople.
Caught an unexpected error during getPeople fetch: TypeError: Failed to fetch (or similar network error details).
Test Supabase API Connectivity Directly (External Check):
Open your terminal (or command prompt).
Replace <YOUR_SUPABASE_URL> and <YOUR_SUPABASE_ANON_KEY> with your actual values from Supabase.
Run the following curl command:
curl -v -X GET
‘<YOUR_SUPABASE_URL>/rest/v1/people?select=*’
-H ‘apikey: <YOUR_SUPABASE_ANON_KEY>’
-H ‘Authorization: Bearer <YOUR_SUPABASE_ANON_KEY>’
Expected Output: If successful, you should see HTTP 200 OK and a JSON array of your people data (even if empty ).
If this curl command fails with a network error (e.g., “Failed to connect”, “Connection refused”, “Could not resolve host”), then the problem is with your Supabase URL, your network, or Supabase itself, not your Next.js application.
The TypeError: Failed to fetch is a network-level error. Once your Vercel preview environment can successfully connect to your Supabase API (by having the correct environment variables and no network blocks), this error will resolve, and your authentication session issues should also clear up.