Bonjour à tous ! Dans ce tutoriel, nous allons voir pas à pas comment configurer votre template Next.js conçu pour les lead magnets Calendly. Tout est documenté et optimisé pour le SEO et la vitesse de chargement. Suivez le guide !
Le template démo: Landing + Calendly
🛠️ Prérequis
Avant de commencer, assurez-vous d'avoir installé les outils gratuits suivants sur votre ordinateur :
- VS Code (votre éditeur de code)
- Node.js (pour faire tourner l'environnement de développement)
💡 Conseil : Idéalement, configurez également Git et GitHub sur votre VS Code. Ce n'est pas obligatoire pour ce tuto, mais cela vous permettra de déployer votre site en ligne en 30 secondes à la fin.
🚀 Étape 1 : Installation du projet
Félicitations pour votre achat ! Vous avez téléchargé un fichier ZIP contenant tout le code. Voici comment l'installer :
- Créer un nouveau dossier vide sur votre ordinateur (par exemple dans vos Documents) et nommez-le
lead-calendly. - Ouvrez votre fichier ZIP et copiez tout son contenu pour le coller dans votre nouveau dossier
lead-calendly. - Ouvrez VS Code.
- Allez dans le menu en haut à gauche et cliquez sur File > Add Folder to Workspace (ou Ouvrir un dossier), puis sélectionnez votre dossier
lead-calendly. - Dans la barre latérale gauche de VS Code, faites un clic droit sur le dossier du template et sélectionnez Open in Integrated Terminal (Ouvrir dans le terminal intégré).
- Dans le terminal qui s'affiche en bas, tapez la commande suivante et appuyez sur Entrée :
npm install
Node.js va installer automatiquement toutes les dépendances nécessaires en quelques secondes.
💻 Étape 2 : Lancer le mode Aperçu (Local)
Pour voir votre site en direct pendant que vous le modifiez, tapez cette commande dans votre terminal :
npm run dev
Votre site est maintenant actif en local sur votre machine.
- Ouvrez votre navigateur internet.
- Rendez-vous à l'adresse suivante :
http://localhost:3000
Vérifier le rendu Mobile (Responsive)
Pour vérifier que votre site est parfaitement optimisé sur smartphone :
- Appuyez sur la touche F12 de votre clavier pour ouvrir les outils de développement.
- Cliquez sur l'icône Mobile/Tablette en haut de la console.
- Sélectionnez un modèle (par exemple iPhone 14) pour voir la version mobile ultra-rapide.
✍️ Étape 3 : Personnalisation des textes
L'architecture du site est simplifiée au maximum. Pour modifier le contenu, tout se passe dans le fichier app/page.tsx.
Vous pouvez couper votre écran en deux : le code à gauche, et votre navigateur à droite pour voir les changements se faire en direct à chaque sauvegarde (Contrôle + S).
Exemple de modification dans le code :
Recherchez les variables de texte et remplacez-les par vos informations :
// Modifiez simplement le texte entre les guillemets
const name = "Guillaume Chevalier";
const title = "Développeur Full-Stack Next.js";
🤖 Astuce IA : Si vous ne voulez pas toucher au code vous-même, faites un Contrôle + A puis Contrôle + C sur le fichier
page.tsx. Collez le tout dans Gemini ou ChatGPT et dites-lui : "Adapte-moi ce code avec mes informations qui sont : [Vos Infos]. Ne modifie pas la structure du code, change uniquement le texte." Vous n'aurez plus qu'à recopier le résultat !
📸 Étape 4 : Optimisation et changement de la photo
Pour garder un score de performance Google de 100/100, vous devez optimiser votre photo de profil avant de l'inclure.
- Créez une photo carrée (sur Canva par exemple).
- Allez sur le site gratuit Squoosh.app (lien dispo dans le
README.md). - Glissez votre photo sur le site, puis sélectionnez le format AVIF en bas à droite. Cela va compresser votre image (jusqu'à -98% de taille en moins) sans perdre en qualité.
- Téléchargez l'image et nommez-la par exemple
photo-tete.avif. - Glissez ce fichier directement dans le dossier
public/de votre projet sur VS Code. - Dans votre fichier
app/page.tsx, modifiez le chemin de l'image et le texte alternatif (SEO) :
const profilePhoto = "/photo-tete.avif";
const photoAlt = "Photo de profil de Guillaume Chevalier";
const expertiseShort = "Votre petite phrase d'accroche sous la photo.";
📅 Étape 5 : Intégrer votre lien Calendly
La dernière grosse étape de cette première partie consiste à lier votre calendrier.
- Connectez-vous sur votre compte Calendly (la version gratuite suffit largement).
- Récupérez le lien unique de votre événement de prise de rendez-vous.
- Collez simplement ce lien dans l'emplacement dédié du code (que nous détaillerons dans la partie 2).
📅 Étape 6 : Brancher votre Calendly
Une fois votre événement créé sur Calendly, nous allons lier votre calendrier à la maquette :
- Sur votre tableau de bord Calendly, cliquez sur Copy link (Copier le lien) de l'événement souhaité.
- Ouvrez
app/page.tsx. - Cherchez la variable du lien Calendly et remplacez-la par le vôtre.
- Sauvegardez (Contrôle + S) et cliquez sur le bouton "Réserver ma session" sur votre aperçu local pour tester en direct.
🎨 Étape 7 : Personnaliser l'identité visuelle (Favicon & Logos)
Pour que votre site soit pro et reconnaissable, vous devez remplacer les visuels par défaut :
- La Favicon (l'icône de l'onglet) : Remplacez le fichier
app/icon.pngpar votre propre logo carré (au format PNG). - Le Logo Google / Réseaux : Dans le dossier
public/, remplacez le fichierlogo.pngpar votre logo officiel. Il servira à l'affichage de votre site sur Google ou lors des partages.
🌈 Étape 8 : Modifier les Couleurs du Thème
Le template utilise des variables CSS centralisées pour vous éviter de modifier chaque page manuellement. Tout se gère dans app/globals.css.
Ouvrez le fichier et modifiez uniquement la première partie sous le bloc :root (la zone marquée à modifier) avec vos codes hexadécimaux :
:root {
/* À MODIFIER : Votre palette principale */
--primary: #3b82f6;
--secondary: #1e3a8a;
--background: #ffffff;
}
🎨 Astuce Design : Vous manquez d'inspiration ? Allez sur le site coolors.co, trouvez une palette qui vous plaît, cliquez sur les trois petits points et faites Copy as CSS. Donnez ce code à Gemini avec la consigne : "Applique ces couleurs sur la zone :root de mon code Next.js".
🔄 En cas de bug d'affichage (Mise à jour du cache)
Si vos couleurs ne changent pas instantanément sur votre navigateur :
- Éteignez votre terminal dans VS Code avec Contrôle + C.
- Supprimez le dossier caché
.nextqui s'est créé dans votre projet (c'est le cache). - Relancez le serveur avec
npm run dev. Vos nouvelles couleurs apparaîtront !
🔘 Étape 9 : Harmoniser le Bouton Calendly
Pour que l'intégration Calendly reprenne les couleurs exactes de votre charte graphique, ouvrez le composant CtaButton (situé dans le dossier des composants).
Modifiez les paramètres de couleur de l'intégration sans inclure le symbole dièse (#) :
// Exemple de configuration des couleurs Calendly
const primaryColor = "3b82f6"; // Votre couleur principale (sans #)
const textColor = "ffffff"; // Couleur du texte (sans #)
✍️ Étape 10 : Personnaliser le contenu de la Hero & de la Sécurité
Le texte de conversion
Ouvrez le composant HeroContent. Lisez simplement les commentaires pour savoir quoi modifier. Vous y trouverez le petit badge d'accroche (ex: "Boostez votre croissance") et le titre principal. Remplacez-les par vos propres textes orientés bénéfices clients.
La modale de sécurité Anti-Robots
Pour éviter que des bots ou des spams ne remplissent votre Calendly de faux rendez-vous, une fenêtre de vérification humaine est intégrée par défaut. Si vous souhaitez modifier son texte, le fichier est entièrement commenté. Si vous préférez la supprimer, le code vous appartient, vous êtes libre !
🔍 Étape 11 : Configurer le SEO (Metadata)
C'est l'étape cruciale pour apparaître proprement sur Google et sur les réseaux sociaux. Ouvrez le fichier app/layout.tsx et personnalisez les deux lignes suivantes :
export const metadata = {
title: "Nom de votre entreprise | Votre promesse principale",
description: "La description de 150 caractères maximum qui apparaîtra sous votre lien dans les résultats Google.",
};
⚡ Liberté totale : Le pouvoir du Code
Ce template est optimisé pour rester ultra-léger et responsive (parfait sur mobile). Cependant, vous pouvez modifier 100 % des éléments.
Par exemple, le fond du site affiche un effet de grille avec de petits points esthétiques. Si vous préférez un fond uni et épuré, cherchez la balise <div> commentée "Points de fond" dans votre fichier page.tsx et supprimez-la simplement !
💬 Vous avez une question ?
Votre machine à leads est prête ! Il ne vous reste plus qu'à la synchroniser avec votre GitHub pour la déployer gratuitement en ligne.
Si vous bloquez sur une étape ou si vous avez besoin d'aide pour personnaliser un élément, posez votre question dans l'espace commentaires ou rejoignez notre communauté. Bonne configuration et à très vite pour de nouvelles performances ! 🚀
👉 Hostinger jusqu'à -85% : J'en profite