Server-side error handling in NextJS - Mini Project: Build & Apply

Server-side error handling

📖 Scenario: You are building a Next.js API route that fetches user data from a database. Sometimes the database might fail or the user might not exist. You want to handle these errors gracefully on the server side so the client gets clear error messages.

🎯 Goal: Create a Next.js API route that fetches user data by ID and handles errors like missing users or server failures using proper server-side error handling.

📋 What You'll Learn

Create a mock user data object with exact user entries

Add a variable for the user ID to fetch

Write a server-side function to fetch user data and handle errors with try/catch

Return proper HTTP status codes and JSON error messages in the API response

💡 Why This Matters

🌍 Real World

Server-side error handling is essential in web apps to provide clear feedback to clients and avoid crashes when data is missing or servers fail.

💼 Career

Understanding how to handle errors in Next.js API routes is a key skill for backend and full-stack developers working with React and Next.js frameworks.

1

DATA SETUP: Create mock user data

Create a constant object called users with these exact entries: '1': { name: 'Alice', age: 30 }, '2': { name: 'Bob', age: 25 }, and '3': { name: 'Charlie', age: 35 }.

NextJS

// Your code here

Need a hint?

Use a constant object named users with keys as strings '1', '2', '3' and values as objects with name and age.

2

CONFIGURATION: Define the user ID to fetch

Create a constant called userId and set it to the string '2' to specify which user to fetch.

NextJS

const users = {
  '1': { name: 'Alice', age: 30 },
  '2': { name: 'Bob', age: 25 },
  '3': { name: 'Charlie', age: 35 }
};

// Your code here

Need a hint?

Define userId as a string with value '2'.

3

CORE LOGIC: Write server-side function with error handling

Write an async function called getUserData that takes id as a parameter. Inside, use a try/catch block. In try, if users[id] does not exist, throw an error with message 'User not found'. Otherwise, return users[id]. In catch, rethrow the error.

NextJS

const users = {
  '1': { name: 'Alice', age: 30 },
  '2': { name: 'Bob', age: 25 },
  '3': { name: 'Charlie', age: 35 }
};

const userId = '2';

// Your code here

Need a hint?

Use async function getUserData(id) with try/catch. Throw error if user missing, else return user.

4

COMPLETION: Create Next.js API route with error responses

Export an async default function called handler that takes req and res. Inside, use try/catch. In try, call getUserData(userId) and respond with res.status(200).json(user). In catch, if error message is 'User not found', respond with res.status(404).json({ error: 'User not found' }). Otherwise, respond with res.status(500).json({ error: 'Server error' }).

NextJS

const users = {
  '1': { name: 'Alice', age: 30 },
  '2': { name: 'Bob', age: 25 },
  '3': { name: 'Charlie', age: 35 }
};

const userId = '2';

async function getUserData(id) {
  try {
    if (!users[id]) {
      throw new Error('User not found');
    }
    return users[id];
  } catch (error) {
    throw error;
  }
}

// Your code here

Need a hint?

Use export default async function handler(req, res) with try/catch. Return 200 with user or 404/500 with error JSON.