DEV Community

Discussion on: How to add page transitions to a nextjs app

Collapse
larsejaas profile image
Lars Ejaas

This is really cool. I need to dig a bit into this, as I do not get any page-transitions between pages when transitioning between pages build on the same page-file but on different routes. But this is a really solid starting point and a lot lighter on bundle size compared to something like Framer. Thanks for the article - it really helped a lot!

Collapse
larsejaas profile image
Lars Ejaas

Small follow up if anyone is facing a similar issue:

router.pathname is the path to the page-file. So when you pass routher.pathname as a prop to the Transition component you will only get a transition when you navigate to a page that is based on another page-file. This will probably work fine in most instances, but if you use a CMS for content (my current project uses headless WordPress) you could be using the same file ( e.g. page/[...page].tsx ) to generate a lot of different pages.
The workaround is to pass router.asPath instead. This way you will get a transition every time the page is navigated to a different url.