Loading...

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文档中的数据获取、渲染和路由规范