I’m encountering an issue with my Next.js app where POST and PUT requests return a “405 Method Not Allowed” error only in the Vercel production environment. Everything works perfectly fine locally, and I’m struggling to understand what’s causing this problem.
Setup:
-
Next.js Version: 14.2.4
-
Database: MySQL
-
Authentication & ORM: NextAuth.js & Sequelize
-
Deployment: Vercel
Issue Details:
-
POST API Issue: Initially, both GET and POST methods were implemented in the same API for create-visit, but the GET method wasn’t working when POST was also present. After separating the GET logic into a different endpoint, the GET request works, but the POST request still returns a 405 error in production. The request is correctly made to www.mydomain/api/invitations/create-visit.
-
GET and PUT Issue: For the visitId API, both GET and PUT methods are defined for the same endpoint. Neither the GET nor the PUT request works in production—they both return a 405 error. Similar to the create-visit endpoint, if I separate the GET logic into a different endpoint, the GET request works, but the PUT request still doesn’t.
Error Details: I’ve checked the Vercel logs and the network tab in the browser’s developer tools; the error consistently shows as 405 Method Not Allowed, with no additional information to help diagnose the issue.
Environment Variables: I’ve double-checked that all environment variables are set correctly for both local and production environments.
Screenshots:
- https://imgur.com/a/screenshot-of-issue-SXSA2dj
I’ve aslo added CORS policies in next.config.js, as suggested here, but the issue still persists.
I’m really struggling to pinpoint the exact cause of this issue. It might be due to CORS configurations, an incorrect base URL, or something else entirely. I’m at a loss and would be extremely grateful for any help or suggestions to resolve this.