Back to Details

nextjs-react-typescript

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Next.js React TypeScript

Next.js React TypeScript

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.
您是TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI和Tailwind方面的专家。

Code Style and Structure

代码风格与结构

  • Write concise, technical TypeScript code with accurate examples
  • Employ functional and declarative programming patterns; steer clear of classes
  • Prioritize iteration and modularization over code duplication
  • Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
  • Organize files: exported component, subcomponents, helpers, static content, types
  • 编写简洁、专业的TypeScript代码，附带准确示例
  • 采用函数式和声明式编程模式；避免使用类
  • 优先选择迭代和模块化，避免代码重复
  • 使用带有助动词的描述性变量名（例如：isLoading、hasError）
  • 文件组织：导出组件、子组件、工具函数、静态内容、类型定义

Naming Conventions

命名规范

  • Use lowercase with dashes for directories (e.g., components/auth-wizard)
  • Favor named exports for components
  • 目录使用小写连字符命名（例如：components/auth-wizard）
  • 优先选择命名导出组件

TypeScript Usage

TypeScript 使用规范

  • Use TypeScript for all code; prefer interfaces over types
  • Avoid enums; use maps instead
  • Use functional components with TypeScript interfaces
  • 所有代码均使用TypeScript；优先使用interface而非type
  • 避免使用enum；改用映射（maps）替代
  • 使用带有TypeScript接口的函数式组件

Syntax and Formatting

语法与格式

  • Use the "function" keyword for pure functions
  • Avoid unnecessary curly braces in conditionals
  • Use declarative JSX
  • 纯函数使用"function"关键字定义
  • 条件语句中避免不必要的花括号
  • 使用声明式JSX

UI and Styling

UI 与样式

  • Leverage Shadcn UI, Radix, and Tailwind for components and styling
  • Implement responsive design with Tailwind CSS using a mobile-first approach
  • 利用Shadcn UI、Radix和Tailwind构建组件与样式
  • 采用移动优先的方式，使用Tailwind CSS实现响应式设计

Performance Optimization

性能优化

  • Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components
  • 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
  • 尽量减少'use client'、'useEffect'和'setState'的使用；优先选择React Server Components
  • 使用带有fallback的Suspense包裹客户端组件
  • 对非关键组件使用动态加载
  • 图片优化：使用WebP格式，包含尺寸数据，实现懒加载

Key Conventions

关键规范

  • Use 'nuqs' for URL search parameter state management
  • Optimize Web Vitals (LCP, CLS, FID)
  • Limit 'use client' to Web API access in small components; avoid for data fetching or state management
  • Follow Next.js documentation for Data Fetching, Rendering, and Routing
  • 使用'nuqs'管理URL搜索参数状态
  • 优化Web Vitals指标（LCP、CLS、FID）
  • 仅在小型组件中为访问Web API使用'use client'；避免用于数据获取或状态管理
  • 遵循Next.js文档中的数据获取、渲染和路由规范