Why database access matters in NextJS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do Next.js Server Components prefer direct database access?

In Next.js, Server Components can fetch data directly from a database. Why is this approach preferred over fetching data via client-side API calls?

A Because client-side API calls are faster and more secure than server-side database access.

B Because Server Components cannot fetch data from APIs, only databases.

C Because Server Components run on the server, they can securely access the database without exposing credentials to the client.

D Because direct database access on the client improves SEO and performance.

💡 Hint

Think about where the code runs and what information should stay secret.

Server Components run on the server, so they can safely connect to databases without exposing sensitive credentials to users. Client-side code runs in browsers and should never have direct database access.

❓ component_behavior

intermediate

What happens if a Next.js Client Component tries to access the database directly?

Consider a Next.js Client Component that attempts to import a database client and query data directly. What will happen when this component runs in the browser?

A It will successfully fetch data because the browser can connect to databases directly.

B It will throw a runtime error because database clients cannot run in the browser environment.

C It will silently fail and return empty data without errors.

D It will fetch data but expose database credentials to the user.

💡 Hint

Remember where client components run and what environment they have.

Client Components run in the browser, which cannot run Node.js database clients. Attempting to do so causes runtime errors.

❓ state_output

advanced

What is the rendered output of this Next.js Server Component with database access?

Given the following Next.js Server Component code that fetches user names from a database, what will be rendered?

NextJS

import { db } from '@/lib/db';

export default async function UserList() {
  const users = await db.user.findMany({ select: { name: true } });
  return (
    <ul>
      {users.map(user => <li key={user.name}>{user.name}</li>)}
    </ul>
  );
}

A <ul><li>Alice</li><li>Bob</li><li>Carol</li></ul>

B <ul><li>undefined</li><li>undefined</li></ul>

C <ul></ul>

D Runtime error: db.user.findMany is not a function

💡 Hint

Assume the database has users named Alice, Bob, and Carol.

The Server Component fetches user names from the database and renders them as list items. Since the database returns these users, the list shows their names.

📝 Syntax

advanced

Which option correctly uses Next.js Server Actions to update a database record?

Next.js Server Actions allow server-side functions to be called from client components. Which code snippet correctly defines a Server Action to update a user's name in the database?

A

export async function updateUserName(id, newName) {
  await fetch('/api/updateUser', { method: 'POST', body: JSON.stringify({ id, newName }) });
}

B

export const updateUserName = async (id, newName) => {
  await db.user.update({ where: { id }, data: { name: newName } });
};

C

export function updateUserName(id, newName) {
  db.user.update({ where: { id }, data: { name: newName } });
}

D

export async function updateUserName(id, newName) {
  await db.user.update({ where: { id }, data: { name: newName } });
}

💡 Hint

Server Actions must be async functions that perform server-side logic directly.

Option D correctly defines an async function that updates the database directly. Option D is valid syntax but does not mark the function as a Server Action explicitly. Option D calls an API instead of direct DB access. Option D is missing async and await, causing potential issues.

🔧 Debug

expert

Why does this Next.js Server Component fail to fetch data from the database?

Examine the following Next.js Server Component code. It throws an error when trying to fetch data. What is the most likely cause?

NextJS

import { db } from '@/lib/db';

export default async function ProductList() {
  const products = await db.product.findMany();
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

A The function is not async, so awaiting the database call is missing, causing products to be a Promise, not an array.

B The import path '@/lib/db' is incorrect and causes a module not found error.

C The map function is used incorrectly; it should be forEach instead.

D The database client does not support findMany method.

💡 Hint

Consider how async database calls work in JavaScript functions.

The database call returns a Promise. Without marking the component async and awaiting the Promise, products is a Promise object, so calling map on it causes an error.