Next.js App Router conventions

A file carrying `"use client"` must not read a non-`NEXT_PUBLIC_` environment variable, import the database client, or import a server SDK — and neither may a module it pulls in. Mark server-only modules with `import "server-only"` so the mistake fails the build instead of shipping. The bundler inlines whatever the client graph can reach, without a warning.

Blocks: the failure mode is a published secret, and it is invisible in review without this check.

A function marked `"use server"` is a public HTTP endpoint. Parse its arguments with a schema and check the session and permissions inside the action — not in the component that renders the form. The action can be invoked directly with any payload, by anyone who has the action id, without your UI ever rendering.

Blocks: an unguarded server action is an open write endpoint on your own domain.

Every use passes through the shared sanitizer helper on the same expression. Interpolating user content, CMS content or model output raw is rejected. "The CMS is trusted" stops being true the first time an editor pastes an embed.

Blocks: stored XSS in a shared surface affects every viewer, not just the author.

Protected routes are gated in middleware, a layout, or a server component. Redirecting from a `useEffect` after render is rejected: the protected payload has already been serialized and sent to the browser before the redirect runs, so the data is in the page source regardless of what the user sees.

Blocks: the data has already left the server — it is a disclosure, not a UX flaw.

Put the directive on the smallest component that genuinely needs state, effects or event handlers. A `page.tsx` or `layout.tsx` carrying it is rejected. The directive is inherited by everything below it, so one high placement moves an entire subtree — and its dependencies — into the client bundle.

Warns: it is a performance and payload regression, correct but expensive.

`fetch` in a server component passes an explicit `cache` option or `next: { revalidate }`. Relying on the framework default is rejected. The default has changed between Next majors in both directions, so an implicit choice makes your correctness depend on your lockfile.

Warns: the consequence is stale or uncached data, painful but recoverable.

Any server action or route handler that writes must call `revalidatePath` or `revalidateTag` for the affected data, or the client must `router.refresh()`. A mutation that leaves a stale cache reads to the user as a lost write, and they will do it twice.

Warns: it produces user-visible wrong data, not a security failure.

Fetching data in `useEffect` when it is available at render time is rejected — fetch it in a server component and pass it down. The effect version costs a request waterfall, a loading state, a hydration flash and a second code path for errors, in exchange for nothing.

Warns: it is an architecture smell with a real but non-urgent cost.

Any `useEffect` that adds an event listener, opens a socket, starts an interval or creates an `AbortController` returns the matching teardown. Strict Mode invokes effects twice in development and route changes unmount them constantly — without teardown, handlers accumulate for the life of the tab.

Warns: leaks degrade a long session rather than breaking the first one.

`key` comes from the item's own id. `key={index}` is rejected for any list that can be reordered, filtered, paginated or have items removed. React will reuse the wrong DOM node, so uncontrolled input state and focus move to a different row than the one the user was editing.

Warns: it produces a confusing, hard-to-reproduce bug rather than an outage.

Use `next/image` with explicit `width`/`height` or `fill`. A bare `<img>` for an asset you control is rejected. Unsized images are the dominant source of layout shift, and the raw tag skips format negotiation and resizing entirely.

Informational: it is a quality nudge with legitimate exceptions (inline SVG, third-party embeds).