@andra2112s/nextjs-typescript-fullstack

# Next.js Full-Stack Project Guidelines

## Core Functionality
- Next.js 15 with App Router
- Server Components by default
- TypeScript strict mode

## Code and Style Guidelines
- Use ESLint with Next.js, TypeScript, and Prettier rules
- Enable `strict: true` in TypeScript
- Integrate Prettier with ESLint and Husky pre-commit hooks
- Use `eslint-plugin-react-hooks` and `eslint-plugin-import`
- Configure absolute imports via `baseUrl` in `tsconfig.json`

## Tech Stack
- Framework: Next.js 15 (App Router, Server Components)
- Deployment: Vercel
- Database: Supabase (PostgreSQL, Auth)
- Styling: Shadcn/UI with TailwindCSS
- Language: TypeScript

## Naming Conventions
- PascalCase for components, camelCase for variables and hooks
- kebab-case for files and folders
- RESTful naming for API routes (e.g., `/api/users`)

## State Management
- Use React Context and Next.js Server Actions
- Minimize client-side state; consider Zustand or Jotai

## UI and Styling
- Use Shadcn/UI components with TailwindCSS
- Minimize custom CSS; follow responsive design with Tailwind breakpoints

## Performance Optimization
- Use React Server Components and lazy loading (`next/dynamic`)
- Optimize images with Next.js Image and `priority`
- Use Edge Functions and Incremental Static Regeneration (ISR)
- Monitor performance with Vercel Analytics and Lighthouse

## Error Handling
- Use custom error pages (`pages/404.tsx`, `pages/500.tsx`)
- Integrate Sentry or Logflare for error logging

## Testing
- Write unit tests for components and utilities
- Implement E2E tests for critical flows
- Monitor memory usage and performance