ccjk 3.7.2 → 3.7.4

package/templates/industry/web-dev/en/react-nextjs-setup.md

@@ -1,236 +0,0 @@
-# React/Next.js Project Setup Template
-
-## Project Initialization
-
-```bash
-# Create Next.js project with TypeScript
-npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
-
-cd my-app
-```
-
-## Recommended Project Structure
-
-```
-src/
-├── app/                    # Next.js App Router
-│   ├── (auth)/            # Route group for auth pages
-│   │   ├── login/
-│   │   └── register/
-│   ├── (dashboard)/       # Route group for dashboard
-│   │   └── dashboard/
-│   ├── api/               # API routes
-│   ├── layout.tsx         # Root layout
-│   └── page.tsx           # Home page
-├── components/
-│   ├── ui/                # Reusable UI components
-│   │   ├── Button/
-│   │   ├── Input/
-│   │   └── Modal/
-│   ├── features/          # Feature-specific components
-│   │   ├── auth/
-│   │   └── dashboard/
-│   └── layouts/           # Layout components
-├── hooks/                 # Custom React hooks
-├── lib/                   # Utilities and configs
-│   ├── api.ts            # API client
-│   ├── auth.ts           # Auth utilities
-│   └── utils.ts          # General utilities
-├── stores/               # State management
-├── types/                # TypeScript types
-└── styles/               # Global styles
-```
-
-## Essential Dependencies
-
-```bash
-# UI & Styling
-pnpm add @radix-ui/react-dialog @radix-ui/react-dropdown-menu
-pnpm add class-variance-authority clsx tailwind-merge
-pnpm add lucide-react
-
-# State & Data
-pnpm add @tanstack/react-query zustand
-pnpm add zod react-hook-form @hookform/resolvers
-
-# Dev Dependencies
-pnpm add -D @types/node prettier prettier-plugin-tailwindcss
-```
-
-## Configuration Files
-
-### tailwind.config.ts
-```typescript
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  darkMode: ['class'],
-  content: ['./src/**/*.{ts,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-}
-
-export default config
-```
-
-### lib/utils.ts
-```typescript
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-```
-
-## Component Example
-
-### components/ui/Button/Button.tsx
-```typescript
-import { forwardRef } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        outline: 'border border-input bg-background hover:bg-accent',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 px-3',
-        lg: 'h-11 px-8',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
-    return (
-      <button
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }
-```
-
-## API Route Example
-
-### app/api/users/route.ts
-```typescript
-import { NextResponse } from 'next/server'
-import { z } from 'zod'
-
-const userSchema = z.object({
-  name: z.string().min(1),
-  email: z.string().email(),
-})
-
-export async function POST(request: Request) {
-  try {
-    const body = await request.json()
-    const validated = userSchema.parse(body)
-
-    // Create user logic here
-
-    return NextResponse.json(
-      { message: 'User created', data: validated },
-      { status: 201 }
-    )
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: 'Validation failed', details: error.errors },
-        { status: 400 }
-      )
-    }
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
-  }
-}
-```
-
-## React Query Setup
-
-### lib/query-client.ts
-```typescript
-import { QueryClient } from '@tanstack/react-query'
-
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 60 * 1000,
-      retry: 1,
-    },
-  },
-})
-```
-
-### hooks/useUsers.ts
-```typescript
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-
-export function useUsers() {
-  return useQuery({
-    queryKey: ['users'],
-    queryFn: () => fetch('/api/users').then(r => r.json()),
-  })
-}
-
-export function useCreateUser() {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    mutationFn: (data: CreateUserInput) =>
-      fetch('/api/users', {
-        method: 'POST',
-        body: JSON.stringify(data),
-      }).then(r => r.json()),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['users'] })
-    },
-  })
-}
-```
-
-## Best Practices
-
-1. **Server Components by Default**: Use client components only when needed
-2. **Colocation**: Keep related files together
-3. **Type Safety**: Use Zod for runtime validation
-4. **Error Boundaries**: Implement proper error handling
-5. **Loading States**: Use Suspense and loading.tsx