Server-only modules in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a server-only module in Next.js.

NextJS

import db from '[1]';

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

A'client/db'

B'server/db'

C'public/db'

D'components/db'

Attempts:

3 left

💡 Hint

Common Mistakes

Importing server modules from client paths

Using public or component paths for server code

Server-only modules are imported from server-specific paths like 'server/db' in Next.js.

2fill in blank

medium

Complete the code to export a server-only function in Next.js.

NextJS

export async function [1]() {
  // server logic here
}

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

AfetchData

BuseEffect

CrenderUI

DhandleClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-side hooks or handlers in server code

Server-only functions often fetch data or perform backend logic, so fetchData fits best.

3fill in blank

hard

Fix the error in importing a server-only module in Next.js.

NextJS

import [1] from 'server/utils';

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

AuseState

BuseRouter

CgetServerSession

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Importing client hooks from server modules

Using UI components in server-only imports

getServerSession is a server-only function, so it should be imported from a server module.

4fill in blank

hard

Fill both blanks to correctly import and use a server-only function in Next.js.

NextJS

import [1] from 'server/auth';

export async function handler() {
  const session = await [2]();
  return session;
}

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

AgetServerSession

BfetchUser

CuseSession

DsignIn

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing client hooks like useSession with server imports

getServerSession is the correct server-only function to import and call for session data.

5fill in blank

hard

Fill all three blanks to create a server-only API route handler in Next.js.

NextJS

import [1] from 'server/db';

export async function [2](req) {
  const data = await [3]();
  return new Response(JSON.stringify(data));
}

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

AgetData

BGET

CfetchAll

DdbQuery

Attempts:

3 left

💡 Hint

Common Mistakes

Using client functions in server API routes

Wrong HTTP method function name

getData is imported from the server database module, GET is the HTTP method handler, and getData fetches the data.