Le contexte
Landing page simple pour continuer à m’entraîner. J’ai utilisé clsx et tailwind-merge pour apprendre à structurer les classes Tailwind quand le markup devient difficile à lire, et j’ai visé des composants React réutilisables dont les textes et styles passent par des props faciles à faire évoluer.
C’est une bonne base de front pour l’étendre plus tard en appli full stack, avec Next.js comme frontend headless. J’ai réfléchi à la distinction composants serveur / client pour tirer au maximum parti du rendu côté serveur (SSR) de Next.js.
Pour l’instant il s’agit d’une démo one page : les liens sont factices et ne servent qu’à l’apparence.
Mes réalisations :
- Stack et organisation :
- Next.js 16 (App Router), React 19 et TypeScript
- Tailwind CSS v4 avec design tokens et @theme dans globals.css
- clsx et tailwind-merge pour composer et dédupliquer les className
- Composants réutilisables : textes et styles pilotés par props
- Mise en page, perf et accessibilité :
- next/image avec priority et sizes sur le hero pour le LCP
- Flexbox et grille ; min-w-0 sur les colonnes 50/50 texte/image pour éviter les débordements
- Hiérarchie de titres sémantique (un h1, h2 par section, h3 pour les témoignages)
- Liens « surlignés » (highlighter) avec color-mix et couleurs du guide
- Produit et intégration :
- Métadonnées et favicons selon les conventions Next.js
- UI majoritairement en Server Components ; "use client" seulement si nécessaire
- Découpage serveur / client assumé : limiter le JavaScript côté navigateur et confier au serveur tout ce qui peut l’être pour profiter du SSR
- Démo une page : liens de navigation à titre décoratif pour l’instant