Mocking data fetching in NextJS - Mini Project: Build & Apply

Mocking data fetching in Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of books. Instead of fetching real data from the internet, you will create mock data inside your app to simulate fetching.

🎯 Goal: Build a Next.js component that displays a list of book titles using mocked data fetching.

📋 What You'll Learn

Create a mock data array of books

Add a configuration variable for the number of books to show

Use a React component with useState and useEffect to simulate fetching the mock data

Render the list of book titles in the component

💡 Why This Matters

🌍 Real World

Mocking data fetching helps you build and test UI components without needing a real backend or internet connection.

💼 Career

Understanding how to mock data is important for frontend developers to create reliable and fast prototypes and tests.

1

Create mock data array

Create a constant called mockBooks that is an array of objects. Each object should have id and title properties. Use these exact entries: { id: 1, title: 'The Great Gatsby' }, { id: 2, title: '1984' }, { id: 3, title: 'To Kill a Mockingbird' }.

NextJS

// Create the mockBooks array with 3 book objects
// Your code here

Hint

Use const to declare mockBooks as an array of objects with id and title.

2

Add configuration for number of books to show

Create a constant called booksToShow and set it to 2. This will control how many books to display from the mock data.

NextJS

const mockBooks = [
  { id: 1, title: 'The Great Gatsby' },
  { id: 2, title: '1984' },
  { id: 3, title: 'To Kill a Mockingbird' }
];

// Create booksToShow constant and set it to 2
// Your code here

Hint

Use const booksToShow = 2; to set the number of books to display.

3

Create React component with mock fetching

Create a React functional component called BookList. Inside it, use useState to create a state variable books initialized to an empty array. Use useEffect to simulate fetching by setting books to the first booksToShow items from mockBooks when the component mounts.

NextJS

const mockBooks = [
  { id: 1, title: 'The Great Gatsby' },
  { id: 2, title: '1984' },
  { id: 3, title: 'To Kill a Mockingbird' }
];

const booksToShow = 2;

// Create BookList component with useState and useEffect
// Your code here

Hint

Use useState to hold books and useEffect with an empty dependency array to set books once on mount.

4

Render the list of book titles

Inside the BookList component's return, render an unordered list <ul>. Use books.map to create a list item <li> for each book showing its title. Add a key prop to each <li> using the book's id.

NextJS

import React, { useState, useEffect } from 'react';

const mockBooks = [
  { id: 1, title: 'The Great Gatsby' },
  { id: 2, title: '1984' },
  { id: 3, title: 'To Kill a Mockingbird' }
];

const booksToShow = 2;

export default function BookList() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    setBooks(mockBooks.slice(0, booksToShow));
  }, []);

  // Render the list of book titles inside 
  // Your code here
}

Hint

Use books.map inside the return to create <li> elements with keys and titles.

Practice

1. What is the main purpose of mocking data fetching in a Next.js app?

easy

A. To encrypt data before sending it

B. To speed up the production server

C. To permanently store data on the client

D. To simulate data retrieval without needing a real server

Solution

1. Step 1: Understand mocking concept

   Mocking means pretending to get data, so you don't rely on a real server.

2. Step 2: Identify purpose in Next.js

   This helps build and test UI without waiting for real backend responses.

3. Final Answer:

   To simulate data retrieval without needing a real server -> Option D

4. Quick Check:

   Mocking = Simulate data fetching [OK]

Hint: Mocking means faking data to test without a real server [OK]

Common Mistakes:

• Thinking mocking speeds up production
• Confusing mocking with data storage
• Assuming mocking encrypts data

2. Which of the following is the correct way to create a mock async data fetch function in Next.js?

easy

A. async function fetchData() { return new Promise(resolve => setTimeout(() => resolve({ data: [] }), 1000)); }

B. const fetchData = () => { return { data: [] }; }

C. function fetchData() { setTimeout(() => { return { data: [] }; }, 1000); }

D. const fetchData = async () => { return setTimeout(() => ({ data: [] }), 1000); }

Solution

1. Step 1: Check async function syntax

   async function fetchData() { return new Promise(resolve => setTimeout(() => resolve({ data: [] }), 1000)); } correctly returns a Promise that resolves after 1 second with data.

