if you want to animate a modal check this:
https://github.com/vercel/next.js/issues/49279#issuecomment-1667007243

@Zenaida Dove thanks for sharing, the solution you mentioned works kind of for me. The modal is correctly animated when closing through the dismiss click but not on router back. Additionally I want to animate the underlying page content to the side so that the modal coming in pushes the content of the page to the left. I think I will need a provider for sharing the state and will try out the frozen implementation mentioned in the GitHub issue.

Glad it worked for you.
I think the reason that modal doesn't close with animation on router.back() is that the whole route component gets unmounted, so does the <AnimatePresence />.
I'm wondering if moving AnimatePresence to an upper layer (like in a provider or layout.jsx) works 🤔

I have a layout client component to render the children and the modal and also tried to add the AnimatePresence in there. It kinda helped but the content of the modal is still empty on exit animation. It was however the closest I get so far. Everything I tried from there on made it worse.

I finally figured it out. I use a combination of current segment value and the FrozenRouter workaround until that issue might be resolved in the end. Will post an example of the solution in the next days. Hope that will be useful for anyone.

thank you for sharing ✌🏽