How to fix this Next.js error: No HTTP methods exported in… Export a named export for each HTTP method instead.

If you’re building Next.js applications, chances are: you’re using TypeScript for error handling, and you’re working with API routes in addition to server components. In the new Next.js 14 version (and higher), there has been a push to move away from the /pages router and instead use the /app router in which all components can be server components.

🔊 When you declare API routes, you must write them like this:

Template: app/api/YOUR-NAME-FOR-THE-ROUTE/route.ts
Example for an API route for uploading a file: app/upload/route.ts

📄 When you declare pages, you must write them like this:

Template: app/page.tsx or app/SOMETHING/page.tsx
Example for a homepage (url is the domain): app/page.tsx
Example for a page (url is /something): app/YOUR-NAME-FOR-PAGE-PATH/page.tsx

Here is a visual reference for this:

Once we get the routing down between components, pages, and API routes, one common trap in working with the new app router is how api routes work. This blog discusses some of these problems, specifically when you get an error like this:

❌ The Problem

You might see two different types of errors that look like this:

Error 1: ⨯ Detected default export in 'app/api/…/route.ts'. Export a named export for each HTTP method instead.
Error 2: ⨯ No HTTP methods exported in 'app/api/…/route.ts'. Export a named export for each HTTP method.

What this means is that you might be abiding by the “old way” of writing the API routes.

In Next.js 14, the way API routes are structured has changed, and you need to export named functions for each HTTP method instead of using a default export. You should create route.ts files in the app/api/YOUR-NAME directory and export functions like POST and PUT for handling different HTTP methods.

Code Snippet: 
      API route: old way
   

In the above code, this is what is causing the errors described above: export default async function handler and then the requests are triaged via if statements like this: if (req.method === 'POST') {…}

While this used to work previously, this will not work in the new implementation of the app router for APIs.

✅ The Solution

To fix this, we will need to export functions as HTTP methods like this:

Code Snippet: 
      API route: new way
   

In the above code, notice the functions like this:

For PUT: export async function PUT {…}
For POST: export async function POST {…}

Also, notice how the outputs resemble a NextResponse like this:

Return statement: return NextResponse.json({ uploadId: uploadData.UploadId, key: uploadData.Key });

Hopefully, this is helpful for showing you how to upgrade your API routes to the new format with Next.js 14 and above!

Looking for more resources?

Snag my 7 Days of Development ebook here:

I'll send you a FREE copy of my 7 Days of Development Ebook to get you started writing Python scripts, Node.js functions, Next.js apps, and building in the cloud!