Refonte Structure

knowledge/frontend/patterns/nextjs.md

@@ -0,0 +1,67 @@
+# Frontend — Patterns : Next.js
+
+> Extrait de la base de connaissance Lead_tech. Voir `knowledge/frontend/patterns/README.md` pour l'index complet.
+
+---
+
+<a id="pattern-eslint-flat-config-nextjs"></a>
+## 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
+
+```javascript
+// 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
+    },
+  },
+];
+```
+
+---
+
+<a id="pattern-grilles-2-colonnes-mobile-first"></a>
+## 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
+
+```html
+<!-- ✅ 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>
+```