A página de SEO permanece indexável
Sua página pode incluir títulos, textos, links, perguntas frequentes e um esquema relacionado ao contexto do jogo.
Next.js widget de jogo
Next.js widget de jogo para sites
Os sites Next.js podem adicionar um jogo jogável sem incluir um mecanismo de jogo no pacote do aplicativo. Use uma página indexável para o conteúdo, renderize o frame Games I Know para jogar e manipule os eventos em um componente cliente quando necessário.
Compatível com roteadores de aplicativos
Cópia da página indexável
Gestão de eventos para clientes
iframe seguro para o framework
Resposta curta
Utilize uma rota de frame e, em seguida, adicione o contexto da página.
Para Next.js, mantenha os metadados de SEO e o conteúdo da página na rota e, em seguida, renderize o Games I Know iframe em um componente seguro para o cliente com /embed/{gameSlug}/frame/ como src.
Experimente o widget de jogo compatível com Next.js
A demonstração ao vivo mostra a rota do frame e o registro de eventos que um componente cliente Next.js pode consumir.
Next.js equipes adicionando um jogo iframe
Por que isso funciona bem em Next.js
Next.js é mais forte quando o conteúdo da página e os metadados são renderizados no servidor, enquanto o comportamento exclusivo do navegador permanece nos componentes do cliente em foco.
Sem lógica de jogo que dependa muito da hidratação
O jogo reside dentro do iframe, portanto, sua rota Next.js permanece mais simples e rápida de manter.
Limite de cliente limpo
Somente o ouvinte de eventos e os controles iframe precisam de comportamento do lado do cliente.
Fluxo de configuração
Como adicionar um widget de jogo em Next.js
Crie uma rota indexável, coloque o iframe no conteúdo e use um componente cliente apenas para o tratamento de eventos.
Etapa 1
Criar a página de rota
Adicione metadados, URL canônica, texto da página e links para a finalidade que você deseja que a página atenda.
Etapa 2
Renderize o iframe
Utilize a URL do frame Games I Know com o seu tenantId dentro do corpo da página ou em um pequeno componente.
Etapa 3
Lidar com eventos do navegador
Em um componente cliente, escute os eventos de mensagem e filtre por data.source === "gamesiknow".
Etapa 4
Mantenha as recompensas no servidor.
Use uma rota API ou um serviço de backend para verificar os resultados assinados antes de conceder recompensas.
Implementação
Next.js notas de implementação
Separe o conteúdo otimizado para rastreadores do conteúdo que só pode ser processado pelo navegador, para que a página seja útil tanto para humanos quanto para sistemas de busca.
Usar metadados de rota
Defina o título, a descrição, o link canônico, as tags Open Graph e o esquema de perguntas frequentes na página pública que hospeda o widget.
Não iframe a página inicial
A página pública /embed/{gameSlug}/ é conteúdo indexável. O iframe deve usar /embed/{gameSlug}/frame/.
Evite mudanças de layout
Reserve uma altura de jogo fixa para que o iframe não empurre o conteúdo após o carregamento.
Jogos disponíveis
Escolha o jogo que se encaixa na página.
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.
Configuração Embed
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.
Configuração Embed
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Configuração Embed
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Configuração Embed
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Configuração Embed
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Configuração Embed
Perguntas frequentes
Perguntas frequentes sobre Next.js widget de jogo
Qual é a diferença entre /embed/{gameSlug}/ e /embed/{gameSlug}/frame/?
Use /embed/{gameSlug}/frame/ como o src do iframe. Essa rota é o frame de jogo leve criado para embeds de sites e eventos postMessage. A rota /embed/{gameSlug}/ é a página de pré-visualização pública e SEO para usuários, não a rota para ser inserida em um iframe.
Os visitantes precisam baixar um aplicativo ou criar uma conta?
Não. Os visitantes podem jogar dentro do navegador iframe em celulares, tablets, laptops ou computadores. Uma conta de parceiro é necessária apenas para o proprietário do site que instala o embed.
Posso restringir o embed ao meu próprio domínio?
Sim. Os termos Games I Know e embed são projetados para sites registrados e configurações de locatário com restrição de domínio, portanto, o código copiado de iframe não pode ser reutilizado livremente em sites não autorizados.
Quais títulos Games I Know estão atualmente disponíveis para embed?
Tic Tac Toe, Four in a Row, Bingo e I Know estão disponíveis como jogos de navegador compatíveis com embed. A documentação de embed utiliza o mesmo modelo de eventos em todos os jogos suportados.
O componente iframe deve ser um componente cliente em Next.js?
A marcação iframe pode ser renderizada a partir de um componente de servidor, mas qualquer ouvinte de postMessage ou estado de tela cheia deve residir em um componente de cliente.
Pronto para adicionar um jogo ao navegador?
Crie uma conta de parceiro, registre seu domínio e gere um iframe com restrição de domínio para seu site.