Use server directive in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this server component?

Consider this Next.js server component using the use server directive:

"use server";

export default async function Greeting() {
  const name = await fetchName();
  return <h1>Hello, {name}!</h1>;
}

async function fetchName() {
  return "Alice";
}

What will this component render on the page?

NextJS

"use server";

export default async function Greeting() {
  const name = await fetchName();
  return <h1>Hello, {name}!</h1>;
}

async function fetchName() {
  return "Alice";
}

A <h1>Hello, undefined!</h1>

B <h1>Hello, Alice!</h1>

C Error: fetchName is not defined

D <h1>Hello, {name}!</h1>

💡 Hint

Remember that server components can await async functions and render their results directly.

The component uses the use server directive, so it runs on the server. It awaits fetchName() which returns "Alice". The component then renders <h1>Hello, Alice!</h1>.

📝 Syntax

intermediate

Which option correctly uses the use server directive?

Which of the following Next.js component snippets correctly applies the use server directive?

A

export default function MyComponent() {
  return <p>Server component</p>;
}
"use server";

B

export default function MyComponent() {
  "use server";
  return <p>Server component</p>;
}

C

export default function MyComponent() {
  return <p>Server component</p>;
}
// use server

D

"use server";

export default function MyComponent() {
  return <p>Server component</p>;
}

💡 Hint

The use server directive must be the first statement in the file or component.

The use server directive is a special directive that must appear as the first statement in the file or component to mark it as a server component. Only option D places it correctly.

❓ state_output

advanced

What is the value of count after this server action?

Given this Next.js server component with a server action:

"use server";

import { useState } from 'react';

let count = 0;

export default function Counter() {
  async function increment() {
    count += 1;
  }

  return (
    <button onClick={increment}>Clicked {count} times</button>
  );
}

What will be the value of count after clicking the button 3 times?

NextJS

"use server";

import { useState } from 'react';

let count = 0;

export default function Counter() {
  async function increment() {
    count += 1;
  }

  return (
    <button onClick={increment}>Clicked {count} times</button>
  );
}

A 0

B NaN

C Error: count is not reactive

D 3

💡 Hint

Remember server components do not keep state between renders on the client.

The count variable is a module-level variable on the server. Each click triggers a server action but the component does not re-render on the client with updated state. So the displayed count remains 0.

🔧 Debug

advanced

Why does this server action cause a runtime error?

Examine this Next.js server component:

"use server";

export default function Form() {
  async function submit(data) {
    await saveData(data);
  }

  return (
    <form action={submit}>
      <input name="text" />
      <button type="submit">Send</button>
    </form>
  );
}

async function saveData(data) {
  console.log(data.text.toUpperCase());
}

When submitting the form, a runtime error occurs. What is the cause?

NextJS

"use server";

export default function Form() {
  async function submit(data) {
    await saveData(data);
  }

  return (
    <form action={submit}>
      <input name="text" />
      <button type="submit">Send</button>
    </form>
  );
}

async function saveData(data) {
  console.log(data.text.toUpperCase());
}

A submit function is missing 'use server' directive

B saveData is not async

C data.text is undefined because form data is a FormData object, not a plain object

D input element lacks a value attribute

💡 Hint

Check the type of data received by the server action.

The submit function receives a FormData object, not a plain object. Accessing data.text is undefined. You must use data.get('text') to get the input value.

🧠 Conceptual

expert

Which statement about the use server directive is TRUE?

Choose the correct statement about the use server directive in Next.js:

A It marks a component or function to run only on the server and allows using server-only APIs.

B It enables client-side state management inside server components.

C It automatically converts client components to server components at build time.

D It allows server components to directly access browser APIs like <code>window</code>.

💡 Hint

Think about where server components run and what APIs they can access.

The use server directive marks code to run on the server only, enabling use of server-only APIs like database access. It does not enable client-side state or browser APIs.