Server action in client components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark the function as a server action.

NextJS

export const addItem = async () => {
  'use [1]';
  // server logic here
};

Drag options to blanks, or click blank then click option'

Aclient

Bserver

Caction

Duse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use client' instead of 'use server'.

Forgetting the quotes around the directive.

The directive 'use server' marks the function as a server action in Next.js.

2fill in blank

medium

Complete the client component to import the server action correctly.

NextJS

import { [1] } from './actions';

export default function ClientComponent() {
  return <button onClick={() => addItem()}>Add</button>;
}

Drag options to blanks, or click blank then click option'

AaddItemAction

BuseServer

CaddItem

DserverAction

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a wrong or non-existent name.

Trying to import a hook instead of the function.

You import the server action function by its exported name, here 'addItem'.

3fill in blank

hard

Fix the error in the client component to call the server action properly.

NextJS

export default function ClientComponent() {
  const handleClick = async () => {
    await [1]();
  };
  return <button onClick={handleClick}>Add</button>;
}

Drag options to blanks, or click blank then click option'

AaddItem

BaddItem.call

CaddItem()

DaddItem.invoke

Attempts:

3 left

💡 Hint

Common Mistakes

Putting parentheses inside the await expression incorrectly.

Using non-existent methods like .call or .invoke.

You pass the function name without parentheses to call it inside the async function.

4fill in blank

hard

Fill both blanks to define a server action and export it for client use.

NextJS

export const [1] = async () => {
  'use [2]';
  // server code
};

Drag options to blanks, or click blank then click option'

AsubmitForm

Bclient

Cserver

DhandleSubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use client' directive inside server action.

Choosing a function name that doesn't match usage.

The function name can be 'submitForm' and the directive must be 'use server' to mark it as a server action.

5fill in blank

hard

Fill all three blanks to create a client component that calls a server action on button click.

NextJS

import { [1] } from './actions';

export default function ClientComp() {
  const handleClick = async () => {
    await [2]();
  };
  return <button onClick=[3]>Submit</button>;
}

Drag options to blanks, or click blank then click option'

AsubmitForm

ChandleClick

DaddItem

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function directly in onClick instead of passing a function.

Mismatching import and call names.

Import the server action 'submitForm', call it inside handleClick, and assign handleClick to the button's onClick.