Bonnes Pratiques

app/
├── layout.tsx           # Layout racine
├── page.tsx             # Homepage
├── (marketing)/         # Groupe de routes (pas dans l'URL)
│   ├── about/
│   └── pricing/
├── (app)/               # Zone authentifiée
│   ├── dashboard/
│   └── settings/
└── api/                 # API Routes

components/
├── ui/                  # Composants génériques (Button, Card, Modal...)
├── forms/               # Composants de formulaires
└── layout/              # Header, Footer, Sidebar

lib/
├── utils.ts             # Fonctions utilitaires
├── constants.ts         # Constantes
└── types.ts             # Types TypeScript partagés

hooks/
└── use-media-query.ts   # Custom hooks

// ❌ MAUVAIS : tout le composant est Client
'use client'

export default function ProductPage() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Super Produit</h1>           {/* <- statique */}
      <p>Description longue...</p>      {/* <- statique */}
      <img src="/product.jpg" />        {/* <- statique */}
      <ReviewsList />                   {/* <- statique */}
      
      {/* SEUL élément interactif ↓ */}
      <button onClick={() => setCount(c => c + 1)}>
        Ajouter au panier ({count})
      </button>
    </div>
  )
}

// ✅ BON : seul le bouton est Client
// app/produit/page.tsx (Server Component)
import { AddToCartButton } from './add-to-cart-button'

export default function ProductPage() {
  return (
    <div>
      <h1>Super Produit</h1>
      <p>Description longue...</p>
      <img src="/product.jpg" />
      <ReviewsList />
      
      <AddToCartButton />  {/* ← Client isolé */}
    </div>
  )
}

// app/produit/add-to-cart-button.tsx
'use client'
import { useState } from 'react'

export function AddToCartButton() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Ajouter au panier ({count})
    </button>
  )
}

import dynamic from 'next/dynamic'

// Le composant n'est chargé QUE quand il est affiché
const HeavyChart = dynamic(() => import('./heavy-chart'), {
  loading: () => <p>Chargement du graphique...</p>,
})

// Usage normal
export default function StatsPage() {
  return (
    <div>
      <h1>Statistiques</h1>
      <HeavyChart />
    </div>
  )
}

// app/error.tsx - Erreur globale
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div className="text-center py-20">
      <h2 className="text-2xl font-bold mb-4">
        Oups, quelque chose s'est mal passé !
      </h2>
      <p className="text-slate-600 mb-6">{error.message}</p>
      <button
        onClick={reset}
        className="bg-blue-600 text-white px-6 py-2 rounded-lg"
      >
        Réessayer
      </button>
    </div>
  )
}

// app/not-found.tsx - Page 404
export default function NotFound() {
  return (
    <div className="text-center py-20">
      <h2 className="text-4xl font-bold mb-4">404</h2>
      <p className="text-slate-600">
        Cette page n'existe pas (encore ?).
      </p>
    </div>
  )
}

// Server Action sécurisée avec Zod
'use server'

import { z } from 'zod'

const ContactSchema = z.object({
  name: z.string().min(2).max(100),
  email: z.string().email(),
  message: z.string().min(10).max(1000),
})

export async function sendContact(formData: FormData) {
  const result = ContactSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message'),
  })

  if (!result.success) {
    return { error: 'Données invalides' }
  }

  // ✅ Les données sont validées et typées
  await saveToDatabase(result.data)
  return { success: true }
}