How to Add Page Transitions in NextJs 14

In this video, we'll add page transitions in NextJs 14 using the App router and framer motion.

👉🏼 The Ultimate NextJs 14 Course

👉🏼 Project source code (Github)

👉🏼 NextJs starter kit (Github)

👉🏼 Work with me

Chapters
0:00 Intro
0:25 Project setup
2:25 Add transition component
5:00 Add template file
8:24 Recap

[hamedbahram]

Clarification: Using a template doesn't cause your entire app to re-render on navigation. Your page server components will still use the cache. The only thing re-rendering is the template file itself. You can test this by adding a `new Date()` in one of the page components, then build your project, and start the production server by running `npm run start` and you'll see the date remains unchanged on the page which means we're are using cache and not re-rendering the page components.

[alishayegh]

so many times looking for page transitions in the app router, again, you helped me to handle it like support i18n that I've learned from you, keep up bro💪MOKHLESIM

[A]

Your videos always teach me something new! In support of your course, I just brought it🤝

[garytraffanstedt]

Thank you for this!! You lay it out in a very clear and concise manner. I just implemented it in my current project and it works great. Cheers!!

[saeedakhshijan]

I always wanted to know how i can apply transition between pages in nextjs, finally here it is, thank you 👍

[Sorkstryparen]

Super awesome as always, please keep this up!

[michaelibinola]

Thank you for this short and easy straight to the point tutorial

[stonedizzleful]

Great video. Well explained. No more flashing on re-render of my next js app!

[codefinity]

Quick, simple, useful and to the point. 👍

[adedimolao]

Thank you! Just what I needed. Didn't know about template.tsx

[mhqungle]

excellent and straight to the point video, keep up the good work bro!

[baljka]

Exactly what I was looking for. Keep up your good work 👍

[ThugLifeModafocah]

freaking awesome and to the point video. Thank you man.

[kristiankristian]

Very nice and easy explanation ! Many thanks to you!

[Pierrot]

Thank you Hamed, I did not know about templates.

[LePhenixGD]

I'm definitely saving this video for later

[ivandamyanov]

Thanks a lot, put that immediately in my app :D

[saefulanwar]

bro, thank you very much! this video really helped me

[pouyaproducts]

amuzeshat harf nadare dash hamede aziz <3

[fazelpejmanfar]

Your videos are way more helpful than nextjs docs😅, thanks hamed jan karet doroste❤