2. Step 2: Identify incorrect patterns

   const fetchData = () => { return { data: [] }; } is synchronous, C does not return a Promise, D returns timeout ID, not data.

3. Final Answer:

   async function fetchData() { return new Promise(resolve => setTimeout(() => resolve({ data: [] }), 1000)); } -> Option A

4. Quick Check:

   Async + Promise + delay = async function fetchData() { return new Promise(resolve => setTimeout(() => resolve({ data: [] }), 1000)); } [OK]

Hint: Async functions must return a Promise to mock delays [OK]

Common Mistakes:

• Returning data synchronously without Promise
• Using setTimeout without Promise
• Returning timeout ID instead of data

3. Given this mock fetch function in Next.js:

async function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve({ users: ["Alice", "Bob"] }), 500));
}

fetchData().then(data => console.log(data.users));

What will be logged to the console?

medium

A. Promise { <pending> }

B. undefined

C. ["Alice", "Bob"]

D. Error: fetchData is not a function

Solution

1. Step 1: Understand the Promise resolution

   The function returns a Promise that resolves after 500ms with an object containing users array.

2. Step 2: Check the then callback

   The then callback logs data.users, which is ["Alice", "Bob"].

3. Final Answer:

   ["Alice", "Bob"] -> Option C

4. Quick Check:

   Promise resolves to users array logged [OK]

Hint: Promise.then logs resolved data, not the Promise itself [OK]

Common Mistakes:

• Expecting immediate data without waiting
• Logging the Promise object instead of resolved value
• Confusing function call with undefined

4. Identify the error in this mock data fetch function:

async function fetchData() {
  setTimeout(() => {
    return { data: [1, 2, 3] };
  }, 1000);
}

medium

A. setTimeout cannot be used inside async functions

B. The function does not return a Promise, so data is undefined

C. The return statement inside setTimeout is invalid syntax

D. The function should not be async if using setTimeout

Solution

1. Step 1: Analyze return behavior

   The function does not return anything; setTimeout callback's return is ignored.

2. Step 2: Understand async function expectations

   Async functions should return a Promise; here, no Promise is returned, so caller gets undefined.

3. Final Answer:

   The function does not return a Promise, so data is undefined -> Option B

4. Quick Check:

   Async function must return Promise, not just use setTimeout [OK]

Hint: Return a Promise to deliver data after delay [OK]

Common Mistakes:

• Assuming setTimeout return affects function return
• Thinking async forbids setTimeout
• Ignoring that async functions return Promises

5. You want to mock fetching user profiles with a delay and filter out users with empty names. Which code correctly mocks this in Next.js?

hard

A. async function fetchUsers() {
const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }];
return new Promise(resolve => setTimeout(() => resolve(users.filter(u => u.name)), 1000));
}

B. function fetchUsers() {
return [{ name: "", id: 1 }, { name: "Eve", id: 2 }].filter(u => u.name);
}

C. async function fetchUsers() {
const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }];
return users.filter(u => u.name);
}

D. async function fetchUsers() {
return new Promise(resolve => setTimeout(() => resolve([{ name: "", id: 1 }, { name: "Eve", id: 2 }]), 1000));
}

Solution

1. Step 1: Identify filtering and delay

   async function fetchUsers() { const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }]; return new Promise(resolve => setTimeout(() => resolve(users.filter(u => u.name)), 1000)); } filters out users with empty names and returns a Promise resolving after 1 second.

2. Step 2: Check other options

   A returns unfiltered data with delay, B performs filtering but is synchronous and non-async without delay, C returns filtered data synchronously without delay.

3. Final Answer:

   async function fetchUsers() { const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }]; return new Promise(resolve => setTimeout(() => resolve(users.filter(u => u.name)), 1000)); } -> Option A

4. Quick Check:

   Filter then delay with Promise = async function fetchUsers() { const users = [{ name: "", id: 1 }, { name: "Eve", id: 2 }]; return new Promise(resolve => setTimeout(() => resolve(users.filter(u => u.name)), 1000)); } [OK]

Hint: Filter data before resolving Promise with delay [OK]

Common Mistakes:

• Not filtering data before resolving
• Returning data synchronously without delay
• Using non-async functions for async behavior