One of the things that makes Next.js so great is that you can create a modern, slick single page app experience while keeping the performance and other benefits of classic server-side rendering and routing.

There is an official next-page-transitions example that demonstrates how to add a loading state when navigating to a page, wait for the page to load its content and animate in when it's ready.

What about something more ambitious and complex? We could offer something more ambitious:

• Intro and outro animations defined at the component level
• A higher order component that manages page transitions and the animations of nested child components
• Re-usable, declarative animation componenents
• No flash of unstyled content on initial page load

That’s what I’ve built with TweenPages which brings the power of the Greensock Animation Platform (GSAP) into Next.js. Check it out:

• TweenPages Demo
• TweenPages Docs
• TweenPages Code

If you’re new to GSAP, a great place to get started with GSAP and React is to read GSAP + React, First Steps & Handy Techniques and GSAP + React, Advanced Animation Techniques.