Use a small browser boundary
The Rive runtime needs a browser canvas. In an App Router project, keep that behavior inside a focused Client Component while the surrounding heading, copy and links remain server-rendered where appropriate. You do not need to move the whole landing page into a client bundle.
The client boundary should own the canvas, event listeners and runtime lifecycle. Pass only the configuration it needs, such as an asset path or a named variant. Follow the Next.js client directive guidance for boundary and prop rules.
Plan hydration around a stable fallback
The server and initial client render should agree on the layout. Render a static character image in a reserved box and initialize the runtime after mounting. Do not read window dimensions or motion preferences during a server render.
If a browser-only dependency must be dynamically imported, keep that import inside the supported client-side boundary. Verify the behavior for your Next.js version. The character should not cause the headline or CTA to shift when hydration finishes.
Serve assets with predictable URLs
A Rive export placed in the public directory is normally referenced from the site root. If the application uses a base path, asset prefix or a separate CDN, confirm the exact URL from the rendered page rather than assuming a development path works in production.
Self-host the matching runtime and WebAssembly file if that is your delivery approach. Cache versioned assets deliberately and update references together when a new rig or runtime is released. A stale state-machine contract can break an otherwise successful file load.
Connect navigation and application events
Next.js navigation can preserve layouts while replacing nested content. Decide whether the mascot belongs to a persistent layout or to a specific page. A persistent instance should not celebrate again on every route change; a page instance must clean up when removed.
Translate confirmed application events into the rig’s inputs. Keep server actions and data mutations independent from the animation. A failed mascot load must not prevent a signup, checkout or other essential task from completing.
Test beyond the first page load
Review a direct visit, a client-side navigation into the page, navigation away and a return. Check reduced motion, slow loading and a missing .riv file. Make sure the static image and meaningful copy remain available in each case.
The delivery scope should state whether integration covers the App Router, Pages Router or a specific existing component. Share that context with the project brief. The animation file alone cannot resolve every deployment and rendering choice in an application.