Route handlers (route.ts) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this GET route handler?

Consider this Next.js route handler in route.ts. What will the client receive when making a GET request?

NextJS

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from GET!' });
}

A A JSON response with {"message": "Hello from GET!"}

B A plain text response with 'Hello from GET!'

C A 404 Not Found error

D A runtime error because NextResponse.json is not a function

💡 Hint

Look at how NextResponse.json formats the response.

The GET function returns a JSON response using NextResponse.json. This sends a JSON object with the key message and value Hello from GET!.

📝 Syntax

intermediate

Which option correctly defines a POST route handler in route.ts?

You want to create a POST route handler in Next.js using route.ts. Which code snippet is syntactically correct?

A async function POST() { return 'Posted'; }

B export function post(request: Request) { return new Response('Posted'); }

C export async function POST(request: Request) { return new Response('Posted'); }

D export async POST(request) => { return new Response('Posted'); }

💡 Hint

Remember the function must be exported and named exactly POST with async.

In Next.js route handlers, the function must be exported, named in uppercase (POST), and can be async. The parameter request is typed as Request. Option C follows this pattern correctly.

❓ state_output

advanced

What is the response body after this PUT request handler runs?

Given this Next.js PUT route handler, what will the response body contain?

NextJS

import { NextResponse } from 'next/server';

let count = 0;

export async function PUT() {
  count += 1;
  return NextResponse.json({ count });
}

A {"count":0} always, because count resets each request

B A plain text response with the string 'count'

C An error because count is not defined inside the function

D {"count":1} on first call, increments by 1 each call

💡 Hint

Consider variable scope and server state persistence between requests.

The variable count is declared outside the handler, so it persists across requests in the server environment. Each PUT request increments count by 1 and returns it in JSON.

🔧 Debug

advanced

Why does this DELETE route handler cause a runtime error?

Examine this DELETE route handler code. Why does it cause a runtime error when called?

NextJS

export async function DELETE() {
  const data = await request.json();
  return new Response('Deleted');
}

A The variable 'request' is not defined in the function scope

B The function must not be async for DELETE handlers

C The Response constructor requires a JSON object, not a string

D Missing import of NextResponse causes runtime error

💡 Hint

Check the parameters of the function and variable usage.

The function tries to use request but it is not passed as a parameter. Route handlers must declare request as a parameter to access the request body.

🧠 Conceptual

expert

Which statement about Next.js route handlers in route.ts is TRUE?

Select the correct statement about how Next.js route handlers work in route.ts files.

A Route handlers must use class components to manage state

B Route handlers run on the server and can access environment variables securely

C Route handlers automatically cache responses on the client side

D Route handlers can only export one HTTP method function per file

💡 Hint

Think about server vs client environment and how Next.js handles route handlers.

Route handlers in Next.js run on the server, so they can safely access environment variables. They can export multiple HTTP method functions per file. They do not cache responses automatically, and they are functions, not components.