Route handlers (route.ts) in NextJS - Mini Project: Build & Apply

Create a Simple Next.js Route Handler

📖 Scenario: You are building a small Next.js API route to handle user greetings. This route will respond with a JSON message.

🎯 Goal: Build a Next.js route handler in route.ts that returns a JSON greeting message when accessed.

📋 What You'll Learn

Create a GET route handler function named GET in route.ts

Return a JSON response with a greeting message

Use Next.js NextResponse to send the response

Ensure the route handler is an async function

💡 Why This Matters

🌍 Real World

Next.js route handlers let you build backend API endpoints inside your Next.js app easily. This is useful for creating APIs without a separate server.

💼 Career

Understanding Next.js route handlers is important for frontend developers working with full-stack Next.js apps or building serverless functions.

1

Setup the route handler file

Create a file named route.ts and import NextResponse from next/server.

NextJS

// Import NextResponse from next/server
// Your code here

Need a hint?

Use import { NextResponse } from 'next/server'; to import the response helper.

2

Create an async GET function

Add an async function named GET that takes a Request parameter.

NextJS

import { NextResponse } from 'next/server';

// Create an async GET function with a Request parameter
// Your code here

Need a hint?

Write export async function GET(request: Request) {} to define the route handler.

3

Return a JSON greeting response

Inside the GET function, return a JSON response with the message { message: 'Hello from Next.js route!' } using NextResponse.json().

NextJS

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  // Return JSON response here
  // Your code here
}

Need a hint?

Use return NextResponse.json({ message: 'Hello from Next.js route!' }); to send JSON.

4

Export the route handler

Ensure the GET function is exported so Next.js can use it as a route handler.

NextJS

import { NextResponse } from 'next/server';

// Confirm the GET function is exported
// Your code here

Need a hint?

The function must be exported with export async function GET.