One Simple Step to Add Page Transitions in NextJS 14.2

all you need is this one simple step to add transitions inside of nextjs in order for transitions to work effectively you just need to know where you should add transition typically in an xjs app whenever you go to any page then it just shows the page right away without any really cool transitions which may not be a really good experience and if you add transitions in the wrong spot then your app will renter a lot and that's not exactly what you want now not to mention the additional caching capabilities inside of shes really limit us where we can really add transitions as well what we really need is as the user refreshes the page and goes to your app you want this really cool transition when you go to another page then you also need a transition so it's a more seamless experience compared to just a abrupt experience that we saw earlier so that's exactly what we are going to build in this specific video so without further Ado let's get started so how exactly will you add transitions inside your app well if you want to add transitions we will be using a library called as framer motion it is a very popular react library that allows you to add transitions different kinds of animations in the most performant way possible using the specific library now what this app does is that it converts any div into a motion. div which allows us to add properties such as anime transition opt into different Transitions and so on now the app that we are trying to build is called Co corner now this app is already pre-built it is built with GS and also uses tailan CSS for styling now in this specific app whenever you go from one page to the other we pull in more information about that specific page it is currently divided into two parts one is the best sellers and all products now let's take a look at the code really quickly so that we can learn how to addend transitions later this specific project uses the app router from nextjs and in the app router in the page. DSX it simply displays our best sellers and all products now we we are basically iterating through a list of products which is stored inside our our Json file if you see a property called as boosted equals true that means it's going to be shown in our best sellers but it also has other properties such as name description price image URL and so on now our entire application also has a header component as well which is currently stored in layout and this header component again is overed it routes to the main page similarly if we go to individual pages when we route from one page to the other then again all we are doing is fetching the specific product ID based on the ID from the specific URL and then showing it onto the peach well you might be wondering where would you add transitions instead of next CHS well there are a few places where we can add transitions now one spot is the layouts why layout well because layout is a shared UI between multiple routes it is basically the topmost component for example this is the layout file so so let's say we were to add a motion. div here itself what would happen is that our entire application would get the transition animation all we need to do is inject this somewhere but there's one more spot where we can add transition and that is the template. JS file again this is very similar to layout because it wraps each child layout or page but the problem with this is caching now unlike layouts that purist across routes and maintain State templates will create a new instance for each of the children on navigation layout is going to try to cach as much as possible between pages but template is going to reender each and every time as you navigate from one page to the other and if we were to decide where exactly we want to add transition it is when we click on a specific page that is we are navigating to different pages so in that case a template file is a better spot to add layout because we don't want any caching capabilities so let's go ahead and add frame or motion inside our codebase so what we would do is create a new file called as template. TSX here let's go ahead and copy the code from the page and paste it here and it takes children and then all our routes are going to be wrapped by this specific template it's going to runder every single time now what we could do is add frame or motion here so if you head over to the docs and then here we look for spring then what we could do is just literally copy this specific function and then modify it so now let's convert this from motion from div to motion. div which make this function a from framer motion div and it has additional capabilities to animate to transition and here let's just import motion from frame or motion all right so now this Dev is powerful now what we could do is just paste it and let's just see what happens now as we do that and go to the page now you can see over here that it's giving us an error that we do need to make it a client component you may then Wonder well if we make template a client component for example by adding a Ed client directive here then wouldn't this mean that our entire tree is now going to be a client component because of the limitations of server and client component where anytime the root component is a client component all his children are also going to be client components if you visualize this then if template is a server component then this is fine because these are all components but let's say for example if template is a client component and all these children are also going to be client components well not necessarily because if we go to the documentation then we can use a children pattern to basically say that hey it's totally okay and not all the children are going going to be client components even though template is in fact a client component thanks to the children pattern for that reason we can safely make this a client component and now we can go ahead and try out if transitions work so for example if we head over to Local Host 3000 we can already see the transition that is already working but since we just copy pasted what we got from frame of motion it's not exactly what we want if you want to take your nextjs skills a bit further I'm also running a workshop on nextjs which is a Hands-On Workshop which will cover everything that you need to know to take your next year skills to the next level just like we covered in this specific video please check out the link in the description below and sign up to that so to make what we want what we could do is we could add the initial property where we can say the y- axis and the opacity initially is going to be zero as well but then when you want to animate then the y- AIS is going to be zero and then the opacity is going to be 100 so we saying that start from Y2 to 0 and then increase the opacity and lastly we also need a transition we want to tell frame or motion that hey this is the transition we want to use so we can say type is going to be spring and then duration can be whatever that means how fast or slow you want the transition to be so now if you do the same thing you can refresh the page and now there you go see how the page goes from the bottom to the top and slowly transition and then you can play around with the properties with frer motion to see what kind of transition that you are looking for if you don't want spring but let's say you want e in then that is another one that you can use as well you can see how beautiful e in looks like as well and it slowly transitions from one spot to the other well this is exactly how you would add transitions inside of nextjs so that's it that's one simple thing you need to do to add transition inside of nextjs all you need to do is add frame or motion motion motion. div inside of template file to add transitions in all your pages which is pretty awesome if you want to learn more topics in front-end development or specifically nextjs then comment below and let me know what else puzzles you inside of nextjs and you haven't figured out yet or something need more guidance on comment below and let me know to further learn about server and client components then you can check out this specific video on use cases when you should use server client components inside of nextjs or you should also check out and subscribe to my channel as I'm planning to release a crash course on nextjs very soon so I'll see you in the next one bye for now

Channel: Ankita Kulkarni

Views: 4,294

Keywords:

Id: eUvzrCDc9FE

Length: 8min 39sec (519 seconds)

Published: Fri Feb 23 2024