Skip to content

Rule · Lint

"use client" at the top of a page or layout

lint/page-level-use-clientwarnvoid lintupdated

Why it matters

Marking a route file as a client component ships the whole route tree (and every import) as JavaScript, disables server-only data fetching and metadata exports, and delays text LCP until hydration. It is the single biggest first-load JS regression in App Router apps.

How to fix it

Keep page.tsx/layout.tsx as Server Components. Move the interactive part into a small leaf component with "use client" and render it from the page.

Example

tsx
// app/page.tsx (server)
import { Counter } from './counter'  // counter.tsx has "use client"
export default function Page() {
  return <main><h1>Pricing</h1><Counter /></main>
}

References

More lint rules

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.