# 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>
```