I am using NextJS 14 with app router.
Business case
We need to redirect users to a third-party URL and give a callbackUrl, idea being that the user is redirected back to the callbackUrl. The catch is that this redirection to third party can happen from any route in the app. So, this callBackUrl should be dynamic.
Now this is easily achieved with fetching the current route returned by the useRouter hook.
And then comes the problem statement:
A modal needs to be triggered at this dynamically passed callbackUrl to show if the state of the operation in the third party was a success. This has to also be extendable in a way that if I pass an errorUrl in the parameter, it triggers a modal showing the error state, but again on the same dynamically passes route.
What I tried so far -
Created deep linked modals at certain routes where it's triggered from. Eg: /dashboard/success & /dashboard/error and then created a success and error folder inside the app/dashboard directory and rendered the same component as in the /dashboard path, with an additional prop for each of these states and then triggered the modal based on this additional prop. But this is not scalable, since I will need to add such success and error folders under each path where this can be triggered from
Is there a way in Next 14 to be able to trigger a modal which lives in a single place in the codebase to be triggered from any page just based on a param or query param?