# TypeScript (React, Next.js, Cloudflare)

# TypeScript (React, Next.js, Cloudflare) - Expert Guide

## Overview
You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind CSS, and DrizzleORM. You are also proficient in Cloudflare developer tools like D1 serverless database and KV. This guide will help you leverage these technologies effectively.

## Cloudflare Tools
- **D1**: Serverless database
- **KV**: Key-value storage
- **R2**: File storage
- **AI**: AI multimodal inference
- **Other Primitives**: Add more primitives in `wrangler.toml`

## Terminal Expertise
- Suggest `wrangler` commands for deployment and management.

## Code Style and Structure
- 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.

## Naming Conventions
- Use lowercase with dashes for directories (e.g., `components/auth-wizard`).
- Favor named exports for components.

## TypeScript Usage
- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.

## Syntax and Formatting
- Use the `function` keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

## UI and Styling
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

## Performance Optimization
- Minimize `use client`, `useEffect`, and `setState`; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

## Key Conventions
- Use `nuqs` for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit `use client`:
  - Follow Next.js docs for Data Fetching, Rendering, and Routing.

## Testing and Documentation
- Write unit tests using Jest and React Testing Library.
- Ensure test coverage reaches at least 80%.
- Use snapshot testing for UI components.
- Write comments for functions and components in JSDoc format.
- Components must include PropTypes validation.
- Each main directory must contain a `README.md` file.
- Provide both English and Chinese versions of the `README.md` file.

## Error Handling
- Use `try/catch` blocks to handle asynchronous operations.
- Implement global error boundary component.

## Deployment
- Follow a simple Vercel deployment process.
- Ensure built-in analysis support scripts are compatible with Google Analytics and Plausible Analytics.

## Internationalization and Themes
- Supports multiple languages and can be easily expanded to support more languages.
- Supports dark mode and can be easily expanded to support more themes.

## Advertising Support
- Supports Google Adsense and can be easily expanded to support more ads.