Route handlers (route.ts) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a route.ts file in Next.js?

A route.ts file defines server-side route handlers that respond to HTTP requests like GET, POST, etc., for a specific API route in Next.js.

beginner

How do you export a GET handler in route.ts?

You export an async function named GET that takes a Request object and returns a Response object.

intermediate

Why should route handlers in Next.js be asynchronous?

Because they often perform tasks like fetching data or writing to a database, which are asynchronous operations. Using async lets the server wait for these tasks without blocking.

beginner

What is the difference between a route handler and a React component in Next.js?

A route handler in route.ts runs on the server to handle HTTP requests, while a React component runs on the client or server to render UI.

beginner

How can you send JSON data from a route handler?

Return a Response with JSON.stringify data and set the Content-Type header to application/json.

Which function name is used to handle POST requests in route.ts?

A POST

B getPost

C handlePost

D postHandler

In Next.js route handlers, you export an async function named exactly POST to handle POST requests.

What should a route handler return in Next.js?

A A React component

B A Response object

C A JSON object directly

D An HTML string

Route handlers must return a Response object that represents the HTTP response.

Where do route handler files like route.ts live in a Next.js project?

A In the <code>components</code> folder

B In the <code>pages/api</code> folder

C Anywhere in the project

D In the <code>app</code> directory under the route folder

In Next.js App Router, route handlers live inside the app directory within the folder for the route.

How do you access the request body in a POST route handler?

A Using <code>await request.json()</code>

B Using <code>request.body</code> directly

C Using <code>request.params</code>

D Using <code>request.query</code>

You use await request.json() to parse the JSON body from the incoming request.

Which HTTP methods can you handle in route.ts files?

A Only GET

B Only GET and POST

C GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD

D Only POST and PUT

You can export async functions named after any HTTP method to handle them in route handlers.

Explain how to create a simple GET route handler in Next.js using route.ts.

Think about how to respond to a GET request with JSON.

Describe the difference between client-side React components and server-side route handlers in Next.js.

Consider what each part does and where it runs.

Practice

1. What is the main purpose of a route.ts file in Next.js?

easy

A. To configure database connections

B. To style components using CSS modules

C. To create client-side React components

D. To define server-side code that handles HTTP requests for a specific URL

Solution

1. Step 1: Understand the role of route.ts

   The route.ts file is used in Next.js to write server-side code that responds to HTTP requests for a specific route.

2. Step 2: Compare with other options

   Styling, client components, and database configs are handled elsewhere, not in route.ts.

3. Final Answer:

   To define server-side code that handles HTTP requests for a specific URL -> Option D

4. Quick Check:

   Route handlers = server code for URLs [OK]

Hint: Route handlers handle server requests per URL [OK]

Common Mistakes:

• Confusing route.ts with client component files
• Thinking route.ts is for styling
• Assuming route.ts manages database directly

2. Which of the following is the correct way to export a GET handler in route.ts?

easy

A. export async function GET(request: NextRequest) { return NextResponse.json({ message: 'Hi' }) }

B. export function Get() { return 'Hello' }

C. export async function get() { return new Response('Hello') }

D. export async function fetch() { return 'Hello' }

Solution

1. Step 1: Recall Next.js route handler syntax

   Next.js expects exported async functions named exactly by HTTP method in uppercase, e.g., GET, with NextRequest parameter and returning NextResponse.

2. Step 2: Check each option

   export async function GET(request: NextRequest) { return NextResponse.json({ message: 'Hi' }) } matches correct syntax: async, uppercase GET, parameter, and returns NextResponse. Others have wrong function names, casing, or return types.

3. Final Answer:

   export async function GET(request: NextRequest) { return NextResponse.json({ message: 'Hi' }) } -> Option A

4. Quick Check:

   Uppercase method + NextRequest + NextResponse = correct [OK]

Hint: Use uppercase HTTP method and NextRequest param [OK]

Common Mistakes:

• Using lowercase method names like get instead of GET
• Missing NextRequest parameter
• Returning plain string instead of NextResponse

3. Given this route.ts code, what will be the JSON response body when a GET request is made?

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ success: true, data: [1, 2, 3] });
}

medium

A. undefined

B. {"success":true,"data":[1,2,3]}

C. {"error":"Method not allowed"}

D. [1, 2, 3]

Solution

1. Step 1: Analyze the GET handler return

   The GET function returns NextResponse.json with an object containing success: true and data: [1, 2, 3].

2. Step 2: Understand JSON response format

   This creates a JSON response with the exact object serialized as a JSON string.

