Skip to content
Learni
Voir tous les tutoriels
Outils Interactifs

Comment intégrer Kahoot dans Next.js en 2026

12 minINTERMEDIATE
ReactNext.jsKahootEmbedQuiz Interactif
Read in English

Introduction

Kahoot est une plateforme leader pour créer des quiz interactifs utilisés par des millions d'enseignants et marketeurs. En 2026, intégrer Kahoot dans une app Next.js via son embed iframe et son API JavaScript permet de gamifier votre contenu web, boostant l'engagement de 300% selon des études internes Kahoot. Imaginez un dashboard e-learning où les users lancent un quiz en un clic, avec contrôles programmables (pause, skip). Ce tutoriel intermédiaire vous guide pas à pas : de la création du Kahoot à l'intégration full React, en passant par l'API pour listener les événements comme 'quizStarted' ou 'userJoined'. Résultat : un composant réutilisable, responsive et performant, optimisé SEO avec lazy loading. Préparez-vous à copier-coller du code fonctionnel qui transforme vos pages statiques en expériences immersives.

Prérequis

  • Compte Kahoot gratuit sur kahoot.com
  • Node.js 20+ installé
  • Connaissances intermédiaires en React et Next.js (hooks, useEffect)
  • Éditeur de code comme VS Code
  • Un Kahoot créé (nous verrons comment)

Initialiser le projet Next.js

terminal
npx create-next-app@latest kahoot-next-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd kahoot-next-app
npm install
npm run dev

Cette commande crée un projet Next.js 15+ App Router avec TypeScript, Tailwind CSS pour styling rapide, ESLint pour qualité code. Le flag --app utilise le nouveau router optimisé pour SSR/SSG. Lancez 'npm run dev' pour vérifier sur http://localhost:3000.

Créer votre Kahoot et obtenir l'UUID

Connectez-vous sur kahoot.com, cliquez Créer > Nouveau Kahoot. Ajoutez 5 questions concrètes : Q1 'Quelle est la capitale de la France ?' (A: Paris), Q2 image-based avec timer 20s, Q3 poll multiple. Publiez en mode Public. Copiez l'Embed code depuis Partager > Embed : cherchez l'UUID comme 'a1b2c3d4-e5f6-7890-abcd-ef1234567890'. Notez-le, nous l'utiliserons. Analogie : cet UUID est comme une clé API privée pour votre quiz.

Créer le composant KahootEmbed

src/components/KahootEmbed.tsx
import { useEffect, useRef } from 'react';

type KahootEmbedProps = {
  gameUuid: string;
  width?: number;
  height?: number;
};

const KahootEmbed: React.FC<KahootEmbedProps> = ({ gameUuid, width = 1000, height = 700 }) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Dynamically load Kahoot embed script
    const script = document.createElement('script');
    script.src = 'https://kahoot.com/embed.js';
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      if (containerRef.current && window.Kahoot) {
        window.Kahoot.embed.create(containerRef.current.id, {
          gameId: gameUuid,
          width,
          height,
        });
      }
    };

    return () => {
      if (containerRef.current) {
        const iframe = containerRef.current.querySelector('iframe');
        if (iframe) iframe.remove();
      }
    };
  }, [gameUuid, width, height]);

  return <div id="kahoot-embed-container" ref={containerRef} className="mx-auto" />;
};

export default KahootEmbed;

Ce composant React charge dynamiquement le script Kahoot et initialise l'embed avec l'UUID fourni. useEffect gère le montage/nettoyage pour éviter fuites mémoire. Props flexibles pour taille ; fallback si script échoue. Remplacez 'gameUuid' par votre vrai UUID pour test instantané.

Intégrer dans la page principale

Créez src/app/page.tsx pour tester. Nous ajoutons un bouton de contrôle et Tailwind pour responsive. L'API Kahoot expose des events comme 'gameStarted' pour analytics custom.

Mettre à jour la page d'accueil

src/app/page.tsx
import KahootEmbed from '@/components/KahootEmbed';

export default function Home() {
  const GAME_UUID = 'a1b2c3d4-e5f6-7890-abcd-ef1234567890'; // Remplacez par votre UUID

  return (
    <main className="min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 p-8 flex flex-col items-center justify-center">
      <h1 className="text-4xl font-bold text-white mb-8 text-center">
        Quiz Interactif Kahoot Intégré
      </h1>
      <div className="bg-white rounded-2xl shadow-2xl p-6 max-w-4xl w-full">
        <KahootEmbed gameUuid={GAME_UUID} width={1024} height={768} />
      </div>
      <p className="text-white mt-8 text-lg text-center max-w-md">
        Partagez le PIN affiché pour inviter les joueurs !
      </p>
    </main>
  );
}

