Adding page transitions in NextJs 14 is like adding a sprinkle of magic to your app. It’s like giving your users a front-row seat to a fireworks show every time they navigate between pages. With the right setup, you can make your app come alive with animations that pop and sizzle, leaving your users in awe. It’s like shaking up the old and bringing in the new, turning your app into a real showstopper! 🎆🚀🌟

How to Add Page Transitions in NextJs 14

Overview

In this video, we will learn how to add page transitions and animations in NextJs 14, specifically using the app router to build a simple app with three pages. The goal is to have the pages animate in and have a transition when they enter the viewport or when we change the routes.

Setting Up the NextJs Application

I have set up a new NextJs application that works with TypeScript and tailwind CSS. I also created a starter template on GitHub for easy project setup. So far, I have added a homepage, an about page, and a contact page with simple components containing titles and text.

Implementing the Page Transitions

Previously, in NextJs 13, you would add page transitions by defining a custom app component inside the pages router. However, in NextJs 14, you can use a layout that combines the functionality of the custom app and the document. JS. This allows you to create a transition component to apply the desired animations to your pages.

Creating a Transition Component

To add page transitions, we create a new component called trans i. TSX and use the framer motion to enhance regular elements to accept animation properties. By using this component, we can wrap the layout and apply the desired animations.

Using Templates for Page Rendering

To ensure that the animation occurs every time a user navigates between pages, we can use a template. Unlike layouts, templates create a new instance for each of their children on navigation, rendering the components every time. This allows us to run the page transition and animation each time the user clicks a different link.

Adding the Template File

We create a template. TSX file within the app directory and copy the transition component code into it. This allows us to render the components every time, regardless of whether they are cached, ensuring that the transition happens on every navigation.

Conclusion

By using frame motion and template. TS file, we successfully added page transitions to NextJs 14 in the app router. The template is a useful tool for ensuring that components are rendered every time a user navigates between pages, allowing for seamless transitions.

Key Takeaways:

• Page transitions can be added using the app router in NextJs 14
• Utilizing the template. TS file allows for rendering components every time a user navigates
• Framer motion enhances regular elements to accept animation properties

FAQ

• Can I use server components with the client component?
  • Yes, you can pass in server components as children to the client component without turning them into client components. This pattern does not turn the entire app into a client component.

For further information on templates and layouts, check out our video on the channel!

I hope this article enables you to add seamless page transitions to your NextJs 14 applications. If you have any questions, feel free to ask in the comments. See you in the next one! 👋