</>
NEXT-WEB
Retour aux vidéos
Formations 41 min

Next.js : Créer une landing page pro avec navigation mobile

Développement complet d'une interface moderne, responsive et optimisée pour le scroll mobile.

🚀 Vers les Choses Sérieuses : Créer une Landing Page Performance

Si vous avez validé les deux premières étapes de cette formation, votre projet est désormais structuré, vos objectifs business sont clairs et votre environnement technique est parfaitement opérationnel. Nous attaquons maintenant le cœur du sujet : le développement concret de votre première Landing Page.

L'objectif de ce guide est de concevoir une page d'accueil ultra-rapide, optimisée pour le SEO et entièrement adaptative (responsive). Le résultat final intégrera un Header fixe, une section Hero percutante, des appels à l'action clairs, un menu mobile de type "burger", et une barre de navigation basse (Bottom Menu) optimisée pour l'expérience utilisateur sur smartphone.

🏗️ L'Architecture Next.js : Layouts, Pages et Composants

Il y a encore quelques années, un site web classique n'était qu'un assemblage de pages HTML indépendantes. Chaque clic sur un lien forçait le navigateur à détruire la page courante pour tout recharger depuis le début, ce qui nuisait à la vitesse et à l'expérience utilisateur.

Les frameworks modernes comme Next.js fonctionnent différemment. L'architecture repose sur une imbrication intelligente de trois éléments :

1. Le Layout (Le Cadre Fixe)

Le fichier layout.tsx sert de structure globale à votre site. Imaginez un cadre photo : le cadre reste identique, seul le contenu à l'intérieur change. C'est ici que l'on appelle le fichier CSS global, le Header et le Footer. Ils sont chargés une seule fois au démarrage et ne bougent plus, même lorsque l'internaute navigue d'une page à l'autre.

2. La Page (Le Contenu Dynamique)

Le fichier page.tsx représente le contenu central inséré à l'intérieur de votre cadre. Une page est un assemblage de HTML pour la structure textuelle, de Tailwind CSS pour le design visuel, et de JavaScript pour la logique interactive.

3. Le Composant (Les Blocs Modulaires)

