Modern Next.js 14 Development Rules: TypeScript, React Server Components, Supabase & Tailwind Best Practices

Elevate your web projects using these optimized coding standards for TypeScript-based Next.js 14 applications with React, Supabase, and styling tools.

### Fundamental Coding Principles
- Deliver precise, compact TypeScript code snippets in responses.
  - Embrace functional and declarative styles; skip classes entirely.
  - Promote modularity and loops to eliminate repetition.
  - Adopt clear variable names featuring helper verbs like isActive or shouldRender.
  - Organize directories in kebab-case lowercase (e.g., user-profile).
  - Export components by name for better reusability.
  - Apply Receive-Object-Return-Object (RORO) for function signatures.

### TypeScript and JavaScript Standards
- Declare pure functions with the 'function' keyword; skip semicolons.
- Mandate TypeScript everywhere, favoring interfaces over type aliases.
- Structure files as: main export, child components, utilities, constants, then interfaces.
- Skip braces for single-line if/else bodies.
- Streamline simple conditions: if (check) executeAction().

### Robust Error Management and Input Checks
- Tackle failures and outliers first in functions.
  - Employ early exits for issues to flatten code nesting.
  - Position success logic at the end for clarity.
  - Ditch redundant else; prefer if-return flows.
  - Use guard patterns for prerequisites and bad states.
  - Log errors thoroughly while displaying helpful user alerts.
  - Create custom error classes for uniformity.

### Vercel AI SDK Integration
- Build streaming interfaces via AI SDK UI.
- Interface with LLMs using AI SDK Core.
- Stream data with AI SDK RSC and helpers.
  - Add fallback logic for model downtime.
  - Manage rate limits and quotas smoothly.
  - Sanitize inputs before AI submission.
  - Secure keys in environment vars.

### React and Next.js Patterns
- Stick to functional components with interface props.
- Craft declarative JSX; define components as functions.
- Leverage Shadcn UI, Radix primitives, and Tailwind for UI and styles.
  - Design responsively with mobile-first Tailwind classes.
- Limit 'use client', useEffect, and state mutators; prioritize Server Components.
  - Validate forms with Zod.
  - Wrap async client parts in Suspense.
  - Dynamically import secondary components.
  - Optimize media: WebP, sizes, lazy attr.
- Model predictable errors as outputs; skip try/catch in Server Actions.
- Deploy error.tsx and global-error.tsx for crashes.
- Pair useActionState with react-hook-form.
- Throw friendly errors from services/ for user display.
- Secure actions with next-safe-action and Zod validation.

### Supabase and GraphQL Setup
- Query databases and subscribe real-time via Supabase client.
  - Enforce Row Level Security for precise permissions.
  - Authenticate via Supabase Auth.
  - Store files in Supabase Storage.
  - Deploy serverless logic in Edge Functions.
- Query type-safely with Genql client.
  - Minimize fields in GraphQL fetches.
  - Authenticate via RLS policies.

### Essential Project Conventions
- Drive navigation and state via App Router.
- Target top Web Vitals: LCP, CLS, INP.
  - Server-render maximally; 'use client' only for browser APIs in tiny scopes.
- Monorepo layout: shared in packages/, apps in apps/.
- Run tasks via Taskfile.
- Respect DB enums and schemas.

### Naming and File Rules
- Booleans: prefix with is/has/should/does (e.g., hasPermission).
- Files: kebab-case (e.g., login-form.tsx); use .hook.ts, .type.ts, etc.

### Component Architecture
- Decompose into prop-light micros; folder-per-component.
- Compose for complexity; order: func, styles, types.

### Data and State Strategies
- Fetch in Server Components; preload to dodge cascades.
- Sync real-time with Supabase.
- Cache sessions/rates/chats in Vercel KV.

### Styling Approach
- Utility-first Tailwind; variantize with Class Variance Authority.

### Testing Protocols
- Unit-test utils/hooks.
- Integration-test UIs/pages.
- E2E critical paths.
- Local Supabase for DB tests.

### Accessibility Essentials
- Keyboard-friendly navigation.
- ARIA attrs and roles.
- WCAG-compliant contrasts.

### Documentation Habits
- JSDoc for IDE hints.
- Comment tricky sections.
- Update READMEs with setup/project info.
- Detail Supabase schemas/RLS/Functions.