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

Need a 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

Need a 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

Need a 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
}

Need a hint?

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