SEO页面保持可索引状态
您的页面可以包含标题、正文、链接、常见问题解答以及围绕游戏框架的结构化信息。
Next.js 游戏小部件
Next.js 网站游戏小部件
Next.js 网站无需在应用包中打包游戏引擎即可添加可玩游戏。使用可索引页面来存放内容，渲染 Games I Know 框架以进行游戏，并在需要时在客户端组件中处理事件。
应用路由器友好
可索引页面副本
客户事件处理
框架安全的 iframe
简答
使用框架路由，然后添加页面上下文。
对于 Next.js，将 SEO 元数据和页面内容保留在路由中，然后在客户端安全的组件中渲染 Games I Know 和 iframe，并将 /embed/{gameSlug}/frame/ 作为 src。
试试这款兼容 Next.js 的游戏小部件
实时演示显示了 Next.js 客户端组件可以使用的帧路由和事件日志。
Next.js 团队添加了 iframe 游戏
为什么这在 Next.js 中效果很好
当页面内容和元数据由服务器渲染，而浏览器行为仅保留在聚焦的客户端组件中时，Next.js 最为强大。
没有大量补水相关的游戏逻辑
游戏运行在 iframe 中，因此您的 Next.js 路线维护起来会更简单快捷。
清晰的客户边界
只有事件监听器和 iframe 控件需要客户端行为。
设置流程
如何在 Next.js 中添加游戏小部件
创建一个可索引的路由，将 iframe 放在内容中，并且仅使用客户端组件进行事件处理。
步骤 1
创建路线页面
添加元数据、规范网址、页面文案和链接，以实现您希望页面达到的目的。
步骤 2
渲染 iframe
在页面主体或小型组件中使用带有租户 ID 的 Games I Know 框架 URL。
步骤 3
处理浏览器事件
在客户端组件中，监听消息事件并筛选 data.source === "gamesiknow"。
步骤 4
奖励保留在服务器端
使用 API 路由或后端服务来验证签名结果，然后再授予奖励。
执行
Next.js 实施说明
将爬虫友好的内容与仅限浏览器的消息处理分开，以便页面对人类和AI搜索系统都有用。
使用路由元数据
在托管小部件的公共页面上设置标题、描述、规范标签、Open Graph 标签和 FAQ 架构。
不要 iframe 登录页面
公共 /embed/{gameSlug}/ 页面是可索引内容。 iframe 应使用 /embed/{gameSlug}/frame/。
避免布局偏移
预留固定的游戏高度，这样 iframe 就不会在加载后推动内容移动。
可玩游戏
选择适合页面的游戏
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 设置
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 设置
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed 设置
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed 设置
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed 设置
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed 设置
常问问题
关于Next.js 游戏小部件的常见问题
/embed/{gameSlug}/ 和 /embed/{gameSlug}/frame/ 有什么区别？
使用 /embed/{gameSlug}/frame/ 作为 iframe 的 src。该路由是为网站 embed 和 postMessage 事件构建的轻量级游戏框架。/embed/{gameSlug}/ 路由是面向用户的公开预览和 SEO 页面，不应放置在 iframe 内。
访客需要下载应用程序或创建帐户吗？
不。访客可以在手机、平板电脑、笔记本电脑或台式机上的浏览器iframe内进行游戏。只有安装embed的网站所有者才需要合作伙伴帐户。
我可以将 embed 限制在我自己域内吗？
是的。Games I Know 和 embed 是围绕注册网站和域名受限的租户设置设计的，因此复制的 iframe 代码不能在未经授权的网站上随意重复使用。
哪些Games I Know标题目前是embed可执行的？
Tic Tac Toe、Four in a Row、Bingo 和 I Know 可作为 embed 浏览器游戏使用。embed 文档在所有受支持的游戏中使用相同的事件模型。
iframe 组件是否应为 Next.js 中的客户端组件？
iframe 标记可以从服务器组件渲染，但任何 postMessage 监听器或全屏状态都应该存在于客户端组件中。