mirror of
https://github.com/MaksTinyWorkshop/_Assistant_Lead_Tech
synced 2026-04-06 21:41:42 +02:00
68 lines
2.0 KiB
Markdown
68 lines
2.0 KiB
Markdown
# 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>
|
|
```
|