How do you handle multiple HTTP methods in a single route.ts file?
Tests App Router Route Handler REST conventions. A strong answer exports named GET, PUT, DELETE handlers using NextRequest and NextResponse.json, plus 405 for unsupported methods.
WHAT THIS TESTS: This tests your familiarity with Next.js App Router Route Handlers and how the framework maps HTTP verbs to named exports in a single file. Interviewers want to see that you know route.ts is not a React component but a server-side endpoint, and that you understand the difference between App Router conventions and the older Pages Router API routes pattern.
A GOOD ANSWER COVERS: A good answer hits four things in order. First, explain that you export async functions named exactly after the HTTP methods you need, such as GET, PUT, and DELETE, all living in the same route.ts file. Second, mention importing NextRequest to type the incoming request and using NextResponse.json to send structured responses with correct status codes like 200 or 204. Third, note that dynamic route segments are available through the params argument or by parsing the request URL, which matters for resource-specific operations. Fourth, describe the error boundary behavior: either omit unimplemented verbs so Next.js returns a 405 automatically, or explicitly export a catch-all that returns a 405 Method Not Allowed with an Allow header listing supported methods.
COMMON WRONG ANSWERS: Red flags include describing a single default export function that inspects req.method to branch logic, which is the Pages Router pattern and does not work in App Router route files. Another mistake is confusing route.ts with page.tsx and talking about client-side data fetching or useEffect. Some candidates also forget to mention NextRequest and NextResponse, suggesting they have not worked with the App Router types directly. Finally, suggesting separate files for each HTTP method shows a misunderstanding of the co-location convention.
LIKELY FOLLOW-UPS: Interviewers often push deeper by asking how you would cache route handler responses using the App Router caching model, how to handle authentication or headers in a server context, or how to share validation logic between the PUT and DELETE handlers without duplication. They may also ask how route.ts files interact with middleware or how you would test these handlers in a unit test.
ONE CONCRETE EXAMPLE: Imagine an app directory with a dynamic segment at app api items id route.ts. Inside that file you export an async GET function that receives a NextRequest and a params object containing the id, fetches the item, and returns a JSON response via NextResponse. You also export an async PUT function that reads the request body, validates the data, updates the record, and returns the updated item as JSON. An async DELETE function uses the same params to remove the item and returns a 204 No Content response. You do not export a PATCH function, so Next.js automatically rejects PATCH requests with a 405 status. This keeps all related resource operations in one file while maintaining clear separation by HTTP verb.
Read the original → nextjs.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.