tezvyn:

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

AI-drafted, machine-checkedSource: nextjs.orgbeginner

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 THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

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.