Next.js Pro Cursor Rules

Server vs Client Components Every component is a Server Component by default Do not add use client unless the component actually needs state effects event handlers browser APIs or a client-only library When a component needs interactivity do not convert the whole tree Extract the smallest interactive leaf into its own file with use client and keep the parent on the server Push client boundaries down never up Never add use client to a page tsx or layout tsx as a shortcut If a page seems to need it the interactive part belongs in a child component Server Components may import Client Components the reverse is not allowed To render server content inside a client wrapper pass it as children or another ReactNode prop through the client boundary Never pass non-serializable values from server to client props Pass plain data reconstruct on the client if needed Event-handler-shaped props across the boundary are a bug use Server Actions instead Mark server-only modules with import server-only so accidental client imports fail at build time Data fetching Fetch data in Server Components with async/await as close as possible to where the data is used Do not lift fetches to a top-level page and drill the results down more than two levels Fetch in the component that needs the data and rely on request deduplication Never fetch data in a useEffect Be explicit about fetch caching semantics on every fetch call Static/build-time data fetch with next revalidate 3600 Per-request data fetch with cache no-store Tag anything you will need to invalidate next tags posts then revalidateTag posts in the mutating Server Action Parallelize independent requests with Promise all Sequential awaits of independent data are a review-blocking mistake Do not call your own Route Handlers from Server Components Call the underlying function/db query directly the HTTP hop adds latency and loses types