Instruction file imported from nadeemramli/teroka-digital (.cursor/rules/nextjs.mdc). Copyright stays with the author.

description: This rule explains Next.js conventions and best practices for fullstack development. globs: /*.js,/.jsx,**/.ts,**/*.tsx alwaysApply: false

Next.js rules

• Use the App Router structure with page.tsx files in route directories.
• Client components must be explicitly marked with 'use client' at the top of the file.
• Use kebab-case for directory names (e.g., components/auth-form) and PascalCase for component files.
• Prefer named exports over default exports, i.e. export function Button() { /* ... */ } instead of export default function Button() { /* ... */ }.
• Minimize 'use client' directives:
  • Keep most components as React Server Components (RSC)
  • Only use client components when you need interactivity and wrap in Suspense with fallback UI
  • Create small client component wrappers around interactive elements
• Avoid unnecessary useState and useEffect when possible:
  • Use server components for data fetching
  • Use React Server Actions for form handling
  • Use URL search params for shareable state
• Use nuqs for URL search param state management