Un composant est un morceau de code isolé et autonome (ex: un bouton, une carte produit, un menu). En créant des composants réutilisables, vous respectez le principe fondamental DRY (Don't Repeat Yourself) : vous écrivez le code une seule fois, et vous l'appelez partout où vous en avez besoin.

🏔️ Client-Side Rendering (CSR) vs Server-Side Rendering (SSR)

Pour bâtir une architecture performante que Google ne va pas pénaliser, il est vital de comprendre où est exécuté votre code. Deux philosophies s'affrontent sur le web :

Le rendu côté client (CSR - Client-Side Rendering)

Le serveur web ne fait aucun effort d'assemblage. Il envoie au navigateur une boîte vide accompagnée d'une notice JavaScript complexe. C'est le smartphone ou l'ordinateur de l'utilisateur qui doit exécuter tout le code pour monter le site visuellement.

  • L'analogie : C'est un meuble livré en kit par IKEA. Le colis est léger à transporter, mais c'est à vous de passer du temps à assembler les pièces chez vous.
  • Le problème : Le premier chargement est lourd pour le processeur, et les robots de Google analysent une page vide avant que le JavaScript ne s'exécute, détruisant vos chances d'un bon référencement.

Le rendu côté serveur (SSR - Server-Side Rendering)

C'est le serveur de l'hébergeur qui assemble l'intégralité de la page. Votre navigateur reçoit directement un fichier HTML et CSS entièrement construit, ultra-rapide et immédiatement lisible.

  • L'analogie : Le meuble vous est livré déjà monté par un artisan. Vous n'avez plus qu'à le poser dans votre pièce.
  • Le bénéfice : La vitesse de chargement initial est instantanée. Les critères de performance de Google (Core Web Vitals) sont parfaitement respectés, garantissant une indexation SEO maximale.

⚡ La force de Next.js : Il combine le meilleur des deux mondes. Par défaut, vos pages sont générées sur le serveur (SSR). Ensuite, Next.js procède à une étape d'hydratation : il injecte de manière asynchrone le JavaScript nécessaire pour rendre le site interactif, sans jamais bloquer l'affichage visuel initial.

🎨 Centralisation du Thème avec les Variables CSS et Tailwind

Pour conserver un design system cohérent et fluide, toutes les couleurs de votre marque doivent être centralisées à un seul endroit. Nous allons configurer notre fichier globals.css (situé dans le dossier app/) en utilisant des variables CSS et en activant le support natif du mode sombre (Dark Mode).

Grâce à cette méthode, si vous décidez un jour de modifier la charte graphique de votre site, il vous suffira de changer trois lignes de code dans ce fichier pour mettre à jour l'intégralité de votre plateforme.

Voici la structure de base du fichier globals.css configurée pour Tailwind CSS v4 :

@theme {
  /* Étape 1 : Liaison des variables CSS avec le moteur Tailwind */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-accent: var(--accent);
  --color-surface: var(--surface);
  --color-border: var(--border);
}

:root {
  /* Étape 2 : Définition de la palette de couleurs en mode clair (Light) */
  --background: #ffffff;      /* Couleur de fond principale */
  --foreground: #0f172a;      /* Couleur du texte principal */
  --primary: #2563eb;         /* Couleur d'identité (Boutons, liens) */
  --accent: #f59e0b;          /* Couleur d'accentuation (Appels à l'attention) */
  --surface: #f8fafc;         /* Couleur de fond des cartes et bannières */
  --border: #e2e8f0;          /* Couleur des bordures et séparateurs */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Étape 3 : Inversion des contrastes pour le mode sombre (Dark) */
    --background: #0f172a;
    --foreground: #f8fafc;
    --primary: #3b82f6;
    --accent: #fbbf24;
    --surface: #1e293b;
    --border: #334155;
  }
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

🏎️ Pourquoi Tailwind CSS est indispensable ?

Tailwind CSS est un framework CSS basé sur des classes utilitaires prêtes à l'emploi. Au lieu de rédiger des milliers de lignes de code CSS dans un fichier externe et de risquer des conflits de maintenance, vous appliquez les styles directement dans les balises HTML de vos composants.

Les avantages majeurs pour votre site :

  • Performance et légèreté : Contrairement à un CMS comme WordPress qui charge des feuilles de style massives pour rien, Tailwind analyse votre code lors de la phase de production et ne conserve que le CSS strictement utilisé. Votre fichier final est ultra-léger.
  • Maintenance simplifiée : Le style est encapsulé dans votre composant. Modifier le design d'une carte n'impactera jamais par erreur le reste de votre site.
  • Responsive et Dark Mode natifs : L'adaptation aux mobiles se gère en ajoutant simplement des préfixes (ex: md:flex-row), éliminant la complexité de l'écriture manuelle des Media Queries.

🎯 Anatomie Stratégique d'une Landing Page Convertissante

Une Landing Page efficace doit capter l'intérêt et inciter à l'action en un minimum de temps. Le fichier racine page.tsx doit respecter la structure séquentielle suivante :

  1. La Section Hero (La Promesse) : Placée au-dessus de la ligne de flottaison, elle affiche votre accroche principale en moins de 2 secondes. Elle doit répondre instantanément à la question : "Quelle est la valeur ajoutée de ce site ?".
  2. La Preuve Sociale (Social Proof) : Témoignages, avis clients ou statistiques clés pour rassurer immédiatement le visiteur et asseoir votre crédibilité.
  3. La Solution & Les Bénéfices : Présentation claire du service ou du produit, axée sur les bénéfices concrets apportés à l'utilisateur plutôt que sur des caractéristiques purement techniques.
  4. Le Call to Action (CTA) : Un bouton d'action principal, ultra-visible et contrasté, conçu pour maximiser la capture de leads (inscription, demande de devis, prise de rendez-vous).

💬 Votre structure de style et vos fondations théoriques sont prêtes. Dans la seconde partie de ce guide, nous demanderons à notre assistant IA de générer le code structurel de notre page d'accueil et nous concevrons nos premiers composants d'interface réutilisables.

🛠️ Personnalisation de vos Sections avec l'IA

Si une section générée par l'IA ne correspond pas tout à fait à vos attentes esthétiques, la méthode est simple : copiez le bloc de code concerné, soumettez-le à votre IA et donnez-lui une consigne claire (par exemple : "Passe cette section en bleu" ou "Ajoute du padding autour de ce texte").

💡 Rappel pour les débutants : Contrairement à Python, le JavaScript et le TypeScript ne dépendent pas de l'indentation pour s'exécuter. Que votre code soit parfaitement aligné ou un peu décalé, cela ne changera rien à son fonctionnement technique. C'est simplement une question de lisibilité pour vous.

📱 L'Outil d'Inspection et le Réflexe Mobile-First

Pour vérifier le rendu réel de votre site, utilisez la console de votre navigateur. Faites un clic droit n'importe où sur votre page, puis sélectionnez Inspecter (ou appuyez sur la touche F12).

En haut à gauche de la console qui s'ouvre, cliquez sur l'icône Toggle device toolbar (l'icône représentant un smartphone et une tablette). Vous pouvez alors simuler l'affichage de votre site sur différents modèles d'écrans, comme un iPhone 12. C'est l'outil indispensable pour valider que votre site est parfaitement adaptatif (responsive).

🧭 Création du Composant Header (Menu Supérieur)

Après avoir conçu votre page d'accueil, nous allons créer le Header (la barre de navigation du haut). Contrairement à la page d'accueil statique, le Header est un composant interactif. Il utilise l'instruction 'use client' à la toute première ligne de son fichier. C'est ce qui indique à Next.js qu'il s'agit d'un composant CSR (Client-Side Rendering), dont le comportement est géré directement par le navigateur de l'internaute (ouverture de menus, clics sur des boutons sans rechargement de page).

Structure Universelle d'un Header Moderne

Un Header professionnel et premium repose sur une architecture en trois blocs distincts :

  1. Le Bloc de Marque (Logo) : Placé à gauche, il valide l'identité visuelle de votre site.
  2. Le Menu Principal : Placé au centre, il liste les accès essentiels.
  3. Le Call to Action (CTA) : Placé à droite, il guide l'utilisateur vers l'action de conversion (ex: S'abonner, Connexion).

Pour donner un aspect haut de gamme, nous y intégrons un effet de glaçomorphisme (un fond semi-transparent effet "verre dépoli" qui laisse deviner le contenu qui défile en arrière-plan), de l'espace négatif (du vide pour laisser respirer le design) et des micro-interactions (le texte change de couleur ou s'anime légèrement lorsque la souris passe dessus, effet hover). Une fine bordure inférieure vient marquer la démarcation avec le reste du corps de la page.

Implémentation technique

Créez un dossier nommé components à la racine de votre projet (en dehors du dossier app), puis créez-y le fichier Header.tsx.

L'extension .tsx signifie que nous utilisons du TypeScript (une version sécurisée de JavaScript où chaque variable a un type précis : texte, nombre, booléen) et que nous pouvons y écrire directement nos structures visuelles.

Une fois votre composant Header généré par votre IA, importez-le directement dans votre fichier racine app/layout.tsx pour qu'il s'affiche automatiquement sur toutes les pages de votre site :

📁 web-creator
├── 📁 components
│   └── 📄 Header.tsx      (Composant de Navigation)
└── 📁 app
    ├── 📄 layout.tsx      (Structure globale - On y importe le Header)
    └── 📄 page.tsx        (Contenu de la Landing Page)

🖐️ La Barre de Navigation Basse (BottomNav) pour Mobile

Sur un écran d'ordinateur, le Header supérieur est parfait. Mais sur smartphone, l'accès au sommet de l'écran est difficile à atteindre à une seule main. C'est ici qu'intervient la BottomNav, une barre de navigation fixée au bas de l'écran.

Les avantages de cette structure

  • La Thumb Zone (Zone du pouce) : Placer les boutons là où le pouce de l'utilisateur se pose naturellement améliore drastiquement l'ergonomie et le taux de clic. C'est l'approche adoptée par les plus grandes applications mobiles (Instagram, YouTube, etc.).
  • Ergonomie Applicative (PWA) : Si vos utilisateurs ajoutent votre site sur l'écran d'accueil de leur smartphone, votre plateforme se comportera visuellement comme une application native.
  • Réduction Cognitive : L'espace étant restreint sur mobile, on élimine le texte superflu pour ne conserver que 4 ou 5 actions majeures, représentées par des icônes explicites.

Intégration de la Librairie d'Icônes : Lucide React

Pour afficher des icônes légères et modernes, ouvrez le terminal de VS Code et installez la bibliothèque de référence :

npm install lucide-react

Contrairement à d'anciennes solutions massives (comme Bootstrap ou FontAwesome), Lucide React est optimisée pour Next.js : lors de la compilation, elle ne chargera dans votre code final que les icônes exactes que vous avez appelées, sans alourdir votre site.

📝 Action : Créez le fichier BottomNav.tsx dans votre dossier components, générez son code avec votre IA en utilisant vos variables CSS, puis importez-le dans votre layout.tsx juste en dessous du contenu principal ({children}).

🎯 Comment fonctionne le Responsive avec Tailwind ?

Une question légitime apparaît : Comment le site sait-il quel menu afficher selon la taille de l'écran ?

Ce n'est pas du JavaScript qui calcule la taille de l'écran en permanence. Tout le code (Header et BottomNav) est présent simultanément sur la page. C'est Tailwind CSS, via des breakpoints (points de rupture en CSS), qui gère l'affichage visuel :

  • La classe utilitaire hidden : masque un élément par défaut (sur mobile).
  • Le préfixe md:flex : indique à Tailwind que dès que l'écran dépasse une largeur de 768 pixels (tablettes et ordinateurs), le composant doit apparaître.

En codant ainsi avec Tailwind, vous concevez une interface fluide qui s'adapte en temps réel sans écrire la moindre ligne de code CSS complexe à la main.

📋 Récapitulatif de votre progression

En l'espace de deux sessions pratiques, vous avez mis en place les piliers d'une application web moderne :

  • L'Architecture Next.js : Maîtrise des rôles du layout, des pages et de l'isolation des composants.
  • La Dualité de Rendu : Utilisation du SSR pour la performance SEO de vos pages et du CSR pour l'interactivité de vos menus.
  • Le Design System : Configuration de variables graphiques dynamiques et gestion centralisée des modes clair et sombre dans globals.css.
  • L'Ergonomie Cross-Device : Intégration d'une Landing Page, d'un Header avec effet miroir et d'une navigation mobile centrée sur l'expérience utilisateur.

💬 Partagez vos impressions et vos éventuels messages d'erreur dans les commentaires. Prenez le temps de manipuler les fichiers, de modifier les textes pour voir le rafraîchissement se faire en direct sur votre écran.

Dans la prochaine vidéo, nous irons encore plus loin dans la pratique : nous détaillerons le fonctionnement des grilles de mise en page, nous décortiquerons la logique de Tailwind et nous bâtirons nos premiers modules dynamiques de capture de leads.

Étudiez la structure de votre code, observez les interactions, et bossez bien !

👉 Hostinger jusqu'à -85% : J'en profite