Server and Client Components

Keep client JavaScript on the interactive pieces.

Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.

Next.js Server and Client Components

Rules

NX-RSC-001 required

Prefer a Server Component

A page that only renders data stays a Server Component.

NX-RSC-002 required

Mark a client boundary only for interaction

useState, events, and browser APIs belong in a file with "use client".

NX-RSC-003 prohibited

Do not send secrets to the client

A prop passed into a client component is visible in the browser.

NX-RSC-004 recommended

Keep the client child small

A header that reads the pathname can be a client component. A static section does not have to become one.

Correct

'use client';
import { useState } from 'react';

export function Filter({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={(event) => setQuery(event.target.value)} aria-label="Filter" />;
}

Incorrect

'use client';
export default function Page() {
  return <h1>Applications</h1>;
}

The page has no state or event. The use client directive still ships its module to the browser.

Checklist

Static pages omit "use client".
Client files do not import server-only secrets.
The interactive child is the boundary, not the whole route.

AI instructions

You are implementing this practice in the current project. Do not install a design-system package and do not import one.
TASK: Apply Server and Client Components.
Keep client JavaScript on the interactive pieces.
APPLIES TO: Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.
RULES:
- NX-RSC-001 [required] Prefer a Server Component. A page that only renders data stays a Server Component.
- NX-RSC-002 [required] Mark a client boundary only for interaction. useState, events, and browser APIs belong in a file with "use client".
- NX-RSC-003 [prohibited] Do not send secrets to the client. A prop passed into a client component is visible in the browser.
- NX-RSC-004 [recommended] Keep the client child small. A header that reads the pathname can be a client component. A static section does not have to become one.
CORRECT:
'use client';
import { useState } from 'react';

export function Filter({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={(event) => setQuery(event.target.value)} aria-label="Filter" />;
}
INCORRECT:
'use client';
export default function Page() {
  return <h1>Applications</h1>;
}
The page has no state or event. The use client directive still ships its module to the browser.
CHECK:
- [ ] Static pages omit "use client".
- [ ] Client files do not import server-only secrets.
- [ ] The interactive child is the boundary, not the whole route.
SOURCE: Next.js Server and Client Components https://nextjs.org/docs/app/getting-started/server-and-client-components
Build the interface with the project’s own markup. Match the documented colors and elements when a control is involved.
Do not upgrade Next.js to obtain bundled docs. Do not claim a WCAG audit. Do not add secrets.