---
title: "Client-only APIs in a Server Component (next/server-hooks)"
description: "Server Components render once on the server: React state/effect hooks, Next navigation hooks and browser globals (window, document, localStorage…) do not exist there."
url: http://localhost:4173/rules/next/server-hooks
updated: 2026-11-11
---

# Client-only APIs in a Server Component

> `next/server-hooks` is a vetd rule. It flags: Client-only APIs in a Server Component. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `next/server-hooks` |
| Severity | error |
| Group | Server and client boundaries |
| Tags | react, nextjs-16, correctness |

## Why it matters

Server Components render once on the server: React state/effect hooks, Next navigation hooks and browser globals (window, document, localStorage…) do not exist there. Next.js fails the build for hooks and the render crashes for browser globals.

## How to fix it

Move the interactive part into a "use client" component and render it from the Server Component, or guard the browser access with `typeof window !== "undefined"`.

## Credit

Based on work by:

- [React team](https://react.dev): Server Components render ahead of time on the server and cannot use state, effects or browser APIs; interactivity needs a 'use client' boundary.
- [Next.js team](https://nextjs.org): Documents which hooks and browser APIs belong in Client Components and how to split them off with 'use client'.

## References

- [Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components), Next.js
- [Server Components – React](https://react.dev/reference/rsc/server-components), React
- ['use client' directive](https://react.dev/reference/rsc/use-client), React

## See it

Demos in the vetd Lab:

- ['use client' at the leaves](http://localhost:4173/lab/nextjs/client-boundary-at-the-leaves)
- [Browser-only packages](http://localhost:4173/lab/nextjs/browser-only-packages)

## Related rules

- [`next/async-client-component`](http://localhost:4173/rules/next/async-client-component.md)
- [`next/non-serializable-props`](http://localhost:4173/rules/next/non-serializable-props.md)
- [`next/server-only-in-client`](http://localhost:4173/rules/next/server-only-in-client.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "next/server-hooks" }`. CLI: `npx vetd explain next/server-hooks`.

---

[All 92 rules](http://localhost:4173/rules.md) · Next: [`next/non-serializable-props`](http://localhost:4173/rules/next/non-serializable-props.md)