Deployed Next.js App Adds Extra Path to Backend API URL

[HarikaraPrashath]

Summary

I'm facing an issue after deploying my Next.js frontend to Vercel. When I try to send data to my deployed backend, an extra path gets added to the API URL automatically. However, the same code works perfectly on my local machine (both frontend and backend).

Additional information

Working Scenario (Local)
Frontend: Running locally (e.g., http://localhost:3000)

Backend: Running locally (e.g., http://localhost:5000)

API call example:
POST http://localhost:5000/api/users/login → ✅ Works fine

Broken Scenario (Deployed on Vercel)

Frontend: Deployed on Vercel (e.g., https://next-front-auth.vercel.app)

Backend: Deployed separately (e.g., https://next-backend-auth-production.up.railway.app)

API call example:
Expected:
POST https://next-backend-auth-production.up.railway.app/api/users/login
Actual:
POST https://next-front-auth.vercel.app/undefined/api/users/login

Example

No response

[SametDulger]

Hi @HarikaraPrashath,

This issue often happens because of how the API base URL is constructed or accessed in your frontend code. The key problem is that in production, the base URL for your backend API is either undefined or incorrectly resolved, causing URLs like:

https://next-front-auth.vercel.app/undefined/api/users/login

instead of the correct backend URL.

Why does it happen?
Using environment variables incorrectly: On your local machine, you might have something like NEXT_PUBLIC_API_URL=http://localhost:5000 defined and accessible, but on Vercel, this variable might be missing, misnamed, or not prefixed with NEXT_PUBLIC_, so it’s undefined in the client-side code.

Relative URL usage: If you use relative paths for API calls (e.g., /api/users/login) without a proper absolute base URL, the browser will prepend the frontend origin, causing the frontend URL to be used instead of the backend.

How to fix
Use environment variables with NEXT_PUBLIC_ prefix for frontend:

Make sure you define your backend API URL in .env.local and in Vercel environment variables like this:

NEXT_PUBLIC_API_URL=https://next-backend-auth-production.up.railway.app

Reference the API URL correctly in frontend code:

const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL;

fetch(`${apiBaseUrl}/api/users/login`, { 
  method: 'POST', 
  body: JSON.stringify(data),
  headers: { 'Content-Type': 'application/json' }
});

Check Vercel environment variables:

Ensure that NEXT_PUBLIC_API_URL is set in your Vercel project dashboard (under Settings > Environment Variables) for both production and preview environments.

Avoid hardcoding or relying on server-only env vars:

Variables without NEXT_PUBLIC_ prefix are only accessible in server-side code, not in client bundles.

Additional debugging tips
Log or console.log(process.env.NEXT_PUBLIC_API_URL) in your frontend code to confirm the variable is correctly set and not undefined.

Test API calls in production browser DevTools network tab to verify URLs.

If you use custom hooks or wrappers for API calls, check they correctly use the base URL.

If you apply these, your deployed frontend should correctly call the backend API without extra or undefined paths.

[HarikaraPrashath]

it's working now

[icyJoseph]

What fixed it?

[HarikaraPrashath]

What fixed it?

The structure was a problem in my project

[icyJoseph]

Aha, could you be a bit more specific if possible? Otherwise, please just close the discussion, as this was a user land issue.