[bug] Rerendering modals on route change next js app router

[ceeriil]

Link to minimal reproducible example

https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-solana-app-router

Summary

When integrating AppKit with Solana Wallet Adapter in a Next.js app using the App Router, the wallet disconnects on every route change. This results in modals (e.g., wallet selection) being re-rendered. The issue is evident in next js app multi-page setups where navigation between pages triggers the wallet adapter to disconnect.

Steps to Reproduce

1. Set up a Next.js project using the App Router.
2. Integrate AppKit and Solana Wallet Adapter following the provided example:
   Next.js Solana App Router Example.
3. Navigate between different pages in the app.
4. Observe that the wallet disconnects and modals re-render on each route change.

List of related npm package versions

@reown/appkit" "^1.6.3",
"@reown/appkit-adapter-solana": "^1.6.3",
"@reown/appkit-wallet-button": "^1.6.3",
"next": "15.0.1",

Node.js Version

v22.11.0

Package Manager

1.22.22

[linear]

APKT-2151 [bug] Rerendering modals on route change next js app router

[ceeriil]

@magiziz @tomiir

[rtomas]

can you create a minimal reproducible example ?

you can use this link ... https://stackblitz.com/github/reown-com/appkit-web-examples/tree/main/nextjs/next-solana-app-router