Move 'use client' into the component that needs it

I slapped 'use client' on the whole page to fix one error, and now half my components ship extra JavaScript for nothing.

Beginner to intermediateRead 5 minDoing: less than an hour5 steps

▶ Start

What you'll have at the end

Only the interactive widget carries 'use client', the rest of the tree still renders on the server, and the build passes

Before you start

You need

A Next.js App Router page that already renders correctly, with 'use client' sitting at the top of the whole file because of one small interactive piece.

Not covered

How the post's own title, date and body get fetched or cached before they reach this page.

Leans on

NextJS Cheat Sheetcovers the Server and Client Component split and how a server file can render a client one without joining its bundle.
React Frontend Framework Cheat Sheetcovers the composition pattern this recipe leans on when splitting one crowded component into two smaller ones.

Extract the piece that needs the browser

Find the one thing that needs a browser
Give that piece its own client file
Delete the directive and render it back in

Prove the boundary holds

Hand it something and read what breaks
Read the bytes the route now ships

Checked 25 Aug 2026

Part of the NextJS cookbook