Server-only modules in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js server component importing a server-only module?

Consider a Next.js server component that imports a server-only module to fetch data. What will be rendered on the client?

NextJS

import getData from './server-only-module';

export default async function Page() {
  const data = await getData();
  return <div>{data.message}</div>;
}

// server-only-module.js
import 'server-only';
export default async function getData() {
  return { message: 'Hello from server!' };
}

A <div>Hello from server!</div>

B <div>[object Promise]</div>

C Error: Module not found on client

D <div>undefined</div>

💡 Hint

Think about where server-only modules run and how data is fetched before rendering.

The server-only module runs on the server, so the data is fetched before rendering. The component renders the message correctly as "Hello from server!" on the client.

📝 Syntax

intermediate

Which import statement correctly imports a server-only module in Next.js?

Given a server-only module at lib/server-utils.js, which import statement is valid in a server component?

A import utils from 'lib/server-utils';

B import utils from './server-utils';

C import utils from '../lib/server-utils';

D import utils from '/lib/server-utils';

💡 Hint

Consider relative paths and module resolution in Next.js.

Using a relative path like ../lib/server-utils correctly imports the module from the parent directory's lib folder. Absolute or root-based imports without configuration will cause errors.

🔧 Debug

advanced

Why does this Next.js server component fail to compile when importing a server-only module in a client component?

Examine the code below. Why does it cause a build error?

NextJS

// client-component.jsx
'use client';
import secret from '../lib/server-secret';

export default function ClientComponent() {
  return <div>{secret}</div>;
}

// lib/server-secret.js
import 'server-only';
const secret = 'top-secret';
export default secret;

A Client components cannot import server-only modules, causing a build error.

B The 'use client' directive is missing in the server-secret module.

C The import path '../lib/server-secret' is invalid.

D The secret variable is not exported correctly.

💡 Hint

Think about the difference between client and server components and module usage.

Client components cannot import server-only modules because server-only modules may use Node.js APIs unavailable in the browser. This causes a build error.

❓ state_output

advanced

What is the value of 'result' after running this Next.js server component code?

Given the server-only module and server component below, what is the value of result?

NextJS

// server-only-module.js
import 'server-only';
export function compute() {
  return 42;
}

// page.jsx
import { compute } from './server-only-module';

export default function Page() {
  const result = compute();
  return <div>{result}</div>;
}

A undefined

B 42

C Error: compute is not a function

D null

💡 Hint

Consider how server-only modules export functions and how they are used in server components.

The compute function returns 42. The server component calls it and assigns the result to result. So result is 42.

🧠 Conceptual

expert

Which statement best describes the behavior of server-only modules in Next.js?

Choose the most accurate description of server-only modules in Next.js.

A Server-only modules are deprecated and replaced by client components in Next.js.

B Server-only modules can be imported by both client and server components without restrictions.

C Server-only modules run on the client but fetch data from the server asynchronously.

D Server-only modules run exclusively on the server and cannot be imported by client components.

💡 Hint

Think about where server-only modules execute and their import limitations.

Server-only modules run only on the server and cannot be imported by client components because they may use Node.js APIs unavailable in browsers.