Why Route handlers (route.ts) in NextJS? - Purpose & Use Cases

The Big Idea

Discover how route handlers turn messy URL code into clean, easy-to-manage functions!

The Scenario

Imagine building a website where every URL needs special code to decide what to show or do. You write separate files or functions for each URL, and manually connect them all. When you want to change one route, you hunt through many files and lines of code.

The Problem

This manual way is confusing and slow. It's easy to make mistakes like linking the wrong URL or forgetting to handle errors. Your code becomes messy and hard to update, especially as your site grows bigger.

The Solution

Route handlers in route.ts let you organize all URL logic in one place with clear, simple functions. Next.js automatically connects these handlers to the right URLs, so you focus on what each route should do, not how to link it.

Before vs After

✗ Before

app.get('/api/data', (req, res) => { res.send('data') })

✓ After

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

What It Enables

This makes building and maintaining web routes fast, clean, and less error-prone, letting you focus on delivering great features.

Real Life Example

Think of an online store where each product page, cart, and checkout has its own route handler. With route.ts, you write clear code for each action, and Next.js handles the rest.

Key Takeaways

Manual route setup is slow and error-prone.

route.ts centralizes route logic with simple functions.

Next.js auto-connects handlers to URLs, speeding development.

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()