La page SEO reste indexable
Votre page peut inclure des titres, du texte, des liens, une FAQ et un schéma autour du cadre du jeu.
Next.js widget de jeu
Next.js Widget de jeu pour sites Web
Les sites Next.js peuvent ajouter un jeu jouable sans inclure de moteur de jeu dans le bundle de l'application. Utilisez une page indexable pour le contenu, affichez la fenêtre Games I Know pour le jeu et gérez les événements dans un composant client si nécessaire.
Application compatible avec les routeurs
copie de page indexable
Gestion des événements clients
iframe compatible avec le framework
Réponse courte
Utilisez une route de cadre, puis ajoutez le contexte de la page.
Pour Next.js, conservez les métadonnées SEO et le texte de la page dans la route, puis affichez Games I Know iframe dans un composant sûr côté client avec /embed/{gameSlug}/frame/ comme src.
Essayez le widget de jeu compatible avec Next.js
La démonstration en direct montre le chemin de trame et le journal des événements qu'un composant client Next.js peut consommer.
Next.js équipes ajoutant un jeu iframe
Pourquoi cela fonctionne bien dans Next.js
Next.js est le plus fort lorsque le contenu et les métadonnées de la page sont rendus côté serveur tandis que le comportement propre au navigateur reste dans les composants clients ciblés.
Pas de logique de jeu axée sur l'hydratation
Le jeu se trouve à l'intérieur du iframe, votre itinéraire Next.js reste donc plus simple et plus rapide à maintenir.
Limite du client propre
Seuls l'écouteur d'événements et les contrôles iframe nécessitent un comportement côté client.
Flux de configuration
Comment ajouter un widget de jeu dans Next.js
Créez une route indexable, placez le iframe dans le contenu et utilisez un composant client uniquement pour la gestion des événements.
Étape 1
Créer la page d'itinéraire
Ajoutez les métadonnées, l'URL canonique, le texte de la page et les liens correspondant à l'objectif que vous souhaitez que la page remplisse.
Étape 2
Afficher le iframe
Utilisez l'URL du cadre Games I Know avec votre identifiant de locataire à l'intérieur du corps de la page ou d'un petit composant.
Étape 3
Gérer les événements du navigateur
Dans un composant client, écoutez les événements de message et filtrez sur data.source === "gamesiknow".
Étape 4
Conservez les récompenses côté serveur.
Utilisez une route API ou un service backend pour vérifier les résultats signés avant d'accorder des récompenses.
Mise en œuvre
Next.js notes de mise en œuvre
Séparer le contenu adapté aux robots d'exploration de la gestion des messages réservée au navigateur afin que la page soit utile à la fois aux humains et aux systèmes de recherche AI.
Utiliser les métadonnées d'itinéraire
Définissez le titre, la description, l'URL canonique, les balises Open Graph et le schéma FAQ sur la page publique qui héberge le widget.
Ne pas iframe la page d'accueil
La page publique /embed/{gameSlug}/ est un contenu indexable. Le iframe doit utiliser /embed/{gameSlug}/frame/.
Évitez les changements de mise en page
Réservez une hauteur de jeu fixe afin que iframe ne déplace pas le contenu après le chargement.
Jeux disponibles
Choisissez le jeu qui convient à la page
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed configuration
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed configuration
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed configuration
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed configuration
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed configuration
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed configuration
FAQ
Questions fréquentes concernant Next.js widget de jeu
Quelle est la différence entre /embed/{gameSlug}/ et /embed/{gameSlug}/frame/?
Utilisez /embed/{gameSlug}/frame/ comme source de iframe. Cette route correspond au cadre de jeu léger conçu pour les événements embed du site web et les événements postMessage. La route /embed/{gameSlug}/ est la page de prévisualisation publique et la page optimisée pour le référencement (SEO) ; elle ne doit pas être placée dans un iframe.
Les visiteurs doivent-ils télécharger une application ou créer un compte ?
Non. Les visiteurs peuvent jouer directement dans le navigateur iframe sur téléphone, tablette, ordinateur portable ou ordinateur de bureau. Un compte partenaire est uniquement nécessaire au propriétaire du site web qui installe embed.
Puis-je limiter embed à mon propre domaine ?
Oui. Les Games I Know et embed sont conçus autour de sites Web enregistrés et de paramètres de locataires restreints au domaine, donc le code iframe copié ne peut pas être librement réutilisé sur des sites non autorisés.
Quels titres Games I Know sont actuellement embeddable ?
Les jeux Tic Tac Toe, Four in a Row, Bingo et I Know sont disponibles en tant que jeux navigateur jouables (embed). La documentation embed utilise le même modèle d'événements pour tous les jeux compatibles.
Le composant iframe doit-il être un composant client dans Next.js ?
Le balisage iframe peut être rendu à partir d'un composant serveur, mais tout écouteur postMessage ou état plein écran doit résider dans un composant client.
Prêt à ajouter un jeu par navigateur ?
Créez un compte partenaire, enregistrez votre domaine et générez un iframe à restriction de domaine pour votre site web.