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.

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

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

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!!

Short and to the point, thank you.

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

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

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

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

Quick, simple, useful and to the point. 👍

Super awesome as always, please keep this up!

You are a HERO, definitely subbed

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

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

Thank you Hamed, I did not know about templates.

Very nice and easy explanation ! Many thanks to you!

I'm definitely saving this video for later

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

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

Amazing tutorial👌, Well done 👏

I like the way you teach sir.

Short and useful. You got my subs 👍

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

Thanks for the tip! I was using a convoluted solution for my entering page transition. Did you find any way to make exit page transition in the app router? My hacky solution is that I am using router.replace to add a searchparam to the route which triggers the start of the exit animation, then I router.push to the actual new page on animation end. I couldn't find any other way to do exit page transitions...

Amazing content! However my issue is, if I have a global loading.ts component and when I navigate from one route to another, the transition is applied to the loading UI, but once the loading is done, the loaded page content shows immediately without any transition on it. Any workarounds?

Bahram sir your teachings are always helpful thank you

Thanks for the tutorial. Is there any way to prevent the animations from running on page reload and only run when changing routes?

Nice trick! One question. Does template.tsx force relaoding the transition component AND its children, or only the transition component while keeping children cached?

Ok. But what about exit transitions?

Eyval Hamed 👌 Was thinking how to use it on older version without template!? Seems we can generate an random key on every render to force layout to be rerendered, guess that would work

Great video, thanks !

Excellent guide

this is very useful but i have one doubt if i use this is it clear the cache on every page on server compoent?

Great tutorial. 🔥🔥

Is it possible to add a loading indicator in templates? Often I find when clicking on a link, it takes a bit before I see the page.

You're the best bro..🔥

Great video!

Hey Hamed, nice video! Just wanted to ask if is there any way to accomplish this same result without using framer motion or any library at all :)

Can we use AnimatePresence and exit animation? Thanks for the video

Shukran, habibi) from Russia!

Thanks for sharing this tutorial, it was very helpfull achieve this behavior and understanding the template file. One thing that I noticed is that the transition doesnt work for grouped layouts. I mean if you land first in a grouped layout it triggers but if you navigate between routes of the same group it doesnt trigger the transition. you can create another template file inside the group but I think its not the best solution. Any advice how to fix this?

Thanks, nice tutorial, would love to see if you can handle exit animations as that would be a 100% page transition.

Hi, thanks! How to cancel a template rerender on a specific nested route inside, where i have some a lot of logic component?

thank you mr bahram

I have yet to find a way to transition a route out. This is changing route and animating in the content on load. But how to animated the initial route out?

My Question What If I add animation to header component so you have shown about, home and contact in header it is using Nextjs Link Tag to navigate pages, but header component you are calling above the children so If Add motion.div in header component The animation will work or not?

Is there is a way to use the view transitions new api?

So this basically works like Animated in React Native. Since the Template component re-renders, would that not mean there'd be a lot of unnecessary work for the client?

Wouldnt adding the AnimatePresence wrapper be an easier solution than using a Template?

Does exit animations work with this setup?

always the best

Very nice 🙏🙏

Many thanks to you! How do i make exit transition on page?

In pure HTML, we can implement page transitions using the following tag in the head: . Are you aware of whether it's possible to include this meta tag in Next 14?

Hello Hamed What's your mic name?

How to create page loading on route change? Sometimes the new page takes a while to load but I have clicked the link already. Having no UI to show user that they have clicked a link and the page is still loading makes it a bad UI.

Thank you

Thanks!

u are insane, thanks.

Thanks

Awesome

good day sir hamed, can you make a tutorial how to add cookie banner on next.js 14, for having a permission to accept the cookie

I wasn't able to get it to refresh on link change. The desired effect only worked using an "" link. and not a "" component. I found the Fix!! ... I put pages into folders [App]>(layout.tsx ...[(pages)]>([(home)], [about], [contact]).. Initially I had the template in the app folder, where it wasn't working, but moving it inside of the (pages) folder fixed the issue. Seems like the template.tsx must be a direct sibling of the page folders needed for the effect.

How to add exit animations to this, AnimatePresence is not working for me

i jsut tried it now but i didnt even have to wrap the layout. It was enough just to put the template.jsx in the app folder and it applied to the whole app

Good day Hamed, I wanted to ask regarding your ultimate next js course. I apologize for the unrelated comment, but I wanted to get a hold of you. I purchased the course, but there was a misspelling in my email address. I sent a message in the site's contact us section, where I have rovided the correct email address as well as the order ID. I was hoping for your assistance in the matter. Thanks!

But can you trigger exit animations?

how do you do the exit transition then?

Should explain router events

Exit animations still dont work right?

How am I not subcribed to your channel??!

new version breaks exit animations without a workaround. also, i haven't been able to add loading animations for when a user navigates.

not working on exit transition

make each letter a transition xD The way of patience :P

But the exit animation won't work.

until nextjs support exit animations for app router its virtually jarring to look at.

you can't yet in app router

Where is the exit animation? I dislike it.

This doesnt show how to use exit transitions. This useless

Very good insights throughout, subbed. I'm a bit let down that this is using framer motion tho, I want View Transitions API on next 🥲 (not complaining about the video)