Stop 11 · Next.jsTopics · 8/16

Client Components

In short

Buttons, forms, dropdowns and anything with state need the browser. Client Components are how you bring interactivity into an otherwise server-first Next.js app.

Components marked with `'use client'` that run in the browser and can use state, effects and event handlers — needed for any interactivity.

The jaadu sits on a sofa pressing a TV remote, with a broadcast tower far away.

Think of it like this

The remote control

The TV channel is broadcast from far away (the server). The remote in your hand changes the volume and channel instantly (the client). You want both: the heavy content from the station, and a small remote that responds to your fingers.

Watch it happen

Where "use client" belongs

Page (server)

Header

Article

PostBody

LikeButton

Comments

1/3Most of the page renders on the server: header, post text and comments. No JavaScript shipped for them.

The big ideas

What you need to know

"use client" at the top

This line marks the file, and everything it imports, as client code.

Hooks and events work

useState, useEffect, onClick, browser APIs like localStorage: all available here.

Keep them small

Push "use client" down to the leaves, like a LikeButton, not the whole page.

Server inside client via children

A Client Component can't import a Server Component, but it can receive one as children.

See it in code

Walk through the code

tsx

1// app/components/LikeButton.tsx2"use client";3import { useState } from "react";4 5export function LikeButton({ initial }: { initial: number }) {6  const [count, setCount] = useState(initial);7  return <button onClick={() => setCount(count + 1)}>Like {count}</button>;8}9 10// app/posts/[id]/page.tsx  (still a Server Component)11// const post = await getPost(id);12// return <article>{post.body}<LikeButton initial={post.likes} /></article>;

1/3"use client" goes at the very top, then you can import hooks.

The page fetches on the server and passes plain data down. Only the tiny button ships JavaScript to the browser.

Save yourself the pain

Common mistakes

Oops

Putting "use client" in layout.tsx to fix one error.

Do this instead

That turns everything below into client code. Move just the interactive bit into its own Client Component.

Oops

Passing a function or a database object as a prop from server to client.

Do this instead

Props crossing the boundary must be serialisable: strings, numbers, plain objects, arrays. Server Actions are the exception.

Your mission

Split a page

~20 min

Quick check

Your page needs one toggle button. What's the best setup?

Go deeper

1Add `'use client'` to a component that needs `useState` or an `onClick` handler.
2Learn to keep the client-component boundary as small and deep as possible for performance.
3Practice passing server-fetched data into a client component as props.