Template landing page Next.js : construire et déployer en 1 heure

Pas besoin de trois jours pour construire une landing page. Avec Next.js App Router, Tailwind CSS v4 et une bibliothèque de sections pré-construites, vous pouvez passer de npx create-next-app à une page déployée et production-ready en moins d'une heure. Ce guide parcourt tout le processus — setup, assemblage section par section, et déploiement.

Setup du projet

Commencez avec la dernière version de Next.js et Tailwind CSS v4 :

npx create-next-app@latest my-landing --app --ts --tailwind --src-dir
cd my-landing

Cela génère un projet avec App Router, TypeScript, Tailwind et un répertoire src/. Next.js 15 utilise Tailwind v4 par défaut, ce qui signifie une configuration CSS-first — pas de tailwind.config.ts nécessaire pour la plupart des setups.

Installez Framer Motion pour les animations de sections :

npm install motion

Votre structure de projet ressemble à ça :

my-landing/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── components/
│       └── sections/
├── public/
├── package.json
└── tsconfig.json

Créez un répertoire src/components/sections/ — chaque section y vit en tant que fichier indépendant.

Assemblage section par section

Une landing page à fort taux de conversion suit une formule éprouvée. Voici l'ordre exact des sections et pourquoi chacune existe :

1. Section Hero

Le hero énonce la proposition de valeur en moins de 5 secondes. Il nécessite un titre, un sous-titre, un bouton CTA principal, et optionnellement un visuel (screenshot, illustration ou fond dégradé).

// src/components/sections/Hero.tsx
"use client";

import { motion } from "motion/react";

const ease = [0.16, 1, 0.3, 1] as const;

export function Hero() {
  return (
    <section className="flex min-h-[80vh] flex-col items-center justify-center px-4 text-center">
      <motion.h1
        initial={{ opacity: 0, y: 32 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, ease }}
        className="max-w-3xl text-5xl font-bold tracking-tight md:text-6xl"
      >
        Construisez des landing pages à la vitesse de la pensée
      </motion.h1>
      <motion.p
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, ease, delay: 0.1 }}
        className="mt-6 max-w-xl text-lg text-muted-foreground"
      >
        844+ sections React production-ready. Copiez, collez, expédiez.
      </motion.p>
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, ease, delay: 0.2 }}
        className="mt-8 flex gap-4"
      >
        <a href="#pricing" className="rounded-xl bg-primary px-6 py-3 font-semibold text-primary-foreground">
          Commencer
        </a>
        <a href="#features" className="rounded-xl border border-border px-6 py-3 font-semibold">
          Voir les features
        </a>
      </motion.div>
    </section>
  );
}

Découvrez plus de variantes hero pour les layouts split, les fonds vidéo et les styles gradient.

2. Carousel de logos

Juste après le hero, montrez les logos d'entreprises ou d'intégrations. Cela établit la confiance avant que le visiteur n'évalue vos features. Une simple animation marquee suffit :

// src/components/sections/LogoCarousel.tsx
export function LogoCarousel({ logos }: { logos: { src: string; alt: string }[] }) {
  return (
    <section className="overflow-hidden border-y border-border py-8">
      <div className="flex animate-marquee gap-12">
        {[...logos, ...logos].map((logo, i) => (
          <img key={i} src={logo.src} alt={logo.alt} className="h-8 opacity-50 grayscale" />
        ))}
      </div>
    </section>
  );
}

Ajoutez le keyframe marquee dans votre CSS global :

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
}

3. Grille de features

Montrez comment votre produit tient la promesse du hero. Une grille en 3 colonnes avec icône, titre et description est le standard :

// src/components/sections/Features.tsx
"use client";

import { motion } from "motion/react";

interface Feature {
  icon: React.ReactNode;
  title: string;
  description: string;
}

const stagger = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.08 } },
};

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
};

