template-nextjs icon indicating copy to clipboard operation
template-nextjs copied to clipboard

Phaser 4 (RC-5), Next.js v16 App Router, React v.19 deprecates forwardRef, code cleanup, other fixes

Open ospira opened this issue 2 months ago • 0 comments

Further iterating on this: https://github.com/phaserjs/template-nextjs/pull/3

Since these templates and requested features (https://github.com/phaserjs/template-nextjs/issues/5) are not a current priority at the moment for the very busy core team, I thought I would help out especially as the previous PR on this was helpful to others despite no merge. As mentioned in the previous PR, it is good to give back when the core team gives us so much.

Updates (from the previous update - see earlier PR #3 linked at the top):

  1. Uses Phaser 4
  2. Next.js 16
  3. Better code, cleaner app router, ships with latest Next.js (16) defaults
  4. Includes default prettier for ease of use with vscode

[!NOTE] Upgrade to Next.js 16, React 19, and Phaser 4 with App Router migration, refactored Phaser bridge/scenes, and revamped tooling (ESLint flat config, Prettier, Tailwind/PostCSS, scripts).

  • Core Upgrades:
    • Bump deps to next@^16, react@^19, react-dom@^19, [email protected]; require Node >=24.
    • Replace next.config.mjs with typed next.config.ts.
  • App Router Migration:
    • Remove src/pages/*; add src/app/layout.tsx and src/app/page.tsx.
    • src/App.tsx marked 'use client' and loaded via App Router.
  • Phaser Integration Refactor:
    • Introduce src/game/scenes/common/GameScene.ts base class; restructure loaders under scenes/loaders/* and centralize CONFIG.
    • Rewrite src/game/PhaserGame.tsx: dynamic import (no SSR), drop forwardRef, accept ref prop and onChangeScene callback; use EventBus to update scene ref.
    • Update scenes (MainMenu, Game, GameOver) to extend GameScene and emit current-scene-ready via eventBus.
  • Tooling & Config:
    • Add flat ESLint config eslint.config.mjs; remove .eslintrc.json.
    • Add Prettier (.prettierrc).
    • Add Tailwind 4/PostCSS (postcss.config.mjs), keep global styles.
    • Update scripts: add start, lint and *-nolog variants; keep log.js.
    • Update .gitignore; add pnpm-lock.yaml; remove package-lock.json.
  • Docs:
    • Refresh README.md to reflect App Router structure and commands.

Written by Cursor Bugbot for commit 2e4a3dfbf1833c0e3f22d3848a6f2a16fbcce9ae. This will update automatically on new commits. Configure here.

ospira avatar Nov 07 '25 20:11 ospira