Next.jsReact游戏站

template-nextjs — Next.js 游戏站模板

作者 phaserjs

Phaser 4 + Next.js 15 的 React 桥接游戏模板，适合需深度整合 React 的网页游戏。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

目前只有 1 张可用预览，尚未找到可用演示站，暂无法补充内页和手机端截图。

仓库预览 1

查看源码在新标签页打开

作者提供的预览

来自项目仓库的原始界面图片。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

官方维护，适配 Phaser 4 与 Next.js 15.3.1

React 与 Phaser 通过 EventBus 双向通信

支持热重载，开发流程顺畅

提供生产构建脚本，输出到 dist 目录

内置场景示例与清晰的目录结构

模板详细介绍

这是 Phaser 官方维护的 Next.js 模板，面向 Phaser 4 与 Next.js 15.3.1，使用 TypeScript 5。它的核心价值在于提供了一条 React 与 Phaser 之间的双向通信桥梁：通过 PhaserGame.tsx 组件和 EventBus，你可以在 React 组件中控制游戏场景，也可以让游戏场景触发 React 状态更新。模板默认包含一个可运行的 Phaser 场景，并预设了清晰的目录结构，方便你在此基础上替换或扩展自己的游戏逻辑。

如果你正在构建一个需要大量 UI 交互的网页游戏，比如带有 HUD、菜单或数据面板的 RPG，这个模板会特别合适。它让你能够用 React 管理界面层，而游戏逻辑完全交给 Phaser，两者通过事件解耦。开发时支持热重载，静态资源放在 public/assets 下即可被游戏加载。构建产物输出到 dist 文件夹，部署时上传该目录即可。

需要留意的是，模板默认会在 dev 和 build 时向 gryzor.co 发送一次匿名请求（仅包含模板名、构建类型和 Phaser 版本），如果你介意，可以使用 dev-nolog 和 build-nolog 命令，或手动移除 log.js。另外，模板基于 Next.js 的 Pages Router（src/pages），并非最新的 App Router，如果你对项目结构有特定偏好，可能需要自行调整。

Next.jsReact游戏站

适合你的项目吗？

适用场景

需要 React 构建复杂 UI 的网页游戏
希望将 Phaser 游戏嵌入现有 Next.js 项目
需要从 React 控制游戏场景或接收游戏事件
作为学习 Phaser 与 React 集成的参考

适合人群

熟悉 React 和 TypeScript 的前端开发者
需要快速搭建 Phaser 4 + Next.js 项目的团队
希望保持 UI 层与游戏逻辑分离的开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆后运行 npm install，然后 npm run dev 启动开发服务器（默认端口 8080）。
2
游戏代码位于 src/game，React 组件在 src/App.tsx 等位置。
3
新增场景时，记得在 create 方法末尾通过 EventBus 发射 'current-scene-ready' 事件，以便 React 能获取场景引用。
4
构建前请检查 next.config.mjs 是否需要自定义。

查看仓库使用说明