Skip to content
tezvyn:
Menu

Create a basic GET API endpoint in Next.js App Router

Source: nextjs.orgEasyHow cards are made

Tests App Router backend conventions. Create route.js in an app segment, export async GET with NextRequest and return NextResponse; route.js isolates the endpoint from page.js. Red flag: citing pages/api or raw Node res objects.

What's really being asked

Even experienced engineers migrate between frameworks or maintain legacy codebases, so this question checks whether you actually know the App Router paradigm or are still thinking in Pages Router. The interviewer wants to see that you understand file-system routing for backend endpoints, the specific role of the route.js convention, and the modern request-response primitives NextRequest and NextResponse. They also care that you know Route Handlers are server-only, co-located with UI routes in the app directory, and mutually exclusive with page.js in the exact same segment. A senior candidate should not need to reach for Express or a custom server for a basic JSON endpoint.

The full answer

First, the file structure: inside the app directory, any folder can contain a route.js file to handle HTTP methods for that path segment, and this file runs only on the server. Second, the function signature: you export an async function named GET that receives a request object typed as NextRequest. Third, the response pattern: you return a NextResponse instance, typically by constructing a JSON response, because the handler must return a NextResponse. Fourth, the isolation rule: if a folder contains route.js, it cannot also contain page.js for the same segment, because route.js takes over that URL entirely and prevents a page from rendering at that exact path.

The mistakes people make

A major red flag is describing the old pages/api directory structure or using res.status and res.json from the raw Node response object, since App Router Route Handlers use NextRequest and NextResponse rather than the old Node response model. Another mistake is saying you would put a route.js file next to a page.js in the exact same folder and expect both to render, which violates the App Router convention that a segment can be a page or a handler but never both. Some candidates also conflate Route Handlers with Server Components, suggesting you fetch data inside a component instead of using a dedicated endpoint, or they forget to return a response and cause a runtime hang.

What usually comes next

The interviewer might ask how you would handle POST requests or other HTTP methods in the same file by exporting additional functions, how to access query parameters or dynamic route segments, or when to prefer a Route Handler over a Server Component directly fetching data. They may also ask about caching behavior and the default GET caching semantics, how to configure headers on a Response, middleware interaction, or how to return non-JSON payloads like streams or files.

A concrete example

Imagine an app folder at app/api/items/route.js. Inside that file, you export async function GET(request) and return a NextResponse that contains JSON data such as an items array. A GET request to the /api/items path hits that handler directly. If you accidentally added app/api/items/page.js in the same folder, Next.js would throw a conflict error during build or routing because the segment cannot simultaneously serve as a page and a route handler. Keeping the handler isolated in its own segment ensures a clean separation between your UI pages and your API surface.

Interview question

You need a server-only JSON endpoint at /api/items in a Next.js App Router project. Which approach follows the correct convention?

  • a.Create app/api/items/page.js and export an async GET function that returns NextResponse.json()
  • b.Create pages/api/items.js and export a default handler that uses res.status().json()
  • c.Create app/api/items/route.js and export an async GET function that returns NextResponse.json()Correct
  • d.Create app/api/items/route.js and export a default handler that uses req and res objects
Why?

App Router Route Handlers require route.js with a named GET export returning NextResponse, and page.js cannot exist in the same segment. Option D is tempting because it uses the correct file name but wrongly applies the old Pages Router default handler pattern with raw Node res objects.

Just read this? Test yourself on what you have been reading.

Read the original → nextjs.org

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.

See open roles