api routes and vercel deployement
why arent my api routes working when i deploy on vercel but work in dev why arent my api routes working when i deploy on vercel but work in dev
7 Replies
Hi @Papi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
When deploying your Nuxt application to Vercel, there are a few important considerations regarding API routes that could explain why they work in development but not in production. Here are the key points to consider:
1. API Route Location: For Vercel deployments, you need to place your API routes in the
server/api/ directory instead of the api/ directory. This is because Vercel uses a top-level api/ directory as a feature, which can conflict with Nuxt's routing. Nitro Routing Guide (https://nitro.unjs.io/guide/routing)
2. File Naming: Ensure your API route files are named correctly. For example, use server/api/your-route.ts for a general route, or server/api/your-route.get.ts for a specific HTTP method. Nitro Routing Guide (https://nitro.unjs.io/guide/routing#filesystem-routing)
3. Environment Variables: Make sure any environment variables used in your API routes are properly set in your Vercel deployment settings. Unlike in development where .env files are used, in production you need to set these variables explicitly in your hosting environment. Nuxt Environment Variables Guide (https://nuxt.com/docs/guide/directory-structure/env#production)
4. Runtime Configuration: If you're using runtime config in your API routes, ensure it's properly set up for both development and production environments. Stack Overflow - Runtime Config (https://stackoverflow.com/questions/77518647)
To troubleshoot further:
1. Check your Vercel deployment logs for any errors.
2. Verify that your API routes are in the correct directory (server/api/).
3. Ensure all necessary environment variables are set in your Vercel project settings.
4. Double-check your runtime configuration if you're using it.
If you've confirmed all these points and are still experiencing issues, you may need to provide more specific details about your API routes and deployment configuration for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@341471076980752385> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Hey @Papi did you manage to solve your prob ? I have the same but only on the / of my domain on Vercel
No i had to totally changed my approched in my case.
All I figured out is that when you pass things that aren’t strings it breaks.
In my case i was trying to read .vue files in the api and apparently it’s not supported (if it is then I didn’t find a solution anywhere.
Also I’d make sure you have your env variables set in Vercel.
If you can be more precise on what you’re trying to do I might be able to help.
Oh, in my case, in local it works but it doesn't in prod on Vercel like you. What's interesting is it's only causing trouble when loading the root of my domain name. It gives me the possibility to "Go back to main page" and clicking on it works and redirects me to my landing page. (same URL from A to Z by the way so it doesn't make sense)
the error I have in my console when browsing my /
Ye I have no idea, honestly the docs for the api routes are really bad, it's hard to know what's possible and isn't. You could maybe test if the simple "hello world" example works. But even that I had a tricky time making it work sometimes. Maybe debugging from the nuxi generate also might help to check if it's a build problem or a vercel problem.