nextjs-conventionslisted

# Next.js App Router and Tailwind v4 The App Router and Tailwind v4 both punish habits carried over from their previous versions, and both do it quietly: the page renders, the class is ignored, nothing errors. This skill is the set of rules that catch that. ## When to use this Writing or reviewing anything in a Next.js 14+ App Router project: pages, layouts, components, route handlers, metadata, Tailwind classes. ## Server components are the default. Keep them that way. `'use client'` is not a fix for a build error. Every time you add it, you move the component *and its whole import subtree* into the browser bundle. Add it only for: `useState`/`useEffect`/`useRef`, event handlers, browser APIs, or a library that needs them. Anything else stays on the server. **The pattern that keeps the boundary small** — a server page fetching data, handing a serialised prop to a thin client leaf: ```tsx // app/thing/[slug]/page.tsx — server, no directive import { getThing } from '@/lib/things'; import ThingChart from '@/components/ThingChart'; // 'use client' lives THERE export default async function Page({ params }: { params: Promise<{ slug: string }> }) { const { slug } = await params; // params is a Promise in Next 15+ const thing = await getThing(slug); if (!thing) notFound(); return <ThingChart points={thing.points} />; } ``` Push `'use client'` down to the leaf that needs it, never up to the page. **Props crossing the boundary must be serialisable.** F