Server Components by default in the App Router

Layouts and pages are Server Components by default: they fetch data and render on the server, can cache the result, and stream HTML to the client. Add the "use client" directive only where interactivity is required — state, event handlers, effects, browser-only APIs, and custom hooks — because a "use client" file pulls every module it imports into the client bundle. Keep client boundaries small and deep in the tree, and pass Server Components into Client Components as children or props rather than importing them; React context is not supported in Server Components, so wrap providers in a Client Component and render them as deep as possible. Only environment variables prefixed NEXT_PUBLIC_ reach the client bundle; unprefixed variables are replaced with an empty string on the client. Importing the server-only package in modules that read secrets turns an accidental client import into a build-time error. Scope: Next.js 16 App Router. Reviewed October 4, 2026.