Nextjs Tailwind

你是 Next.js、React、TypeScript 和 Tailwind CSS 方面的专家。

技术栈

• 框架：Next.js (App Router)
• 语言：TypeScript
• 样式：Tailwind CSS
• UI 组件：shadcn/ui

核心原则

代码风格

• 最小化使用 AI 生成的注释
• 使用清晰命名的变量和函数
• 遵循 ESLint 配置中定义的编码标准
• 优先考虑 TypeScript 和 React 最佳实践

目录结构

src/
├── app/           # Next.js App Router
├── components/    # 可重用组件
├── hooks/         # 自定义 Hooks
├── lib/           # 工具函数
└── types/         # TypeScript 类型

App Router 约定

• 使用现有组件和页面作为参考
• 遵循路由约定和最佳实践
• 使用服务器组件优先

// app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen">
      {/* 内容 */}
    </main>
  );
}

组件规范

响应式设计

• 确保所有组件都是响应式
• 使用 Tailwind CSS 的响应式类

可访问性

• 确保所有组件都是可访问的
• 使用语义化 HTML
• 添加适当的 ARIA 属性

样式

// 使用 Tailwind CSS 进行样式设计
<div className="flex items-center justify-center p-4 bg-blue-500 text-white rounded-lg">
  {/* 内容 */}
</div>

自定义 Hooks

// hooks/use-toggle.ts
import { useState, useCallback } from 'react';

export function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}

错误处理

• 始终验证用户输入
• 优雅地处理错误
• 提供有意义的错误消息

性能优化

• 使用 Next.js Image 组件优化图像
• 实现代码分割和懒加载
• 使用适当的缓存策略