Next.js Discord

Discord Forum

NextJS 13.5.4 canvas duplicate with PhaserJS

Answered
Great black wasp posted this in #help-forum
Open in Discord
Great black waspOP
I'm using NextJS 13.54 with PhaserJS, the canvas now rendered twice and the game scene become looping instance, but when I downgrade to NestJS 13.4.19 everything is normal.
Answered by Australian Freshwater Crocodile
Answer:
How to run phaser in next.js 13:
Create a Game component that creates the Phaser.Game instance, and return it with the game container:
return <div id='game-container'></div>

in your page (where you want to import the game component, you use Lazy Loading (https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to import the component
const Game = dynamic(() => import("@/components/Game"))


How to solve duplicate canvas problem:
In next.js 13.4 Strict mode was enabled by default, making things like useEffect run twice
So you need to disable Strict mode: https://nextjs.org/docs/app/api-reference/next-config-js/reactStrictMode
View full answer

10 Replies

Great black waspOP
this with NextJS 13.5.4 :
and this with NextJS 13.4.19 :
Australian Freshwater Crocodile
I tried using Phaser with nextjs 13 once already and it worked fine. When I get home I will check what version I was using
In the meanwhile can you show how you're implementing it?
Because I created a "client?" component and loaded it using next/dynamic.
Only way it worked without problems
Australian Freshwater Crocodile
Oh nvm, i think you saw my answer I posted in the phaser server 😅
Australian Freshwater Crocodile
I was in version 13.4.12 when I tried and worked
Australian Freshwater Crocodile
Answer:
How to run phaser in next.js 13:
Create a Game component that creates the Phaser.Game instance, and return it with the game container:
return <div id='game-container'></div>

in your page (where you want to import the game component, you use Lazy Loading (https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to import the component
const Game = dynamic(() => import("@/components/Game"))


How to solve duplicate canvas problem:
In next.js 13.4 Strict mode was enabled by default, making things like useEffect run twice
So you need to disable Strict mode: https://nextjs.org/docs/app/api-reference/next-config-js/reactStrictMode
Answer
Australian Freshwater Crocodile
Example of the game component:
'use client'

import React, { useEffect, useState } from 'react'

import Phaser from 'phaser'
import HelloWorldScene from './scenes/HelloWorldScene'

const Game = () => {

    const [game, setGame] = useState<Phaser.Game | undefined>()

    useEffect(() => {
        const config = {
            type: Phaser.AUTO,
            parent: "game-canvas-container",
            width: 1920,
            height: 1080,
            scale: {
                mode: Phaser.Scale.FIT,
            },
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: [HelloWorldScene]
        };

        const game = new Phaser.Game(config);
        setGame(game);

        return () => {
            game?.destroy(true)
        }
    }, [])

    return (
        <div id='game-canvas-container'></div>
    )
}

export default Game
Great black waspOP
Thanks your solution solved my problem