---
title: "`\"use client\"` at the top of a page or layout (lint/page-level-use-client)"
description: "lint/page-level-use-client: Marking a route file as a client component ships the whole route tree (and every import) as JavaScript, disables server-only data…"
canonical: https://void-design.vercel.app/rules/lint/page-level-use-client
lastModified: 2026-09-16
---

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

`lint/page-level-use-client` · severity **warn** · category Lint · detected by `void lint` and `void audit`

## 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

- https://nextjs.org/docs/app/getting-started/server-and-client-components

## 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.

- `tw-dark-variant-os` `dark:` follows the OS, but the app toggles themes with a class/attribute — [lint/tw-dark-variant-os](https://void-design.vercel.app/rules/lint/tw-dark-variant-os)
- `tw-v3-renamed` Utility whose meaning changed between Tailwind v3 and v4 — [lint/tw-v3-renamed](https://void-design.vercel.app/rules/lint/tw-v3-renamed)
- `tw-important-soup` Many `!important` utilities in one file — [lint/tw-important-soup](https://void-design.vercel.app/rules/lint/tw-important-soup)
- `tw-arbitrary-sprawl` Many arbitrary colors / pixel values bypass the design tokens — [lint/tw-arbitrary-sprawl](https://void-design.vercel.app/rules/lint/tw-arbitrary-sprawl)
- `heavy-import` Heavy dependency imported into client code — [lint/heavy-import](https://void-design.vercel.app/rules/lint/heavy-import)
- `img-raw` Raw `<img>` in a Next.js app — [lint/img-raw](https://void-design.vercel.app/rules/lint/img-raw)
- `img-missing-dimensions` Image without width/height (or fill / aspect-ratio) — [lint/img-missing-dimensions](https://void-design.vercel.app/rules/lint/img-missing-dimensions)
- `image-priority-deprecated` `priority` on `next/image` is deprecated in Next 16 — [lint/image-priority-deprecated](https://void-design.vercel.app/rules/lint/image-priority-deprecated)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/page-level-use-client`