Next.js API Route Returns 404 on POST Request
Your Next.js API route returns 404 when making POST, PUT, DELETE requests, even though the route file exists. GET requests might work but other methods don't.
API routes fail when the handler function doesn't export HTTP method handlers, file structure doesn't match App Router conventions, or HTTP method routing is incorrect.
Error Messages You Might See
Common Causes
- Using page.ts instead of route.ts in API route directory
- Default export instead of named exports for HTTP methods (GET, POST, etc)
- Route file in pages directory (Pages Router) instead of app directory (App Router)
- Incorrect URL path matching route.ts file structure
- Missing HttpResponse wrapper in Vercel's Request/Response types
How to Fix It
Use route.ts: API routes must be named route.ts (not page.ts or api.ts) in app/api/your-route/ directory.
Export handlers: Export named async functions for each method:export async function GET(request: Request) { ... }
export async function POST(request: Request) { ... }
App Router pattern: For /api/users endpoint, create app/api/users/route.ts file.
Test with correct method: Verify fetch call uses correct method: fetch(url, { method: 'POST' })
Real developers can help you.
prajwalfullstack
Hi Im a full stack developer, a vibe coded MVP to Market ready product, I'm here to help
Krishna Sai Kuncha
Experienced Professional Full stack Developer with 8+ years of experience across react, python, js, ts, golang and react-native. Developed inhouse websearch tooling for AI before websearch was solved : )
Franck Plazanet
I am a Strategic Engineering Leader with over 8 years of experience building high-availability enterprise systems and scaling high-performing technical teams. My focus is on bridging the gap between complex technology and business growth.
Core Expertise:
🚀 Leadership: Managing and coaching teams of 15+ engineers, fostering a culture of accountability and continuous improvement.
🏗️ Architecture: Enterprise Core Systems, Multi-system Integration (ERP/API/ETL), and Core Database Structure.
☁️ Cloud & Scale: AWS Expert; architected systems handling 10B+ monthly requests and managing 100k+ SKUs.
📈 Business Impact: Aligning tech strategy with P&L goals to drive $70k+ in monthly recurring revenue.
I thrive on "out-of-the-box" thinking to solve complex technical bottlenecks and am always looking for ways to use automation to improve business productivity.
Costea Adrian
Embedded Engineer specilizing in perception systems. Latest project was a adas camera calibration system.
Anthony Akpan
Developer with 8 years of experience building softwares fro startups
Antriksh Narang
5 years+ Experienced Dev (Specially in Web Development), can help in python, javascript, react, next.js and full stack web dev technologies.
legrab
I'll fill this later
Richard McSorley
Full-Stack Software Engineer with 8+ years building high-performance applications for enterprise clients. Shipped production systems at Walmart (4,000+ stores), Cigna (20M+ users), and Arkansas Blue Cross. 5 patents in retail/supply chain tech. Currently focused on AI integrations, automation tools, and TypeScript-first architectures.
BurnHavoc
Been around fixing other peoples code for 20 years.
Kingsley Omage
Fullstack software engineer passionate about AI Agents, blockchain, LLMs.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
What's the difference between route.ts and page.ts?
page.ts renders UI components. route.ts handles HTTP requests and exports GET/POST/etc handlers.
How do I handle multiple HTTP methods?
Export named functions in route.ts: export async function GET() {...} export async function POST() {...}
Why does my POST work in Postman but not fetch?
Check fetch headers include 'Content-Type': 'application/json' and body is JSON.stringify(data).