Why database access matters in NextJS - See It in Action

Why database access matters

📖 Scenario: You are building a simple Next.js app that shows a list of books from a database. This app helps users see available books easily.

🎯 Goal: Build a Next.js component that fetches book data from a database and displays it on the page.

📋 What You'll Learn

Create a mock database array of book objects

Add a configuration variable for minimum rating filter

Use a function to filter books by rating

Render the filtered books in a Next.js component

💡 Why This Matters

🌍 Real World

Many web apps need to get data from databases and show only relevant information to users, like filtering products or articles.

💼 Career

Understanding how to access and filter database data in Next.js is essential for building dynamic, user-friendly web applications.

1

DATA SETUP: Create a mock database array

Create a constant array called books with these exact objects: { id: 1, title: 'The Great Gatsby', rating: 4.3 }, { id: 2, title: '1984', rating: 4.7 }, and { id: 3, title: 'Moby Dick', rating: 3.9 }.

NextJS

// Create the books array with the given objects
// Your code here

Need a hint?

Use const books = [ ... ] with the exact objects inside.

2

CONFIGURATION: Add a minimum rating filter

Create a constant called minRating and set it to 4.0 to filter books by rating.

NextJS

const books = [
  { id: 1, title: 'The Great Gatsby', rating: 4.3 },
  { id: 2, title: '1984', rating: 4.7 },
  { id: 3, title: 'Moby Dick', rating: 3.9 }
];

// Create minRating constant
// Your code here

Need a hint?

Use const minRating = 4.0; exactly.

3

CORE LOGIC: Filter books by minimum rating

Create a constant called filteredBooks that filters books to include only those with rating greater than or equal to minRating using books.filter().

NextJS

const books = [
  { id: 1, title: 'The Great Gatsby', rating: 4.3 },
  { id: 2, title: '1984', rating: 4.7 },
  { id: 3, title: 'Moby Dick', rating: 3.9 }
];

const minRating = 4.0;

// Filter books by minRating
// Your code here

Need a hint?

Use books.filter(book => book.rating >= minRating) to create filteredBooks.

4

COMPLETION: Render filtered books in a Next.js component

Create a default exported React functional component called BooksList that returns a <ul> with each filteredBooks item rendered as a <li> showing the book title and rating. Use book.id as the key.

NextJS

const books = [
  { id: 1, title: 'The Great Gatsby', rating: 4.3 },
  { id: 2, title: '1984', rating: 4.7 },
  { id: 3, title: 'Moby Dick', rating: 3.9 }
];

const minRating = 4.0;

const filteredBooks = books.filter(book => book.rating >= minRating);

// Create BooksList component
// Your code here

Need a hint?

Use export default function BooksList() and return a <ul> with filteredBooks.map() rendering <li key={book.id}> showing title and rating.