Sunbytes Next.js

When to apply

Trigger on Next.js projects (next.config.{js,ts,mjs}, app/ directory, @next/* or next/* imports). Always load sb-react and sb-typescript alongside.

App Router only

• New code goes in app/. Don't add to pages/ even if it exists for legacy reasons — flag the migration if it blocks you.
• Co-locate route-specific UI inside the route segment folder, not in a global components/.
• Use the file conventions Next provides: loading.tsx, error.tsx, not-found.tsx, route.ts. Don't reinvent them.

Server vs Client Components

• Default to Server Components. Add 'use client' only when you need state, effects, browser APIs, refs to DOM, or event handlers.
• Push 'use client' as deep as possible. A small leaf client component beats a whole page marked client.
• Server Components can be async and fetch directly. Don't introduce a route handler if the page can fetch inline.
• Don't pass non-serialisable values (functions, class instances, Dates without care) from Server to Client Components.