Response formatting in NextJS - Mini Project: Build & Apply

Next.js Response Formatting

📖 Scenario: You are building a simple Next.js API route that returns user data in a formatted JSON response. This is common when creating backend endpoints for web apps.

🎯 Goal: Create a Next.js API route that returns a JSON response with a status field and a data field containing user information.

📋 What You'll Learn

Create a Next.js API route handler function named handler

Define a user object with exact fields: id, name, and email

Create a response object with status set to success and data containing the user object

Return the response using Next.js res.status(200).json() method

💡 Why This Matters

🌍 Real World

API routes in Next.js are used to build backend endpoints that send JSON data to frontend apps or other services.

💼 Career

Understanding how to format and send JSON responses in Next.js API routes is essential for full-stack web development roles.

1

Create user data object

Create a constant called user with these exact fields and values: id set to 1, name set to "Alice", and email set to "[e-mail]".

NextJS

# Create the user object with id, name, and email
# Your code here

Need a hint?

Use const user = { id: 1, name: "Alice", email: "[e-mail]" } to create the object.

2

Create response object

Create a constant called response that is an object with status set to "success" and data set to the user object.

NextJS

const user = { id: 1, name: "Alice", email: "[e-mail]" };
# Create the response object with status and data
# Your code here

Need a hint?

Use const response = { status: "success", data: user } to create the response.

3

Create API route handler function

Create an exported async function called handler that takes req and res as parameters.

NextJS

const user = { id: 1, name: "Alice", email: "[e-mail]" };
const response = { status: "success", data: user };
# Create the exported async handler function with req and res
# Your code here

Need a hint?

Use export default async function handler(req, res) { } to define the API route.

4

Send JSON response

Inside the handler function, send the response object as JSON with HTTP status 200 using res.status(200).json(response).

NextJS

const user = { id: 1, name: "Alice", email: "[e-mail]" };
const response = { status: "success", data: user };

export default async function handler(req, res) {
  # Send the JSON response with status 200
  # Your code here
}

Need a hint?

Use res.status(200).json(response) to send the JSON response.