What is 'use client' - Next.js 13+

Question

In a Next.js 13+ (with the App Router) project, the line:

'use client';

is a directive that tells Next.js that this file is a Client Component — meaning it should be rendered on the client-side (in the browser), not on the server.

Why is 'use client' needed here?

You're using features that require client-side execution:

• useAppDispatch() and useAppSelector() are custom React hooks based on Redux, which depend on React's state and effects, both of which are client-side concepts.

• You're using onClick handlers to close the modal or open a WhatsApp link, which requires client-side interactivity.

Without 'use client', this component would default to being a Server Component (because the default in Next.js App Router is server-rendered), and you'd get an error like:

"Hooks can only be used in client components."

 

Summary

• 'use client'; is necessary when:

  • You use React hooks (useState, useEffect, useSelector, etc.)

  • You add event listeners (onClick, onChange, etc.)

  • You rely on browser APIs (window, localStorage, etc.)

• It must be at the very top of the file, before imports.

If you're working in the /app directory (App Router), this directive is especially important to manage which components run on the client.