_Assistant_Lead_Tech/knowledge/frontend/patterns/nextjs.md

Frontend — Patterns : Next.js

Extrait de la base de connaissance Lead_tech. Voir knowledge/frontend/patterns/README.md pour l'index complet.

---

Pattern : ESLint flat config avec presets Next.js (eslint.config.mjs)

Synthèse

• Objectif : éviter les bugs de compatibilité de l'ancien .eslintrc avec Next.js récent.
• Contexte : projet Next.js récent utilisant déjà le flat config ESLint.
• Quand l'utiliser : nouveau projet Next.js ou migration ESLint.
• Quand l'éviter : si le projet doit rester compatible avec des outils legacy ESLint.

Validation

• Validé le : 16-03-2026
• Contexte technique : Next.js 16+ / ESLint flat config — app-template-resto

Implémentation

// eslint.config.mjs
import nextPlugin from "@next/eslint-plugin-next";

export default [
  ...nextPlugin.configs["core-web-vitals"],
  ...nextPlugin.configs["typescript"],
  {
    rules: {
      // overrides ciblés ici
    },
  },
];

---

Pattern : Grilles 2 colonnes FR/EN — mobile-first

Synthèse

• Objectif : afficher les champs FR + EN côte à côte sur desktop, en colonne unique sur mobile.
• Contexte : formulaires dashboard avec champs bilingues FR/EN côte à côte.
• Quand l'utiliser : tout formulaire avec colonnes parallèles sur un projet mobile-first.
• Quand l'éviter : si les champs sont indépendants et n'ont pas de relation visuelle FR/EN.

Validation

• Validé le : 22-03-2026
• Contexte technique : Tailwind CSS / React — app-template-resto

Implémentation

<!-- ✅ Mobile-first — colonne unique sur < 640px, 2 colonnes sur ≥ 640px -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <input placeholder="Nom (FR)" />
  <input placeholder="Name (EN)" />
</div>

<!-- ❌ À éviter — 2 colonnes trop étroites sur mobile -->
<div class="grid grid-cols-2 gap-4">...</div>