export function Features({ features }: { features: Feature[] }) {
  return (
    <section id="features" className="mx-auto max-w-6xl px-4 py-24">
      <h2 className="text-center text-3xl font-bold">Tout ce dont vous avez besoin</h2>
      <motion.div
        variants={stagger}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-80px" }}
        className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3"
      >
        {features.map((f) => (
          <motion.div key={f.title} variants={item} className="rounded-2xl border border-border p-6">
            <div className="mb-4 text-2xl">{f.icon}</div>
            <h3 className="text-lg font-semibold">{f.title}</h3>
            <p className="mt-2 text-sm text-muted-foreground">{f.description}</p>
          </motion.div>
        ))}
      </motion.div>
    </section>
  );
}

Consultez toute la gamme de layouts de sections features — rangées alternées, grilles bento, grilles d'icônes et plus.

4. Témoignages

La preuve sociale par de vrais utilisateurs. Trois cartes de témoignages en ligne constituent le layout le plus simple et efficace :

// src/components/sections/Testimonials.tsx
interface Testimonial {
  quote: string;
  name: string;
  role: string;
  avatar: string;
}

export function Testimonials({ testimonials }: { testimonials: Testimonial[] }) {
  return (
    <section id="social-proof" className="bg-muted/50 px-4 py-24">
      <h2 className="text-center text-3xl font-bold">Adopté par les développeurs</h2>
      <div className="mx-auto mt-12 grid max-w-5xl gap-8 md:grid-cols-3">
        {testimonials.map((t) => (
          <div key={t.name} className="rounded-2xl border border-border bg-card p-6">
            <p className="text-sm italic text-muted-foreground">&laquo; {t.quote} &raquo;</p>
            <div className="mt-4 flex items-center gap-3">
              <img src={t.avatar} alt={t.name} className="h-10 w-10 rounded-full" />
              <div>
                <p className="text-sm font-semibold">{t.name}</p>
                <p className="text-xs text-muted-foreground">{t.role}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Explorez les variantes de témoignages pour les layouts marquee, masonry et vidéo.

5. Pricing

Lever l'objection "combien ça coûte ?". Un toggle entre tarification mensuelle et annuelle est le pattern SaaS standard. Consultez le catalogue de sections pricing pour les layouts toggle, comparaison de tiers et calculateur.

6. CTA + Footer

Terminez avec un call to action clair et un footer minimal. Le CTA reformule la proposition de valeur et offre un seul bouton. Le footer fournit les liens légaux, sociaux et un copyright.

Composition de la page

Assemblez toutes les sections dans src/app/page.tsx :

import { Hero } from "@/components/sections/Hero";
import { LogoCarousel } from "@/components/sections/LogoCarousel";
import { Features } from "@/components/sections/Features";
import { Testimonials } from "@/components/sections/Testimonials";

export default function HomePage() {
  return (
    <main>
      <Hero />
      <LogoCarousel logos={[/* vos logos */]} />
      <Features features={[/* vos features */]} />
      <Testimonials testimonials={[/* vos témoignages */]} />
      {/* Pricing */}
      {/* CTA */}
      {/* Footer */}
    </main>
  );
}

Chaque section est un composant autonome avec son propre contrat de données. Remplacez les données mock par du vrai contenu et la page est production-ready.

Déploiement

Vercel est le chemin le plus rapide du code à l'URL pour les projets Next.js :

npx vercel --prod

Ou connectez votre dépôt Git à Vercel pour des déploiements automatiques à chaque push. L'étape de build détecte Next.js automatiquement — aucune configuration nécessaire.

Pour d'autres plateformes, next build && next start produit un serveur Node.js de production. Exportez en statique avec output: "export" dans next.config.ts si votre landing page n'a pas de routes dynamiques.

Assemblage plus rapide avec Incubator

Écrire chaque section from scratch est la voie lente. Le catalogue Incubator vous donne 844+ sections React production-ready — heroes, grilles de features, tables de pricing, témoignages, CTAs, footers, navbars et plus. Chaque section est un composant autonome avec des données mock incluses. Parcourez le catalogue, copiez les sections dont vous avez besoin, remplacez le contenu, déployez. C'est comme ça qu'on expédie une landing page en une heure.