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

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

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

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

Hint

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

Practice

1. What is the main purpose of using try...catch blocks in Next.js server-side functions?

easy

A. To style components dynamically

B. To catch and handle errors gracefully during server-side execution

C. To improve client-side rendering speed

D. To manage user authentication on the client

Solution

1. Step 1: Understand server-side error handling

   Server-side functions can fail due to unexpected issues. Using try...catch helps catch these errors.

2. Step 2: Purpose of try...catch

   The try block runs code that might fail, and the catch block handles errors to prevent crashes and provide feedback.

3. Final Answer:

   To catch and handle errors gracefully during server-side execution -> Option B

4. Quick Check:

   Error handling = catch errors gracefully [OK]

Hint: Try-catch blocks catch errors on the server side [OK]

Common Mistakes:

• Confusing client-side and server-side error handling
• Thinking try-catch improves UI styling
• Assuming try-catch speeds up rendering

2. Which of the following is the correct syntax to catch errors in a Next.js server function?

easy

A. try { /* code */ } handle (error) { /* handle error */ }

B. catch { /* code */ } try (error) { /* handle error */ }

C. try { /* code */ } catch (error) { /* handle error */ }

D. try: { /* code */ } except (error) { /* handle error */ }

Solution

1. Step 1: Recall JavaScript error handling syntax

   The correct syntax uses try { ... } catch (error) { ... } to catch errors.

2. Step 2: Identify correct option

   try { /* code */ } catch (error) { /* handle error */ } matches the correct syntax. Other options use invalid keywords or order.

3. Final Answer:

   try { /* code */ } catch (error) { /* handle error */ } -> Option C

4. Quick Check:

   Correct try-catch syntax = try { /* code */ } catch (error) { /* handle error */ } [OK]

Hint: Remember: try then catch with parentheses [OK]

Common Mistakes:

• Using incorrect keywords like except or handle
• Swapping try and catch blocks
• Omitting parentheses after catch

3. Consider this Next.js server function snippet:

export async function GET() {
  try {
    throw new Error('Failed to fetch data');
  } catch (error) {
    return new Response(error.message, { status: 500 });
  }
}

What will be the HTTP status code returned when this function runs?

medium

A. 400

B. 404

C. 200

D. 500

Solution

1. Step 1: Analyze the thrown error

   The function throws an error with message 'Failed to fetch data'.

2. Step 2: Check the catch block response

   The catch block returns a Response with status 500, indicating a server error.

3. Final Answer:

   500 -> Option D

4. Quick Check:

   Server error status code = 500 [OK]

Hint: Error caught returns status 500 by default [OK]

Common Mistakes:

• Assuming status 200 despite error
• Confusing 404 (not found) with server error
• Ignoring the status property in Response

4. Identify the error in this Next.js server function code:

export async function GET() {
  try {
    const data = await fetch('https://api.example.com/data');
    return new Response(JSON.stringify(data));
  } catch (error) {
    return new Response('Error occurred', { status: 500 });
  }
}

medium

A. Not parsing fetch response to JSON before stringifying

B. Missing await on fetch call

C. Incorrect status code in catch block

D. No error handling implemented

Solution

1. Step 1: Understand fetch response handling

   The fetch call returns a Response object, not the actual data. We must call response.json() to parse it.

2. Step 2: Identify missing JSON parsing

   The code stringifies the Response object directly without parsing JSON, which is incorrect.

3. Final Answer:

   Not parsing fetch response to JSON before stringifying -> Option A

4. Quick Check:

   Parse response.json() before JSON.stringify() [OK]

Hint: Always parse fetch response with .json() before use [OK]

Common Mistakes:

• Stringifying the Response object directly
• Forgetting to await response.json()
• Assuming fetch returns JSON data directly

5. You want to create a Next.js server function that fetches user data and returns a 404 status if the user is not found, or a 500 status if the fetch fails. Which code snippet correctly implements this error handling?

hard

A. export async function GET() {
try {
const res = await fetch('https://api.example.com/user');
if (!res.ok) {
if (res.status === 404) return new Response('User not found', { status: 404 });
throw new Error('Fetch failed');
}
const user = await res.json();
return new Response(JSON.stringify(user));
} catch {
return new Response('Server error', { status: 500 });
}
}

B. export async function GET() {
const res = await fetch('https://api.example.com/user');
if (res.status === 404) return new Response('User not found', { status: 404 });
const user = await res.json();
return new Response(JSON.stringify(user));
}

C. export async function GET() {
try {
const user = await fetch('https://api.example.com/user').json();
return new Response(JSON.stringify(user));
} catch (error) {
return new Response('User not found', { status: 404 });
}
}

D. export async function GET() {
try {
const res = await fetch('https://api.example.com/user');
const user = await res.json();
return new Response(JSON.stringify(user));
} catch {
return new Response('User not found', { status: 404 });
}
}

Solution

1. Step 1: Check for HTTP errors explicitly

   export async function GET() { try { const res = await fetch('https://api.example.com/user'); if (!res.ok) { if (res.status === 404) return new Response('User not found', { status: 404 }); throw new Error('Fetch failed'); } const user = await res.json(); return new Response(JSON.stringify(user)); } catch { return new Response('Server error', { status: 500 }); } } checks res.ok and handles 404 with a specific response, throwing errors for other failures.

2. Step 2: Use try-catch for fetch failures

   The catch block returns a 500 status for server errors, correctly distinguishing error types.

3. Final Answer:

   Correctly handles 404 if the user is not found and 500 if the fetch fails -> Option A

4. Quick Check:

   Check res.ok and catch errors for 404 and 500 [OK]

Hint: Check res.ok and catch errors separately for 404 and 500 [OK]

Common Mistakes:

• Not checking res.ok before parsing JSON
• Returning 404 inside catch block incorrectly
• Assuming fetch throws on 404 automatically