Die SEO-Seite bleibt indexierbar
Ihre Seite kann Überschriften, Texte, Links, FAQs und Schema-Elemente rund um den Spielrahmen enthalten.
Next.js Spiel-Widget
Next.js Spiel-Widget für Websites
Websites, die Next.js-Inhalte bereitstellen, können ein spielbares Spiel hinzufügen, ohne eine Spiel-Engine im App-Bundle auszuliefern. Verwenden Sie eine indexierbare Seite für den Inhalt, rendern Sie den Games I Know-Frame zum Abspielen und behandeln Sie Ereignisse bei Bedarf in einer Client-Komponente.
App Router-freundlich
Indexierbare Seitenkopie
Kundenereignisbearbeitung
Framework-sicher iframe
Kurzantwort
Verwenden Sie eine Frame-Route und fügen Sie anschließend den Seitenkontext hinzu.
Für Next.js werden SEO-Metadaten und Seitentext in der Route beibehalten. Anschließend werden Games I Know und iframe in einer client-sicheren Komponente mit /embed/{gameSlug}/frame/ als src gerendert.
Probieren Sie das Next.js-freundliche Spiel-Widget aus.
Die Live-Demo zeigt den Frame-Routing-Prozess und das Ereignisprotokoll, das eine Next.js-Clientkomponente verarbeiten kann.
Next.js Teams fügen ein iframe Spiel hinzu
Warum das in Next.js gut funktioniert
Next.js ist am stärksten ausgeprägt, wenn Seiteninhalt und Metadaten serverseitig gerendert werden, während das Verhalten ausschließlich im Browser in den fokussierten Clientkomponenten verbleibt.
Keine auf Flüssigkeitszufuhr basierende Spiellogik
Das Spiel befindet sich innerhalb des iframe, sodass Ihre Next.js-Route einfacher und schneller zu warten bleibt.
Saubere Kundengrenze
Lediglich der Event-Listener und die iframe-Steuerelemente benötigen clientseitiges Verhalten.
Ablauf einrichten
Wie man ein Spiel-Widget in Next.js hinzufügt
Erstellen Sie eine indexierbare Route, platzieren Sie iframe im Inhalt und verwenden Sie eine Clientkomponente nur für die Ereignisbehandlung.
Schritt 1
Erstellen Sie die Routenseite
Fügen Sie Metadaten, die kanonische URL, den Seitentext und Links hinzu, um den Zweck der Seite zu erfüllen.
Schritt 2
Rendere iframe
Verwenden Sie die Games I Know Frame-URL mit Ihrer Mandanten-ID im Seiteninhalt oder in einer kleinen Komponente.
Schritt 3
Browserereignisse verarbeiten
In einer Clientkomponente werden Nachrichtenereignisse überwacht und nach data.source === "gamesiknow" gefiltert.
Schritt 4
Belohnungen serverseitig speichern
Verwenden Sie eine API-Route oder einen Backend-Service, um signierte Ergebnisse zu überprüfen, bevor Sie Belohnungen gewähren.
Durchführung
Next.js Implementierungshinweise
Trennen Sie crawlerfreundliche Inhalte von der rein browserbasierten Nachrichtenverarbeitung, damit die Seite sowohl für Menschen als auch für Suchmaschinen nützlich ist.
Routenmetadaten verwenden
Legen Sie Titel, Beschreibung, kanonischen Tag, Open Graph-Tags und FAQ-Schema auf der öffentlichen Seite fest, die das Widget hostet.
Die Landingpage darf nicht iframe werden.
Die öffentliche Seite /embed/{gameSlug}/ ist indexierbarer Inhalt. Der iframe sollte /embed/{gameSlug}/frame/ verwenden.
Layoutänderung vermeiden
Eine feste Spielhöhe wird reserviert, damit iframe den Inhalt nach dem Laden nicht verschiebt.
Verfügbare Spiele
Wähle das Spiel aus, das zur Seite passt.
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 Setup
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 Setup
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed Setup
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed Setup
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed Setup
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed Setup
Häufig gestellte Fragen
Häufig gestellte Fragen zu Next.js Spiel-Widget
Was ist der Unterschied zwischen /embed/{gameSlug}/ und /embed/{gameSlug}/frame/?
Verwenden Sie /embed/{gameSlug}/frame/ als iframe-Quelle. Diese Route ist der schlanke Spiel-Frame, der für Website-embed- und postMessage-Ereignisse erstellt wurde. Die Route /embed/{gameSlug}/ ist die öffentliche Vorschau- und SEO-Seite für Benutzer und nicht die Route, die in einem iframe platziert werden soll.
Müssen Besucher eine App herunterladen oder ein Konto erstellen?
Nein. Besucher können direkt im Browser auf ihrem Smartphone, Tablet, Laptop oder Desktop-Computer spielen. Ein Partnerkonto wird nur vom Website-Betreiber benötigt, der die Anwendung installiert.
Kann ich embed auf meine eigene Domäne beschränken?
Ja. Games I Know und embed sind für registrierte Websites und domainbeschränkte Mandanteneinstellungen konzipiert, daher kann kopierter iframe-Code nicht frei auf nicht autorisierten Websites wiederverwendet werden.
Welche Games I Know Titel sind derzeit embeddbar?
Tic Tac Toe, Four in a Row, Bingo und I Know sind als embed-fähige Browserspiele verfügbar. Die embed-Dokumentation verwendet für alle unterstützten Spiele dasselbe Ereignismodell.
Soll die Komponente iframe eine Clientkomponente in Next.js sein?
Das iframe-Markup kann von einer Serverkomponente gerendert werden, aber jeder postMessage-Listener oder Vollbildstatus sollte sich in einer Clientkomponente befinden.
Bereit, ein Browserspiel hinzuzufügen?
Erstellen Sie ein Partnerkonto, registrieren Sie Ihre Domain und generieren Sie eine domainbeschränkte iframe für Ihre Website.