Is there a way to preload a unity game using nextjs?

[af-arturoramirez]

Im trying to build a nextjs project with an unity game, there are some pages (/welcome page , /tutorial page and /information page) that the user will go before going to the game, so I want to preload the game component and have it ready when the user goes to the game page (/game).

I tried to add the game with a display none to the nextjs layout but every time I navigate to another page the game gets reloaded.

I was think is to have a SPA where I will show all the pages on the same url, but I just want to double check there is a another way to achieve this.

[tonjohn]

I'm working on implementing this in my NextJS 14 (app router) project. Did you ever get it working?

In theory having the game component in the layout should preserve it across navigations:

A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.

-- Routing: Pages and Layouts | Next.js

[Highnesslin]

Hi! 👋 I faced a very similar situation while integrating a Unity WebGL game into my Next.js project — where I also wanted to preload the game and avoid reloading it when navigating between pages.

✅ Here's a better approach than using display: none:
Instead of mounting/unmounting the Unity instance across routes (which causes a full reload), you can:

1. Move the Unity instance outside of the routing system
   Create a persistent container (e.g. using a React context or a global singleton)

Render Unity once and keep it hidden or off-screen using CSS transform/positioning

Control visibility with state, but don’t unmount the component

2. Use a client-only layout that preserves the Unity instance
   Here’s the key idea:

Create a layout like app/unity-layout.tsx (if using App Router)

Keep inside that layout so it persists between child routes

Use CSS like opacity: 0; pointer-events: none instead of display: none

3. (Alternative) Convert just the game flow into an SPA section
   You mentioned this — it works well too:

Use shallow routing or local state to simulate /welcome, /tutorial, etc.

Load Unity once, and show/hide pages using internal state

✅ You can also check out this live demo I built:
🎮 https://gravityball.top

It’s a physics-based Unity WebGL browser game with Next.js — and I use a persistent preload strategy to avoid reloading the game.

Let me know if you'd like me to share some working code or a GitHub template!

[jeffreylanters]

Hi! Unrelated to the topic, but may I add your game to the made with pages on the website?