3. Final Answer:

   {"success":true,"data":[1,2,3]} -> Option B

4. Quick Check:

   NextResponse.json outputs JSON string [OK]

Hint: NextResponse.json sends exact JSON object [OK]

Common Mistakes:

• Expecting just the array without wrapping object
• Confusing error responses with success
• Thinking response is undefined

4. Identify the error in this route.ts code snippet:

export async function POST(request: NextRequest) {
  const data = await request.json();
  return new Response(JSON.stringify(data));
}

export async function GET() {
  return new Response('Hello');
}

medium

A. Missing import of NextRequest

B. GET function must accept a request parameter

C. POST handler should return NextResponse, not Response

D. No error, code is correct

Solution

1. Step 1: Check imports

   The code uses NextRequest but does not import it from 'next/server'. This causes a runtime error.

2. Step 2: Validate other parts

   GET handler can omit request parameter if unused. Returning Response is allowed but NextResponse is preferred; not an error. So main error is missing import.

3. Final Answer:

   Missing import of NextRequest -> Option A

4. Quick Check:

   Using NextRequest requires import [OK]

Hint: Always import NextRequest when used [OK]

Common Mistakes:

• Forgetting to import NextRequest
• Thinking GET must have request param
• Confusing Response and NextResponse as errors

5. You want to create a route handler in route.ts that responds to both GET and POST requests. The GET returns a JSON list of users, and the POST adds a user from the request body and returns the updated list. Which code snippet correctly implements this behavior?

hard

A. export async function GET(request) {
return new Response(JSON.stringify(['Alice', 'Bob']));
}

export async function POST(request) {
const data = await request.json();
return new Response(JSON.stringify(['Alice', 'Bob']));
}

B. import { NextRequest } from 'next/server';

const users = [];

export function get() {
return users;
}

export function post(request) {
users.push(request.body.name);
return users;
}

C. import { NextRequest, NextResponse } from 'next/server';

let users = ['Alice', 'Bob'];

export async function GET() {
return NextResponse.json(users);
}

export async function POST(request: NextRequest) {
const newUser = await request.json();
users.push(newUser.name);
return NextResponse.json(users);
}

D. import { NextResponse } from 'next/server';

export async function GET() {
return NextResponse.json(['Alice', 'Bob']);
}

export async function POST() {
return NextResponse.json(['Alice', 'Bob', 'Charlie']);
}

Solution

1. Step 1: Check imports and state management

   import { NextRequest, NextResponse } from 'next/server'; let users = ['Alice', 'Bob']; export async function GET() { return NextResponse.json(users); } export async function POST(request: NextRequest) { const newUser = await request.json(); users.push(newUser.name); return NextResponse.json(users); } correctly imports NextRequest and NextResponse, and uses a mutable users array to store state between calls.

2. Step 2: Verify GET and POST handlers

   GET returns current users as JSON. POST reads JSON body, adds new user, then returns updated list. This matches requirements.

3. Step 3: Review other options

   import { NextRequest } from 'next/server'; const users = []; export function get() { return users; } export function post(request) { users.push(request.body.name); return users; } uses lowercase method names and no NextResponse, invalid in Next.js route handlers. export async function GET(request) { return new Response(JSON.stringify(['Alice', 'Bob'])); } export async function POST(request) { const data = await request.json(); return new Response(JSON.stringify(['Alice', 'Bob'])); } returns new Response but does not maintain state. import { NextResponse } from 'next/server'; export async function GET() { return NextResponse.json(['Alice', 'Bob']); } export async function POST() { return NextResponse.json(['Alice', 'Bob', 'Charlie']); } POST does not accept request or update users dynamically.

4. Final Answer:

   import { NextRequest, NextResponse } from 'next/server'; let users = ['Alice', 'Bob']; export async function GET() { return NextResponse.json(users); } export async function POST(request: NextRequest) { const newUser = await request.json(); users.push(newUser.name); return NextResponse.json(users); } -> Option C

5. Quick Check:

   Correct imports + state + async handlers = import { NextRequest, NextResponse } from 'next/server'; let users = ['Alice', 'Bob']; export async function GET() { return NextResponse.json(users); } export async function POST(request: NextRequest) { const newUser = await request.json(); users.push(newUser.name); return NextResponse.json(users); } [OK]

Hint: Use async GET/POST with NextRequest, NextResponse, and shared state [OK]

Common Mistakes:

• Using lowercase method names instead of uppercase
• Not importing NextRequest or NextResponse
• Not maintaining state between requests
• Ignoring async/await for request.json()