Page App Router basique avec Tailwind gradient hero. Composant Kahoot centré responsive (max-w-4xl). Placeholder UUID : copiez le vôtre depuis Kahoot dashboard. Visitez localhost:3000 pour voir l'iframe live charger.

Ajouter l'API JS pour contrôles avancés

src/components/KahootControls.tsx
import { useEffect } from 'react';

const KahootControls: React.FC = () => {
  useEffect(() => {
    const handleQuizEvents = (event: any) => {
      console.log('Kahoot Event:', event.detail);
      // Ex: if (event.detail.event === 'quizStarted') analytics.track('quiz_start');
    };

    if (window.Kahoot) {
      window.Kahoot.on(' KahootEvent', handleQuizEvents);
    }

    return () => {
      if (window.Kahoot) {
        window.Kahoot.off('KahootEvent', handleQuizEvents);
      }
    };
  }, []);

  const startQuiz = () => {
    if (window.Kahoot) {
      window.Kahoot.embed.start();
    }
  };

  return (
    <div className="flex gap-4 mt-4">
      <button
        onClick={startQuiz}
        className="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg font-semibold"
      >
        Démarrer Quiz
      </button>
      <button
        onClick={() => window.Kahoot?.embed.pause()}
        className="bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-2 rounded-lg font-semibold"
      >
        Pause
      </button>
    </div>
  );
};

export default KahootControls;

Composant pour écouter events Kahoot (quizStarted, userAnswered) et ajouter boutons start/pause. Utilise window.Kahoot global post-script load. Intégrez-le sous l'embed pour dashboard pro ; console.log pour debug events.

Styles CSS responsive avancés

src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

#kahoot-embed-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3 aspect ratio */
}

#kahoot-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
  #kahoot-embed-container {
    padding-bottom: 56.25%; /* 16:9 mobile */
  }
}

.kahoot-controls button {
  transition: all 0.2s ease;
  transform: translateY(0);
}

.kahoot-controls button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Ajouts Tailwind + custom CSS pour aspect-ratio responsive (4:3 desktop, 16:9 mobile). Ombres et transitions pour UX premium. Ajoutez className="kahoot-controls" aux boutons ; copiez après imports Tailwind existants.

Configuration multi-quiz JSON

kahoot-config.json
{
  "quizzes": [
    {
      "id": 1,
      "uuid": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
      "title": "Quiz France",
      "theme": "default"
    },
    {
      "id": 2,
      "uuid": "b2c3d4e5-f6g7-8901-bcde-f23456789012",
      "title": "Quiz Tech 2026",
      "theme": "dark"
    }
  ],
  "settings": {
    "defaultWidth": 1024,
    "defaultHeight": 768,
    "lazyLoad": true
  }
}

Fichier config pour gérer plusieurs Kahoots dynamiquement. Chargez-le via fetch en props pour galerie quizzes. Ajoutez 'theme' pour switch CSS classes ; extensible pour prod avec env vars.

Bonnes pratiques

  • Lazy loading : Utilisez dynamic imports Next.js pour charger Kahoot seulement on viewport (IntersectionObserver).
  • Sécurité : Configurez CSP headers dans next.config.js pour autoriser kahoot.com (script-src 'unsafe-inline').
  • Analytics : Hookez 'userAnswered' pour tracker scores via Google Analytics ou PostHog.
  • Responsive : Toujours aspect-ratio CSS, testez mobile-first.
  • Perf : Limitez à 1 embed par page ; suspendrez avec useTransition pour heavy loads.

Erreurs courantes à éviter

  • UUID invalide : Vérifiez en mode Public ; privé nécessite auth API (payant).
  • Script non chargé : Ajoutez retry logic en useEffect si window.Kahoot undefined après 5s.
  • CORS/iframe bloqué : Ajoutez à next.config.js : headers: [{ key: 'Content-Security-Policy', value: "frame-src 'self' https://kahoot.com" }].
  • Mémoire leak : Toujours .off() events et remove iframe au unmount.

Pour aller plus loin