Capacitor (3) + Next.js Deep links not working

[antonioberetini]

We have been trying to get deep links working in our capacitor application. We followed the official capacitor documentation here: https://capacitorjs.com/docs/v3/guides/deep-links

Clicking on our website URL prompts the user either to open the link in the web browser or in the application. When we select to open in native app, the route to which the URL points to is not being recognized by the native application. For instance, if I try opening a URL that points at "/signin" page, instead of opening the sign-in page it opens the application to whichever page it was already on or the index page.

The documentation mentions the same issue where the native OS is agnostic of the route and hence asks us to configure an appUrlOpen listener with the capacitor app plugin. The examples mentioned in the docs are only for Vue, React and Angular. While I tried doing it the react way, the listener seems not to get triggered at all when the "appUrlOpen" event happens. giving that Next.js router works its own way I am assuming that this is where the issue is coming from and we are not able to resolve it.

Screenshots of the code which adds the listener and of it being imported in _app.js have been attached. It would be really helpful if you could point out to us what we might be missing or even a template for implementing the same with next.js.