Client-only modules in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a client-only module in Next.js?

A client-only module is a part of your Next.js app that runs only in the browser, not on the server. It is used for code that depends on browser APIs or user interactions.

beginner

How do you mark a module as client-only in Next.js 14+?

You add the directive 'use client' at the top of the module file. This tells Next.js to load and run this module only on the client side.

intermediate

Why should you avoid using server-only modules inside client-only modules?

Server-only modules use Node.js or server APIs that don't exist in the browser. Using them in client-only modules causes errors because the browser can't run server code.

intermediate

What happens if you forget to add 'use client' in a module that uses browser-only APIs?

Next.js will try to run the module on the server, causing errors like 'window is not defined' because browser APIs don't exist on the server.

beginner

Give an example of when to use a client-only module in Next.js.

Use client-only modules for things like handling user input, animations, or accessing localStorage, which only work in the browser.

What directive do you add to a Next.js module to make it client-only?

A 'use client'

B 'use server'

C 'client-only'

D 'browser-only'

The correct directive is 'use client' placed at the top of the module.

Which of these is a reason to use a client-only module?

A To run server-side authentication

B To run database queries

C To render static HTML

D To access browser APIs like localStorage

Browser APIs like localStorage only work in client-side code.

What error might you see if you use browser APIs in a server module?

A 'database connection failed'

B 'module not found'

C 'window is not defined'

D 'syntax error'

'window is not defined' happens because the server has no window object.

Where does a client-only module run in a Next.js app?

A In the browser only

B On the server only

C Both server and browser

D In the database

Client-only modules run exclusively in the browser.

What happens if you forget 'use client' in a module that uses React hooks?

A It runs fine without any issues

B Next.js treats it as a server component and errors may occur

C The module is ignored

D The app crashes immediately

React hooks require client components; without 'use client', Next.js treats the module as server-side.

Explain what a client-only module is in Next.js and why you would use it.

Think about where the code runs and what it needs to access.

Describe the consequences of not adding 'use client' to a module that uses browser features.

What happens when server tries to run browser code?