如何在Next.js网站内嵌itch.io托管的Unity WebGL游戏且不跳转？

一、解决itch.io嵌入跳转的问题 #

itch.io默认的itch.io/embed/<id>链接属于预览嵌入，点击“Play”按钮会强制跳转到itch.io的游戏页面。要实现在线直接游玩，需使用itch.io的完整游戏嵌入功能：

1. 开启完整嵌入权限
   登录itch.io进入游戏管理页，点击「Edit game」，找到「Embed options」板块，勾选「Allow embedding full game」，并将你的Next.js网站域名添加到「Allowed domains」列表（例如your-nextjs-site.com）。

2. 获取正确的嵌入链接
   在「Embed options」中选择「Full embed」，复制对应的iframe src链接，格式通常为：
   https://<你的itch用户名>.itch.io/<游戏名称>/embed

3. 修改React组件代码
   将原iframe的src替换为上述完整嵌入链接，示例：

   import React from 'react';
   
   const GameEmbed: React.FC = () => {
     return (
       <div className="w-full h-screen relative">
         <iframe
           src="https://your-username.itch.io/your-game-name/embed"
           className="w-full h-full border-none"
           allowFullScreen
           title="Unity Game"
           // 添加必要权限确保游戏正常运行
           allow="autoplay; fullscreen; clipboard-read; clipboard-write"
         ></iframe>
       </div>
     );
   };
   
   export default GameEmbed;
   

二、无跳转的替代托管服务 #

如果itch.io的设置仍无法满足需求，推荐以下支持无跳转嵌入的服务：

• Netlify/Vercel
  直接将Unity导出的WebGL文件夹（包含index.html、Build、TemplateData等文件）上传部署，获取游戏访问URL后嵌入Next.js。这种方式完全自主控制，无任何跳转，还支持自定义域名。

• GitHub Pages
  免费托管静态资源，将WebGL文件上传到GitHub仓库并开启Pages服务，获取游戏URL后嵌入即可，适合个人小型项目。

• Unity Play
  Unity官方托管平台，支持将WebGL游戏直接嵌入外部网站。在游戏设置中添加允许嵌入的域名，复制官方提供的iframe代码即可实现无跳转游玩，还能查看游戏数据分析。

内容的提问来源于stack exchange，提问作者Arthur Kaza