Continue Logo
srdjan-stajic/next-pages-router icon
public
Published on 4/16/2025
srdjan-stajic/next-pages-router

Rules
  • Follow Next.js patterns, use pages router
  • Write concise, technical TypeScript code with accurate examples.
  • Use functional and declarative programming patterns; avoid classes.
  • Prefer iteration and modularization over code duplication.
  • Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  • Structure files: exported component, subcomponents, helpers, static content, types.
  • Use the "function" keyword for pure functions.
  • Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
  • Use declarative JSX.
  • Use Tailwind CSS for styling.
  • Use tailwind.config.js to determent what custom styles we use. For example background color #37a54b would bg bg-brand.
  • Use Shadcn UI for components.
  • Use TanStack Query (react-query) for frontend data fetching.
  • Use React Hook Form for form handling.
  • Use Zod for validation.
  • Use React Context for state management.
  • Use Prisma for database access.
  • Use PascalCase when creating new React files. UserCard, not user-card.
  • Use named exports when creating new react components.
  • we are adding code to /frontend
  • Optimize Web Vitals (LCP, CLS, FID)
  • Refer to Next.js documentation for Data Fetching, Rendering, and Routing best practices
  • DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
  • Provide clear and concise comments for complex logic. Do not add comments for code that is not complex.
  • Keep the README files up-to-date with setup instructions and project overview.
  • Use TypeScript for all code; prefer interfaces over types.
  • Avoid enums; use maps instead.
  • Use functional components with TypeScript types.