How to Add Page Transitions in NextJs 14

in this video I'm going to show you how to add page Transitions and animations in nextjs 14 and specifically in the app router we're going to build the simple little app with three pages and as you can see our Pages animate in or TR have a transition when they're coming in the viewport or when we changing the routes so let's jump into the code where I can show you how to implement this I've created a brand new nextjs application that's set up to work with typescript and tailing CSS I do have a video on the channel where I walk through my nextjs setup and I've also created a nextjs starter template on GitHub that you can use to clone and start your projects now all I had done so far is to add this homepage which you can see here and then an about page and a contact page which just contains simple components that have this title and text inside of them now inside of our root layout this is but I'm also rendering a header component inside of this header component I'm just rendering some simple links that allows me to just navigate between different pages and I also have a an empty footer component just to show you how I would go about uh creating a layout around my pages now prior to the app router and nextjs 13 and now next J is 14 if you wanted to add page transitions to your nextjs app you would go inside your pages router and specifically to your underscore app that's where you would Define your custom app component which was basically a wrapper around your pages and you would just wrap that with any motion tag that you wanted to perform any type of page transition upon user navigation now we don't have the underscore app inside the app router or NEX js14 but we do have this layout where it's kind of of the combination of our underscore app and underscore document. JS if you're coming from that world and you might think well I can just go ahead and create a transition component and wrap this children which is going to be my nested layout and Pages inside of this root layout to then apply that page transition or animation that I want so let's actually go ahead and do that inside of this app I'm going to create a new component called trans i. TSX and inside of it I'm going to copy some code so let's see what I'm doing here inside of this transition component I'm receiving a children and I'm just wrapping this children with a motion. div this is a specific syntax from framer motion which enhances your regular elements like this div here to now accept or understand this props that I'm passing in so I'm passing in an initial prop specifying some y property that's your Translate Y and opacity and then an animation or animating from that initial to an end position which is a y of zero translating back to where it belongs and then opacity of one and I can set some transition properties such as duration and an easing function now if I go back to the layout and wrap this with this transition component that I just created now a little side note about this transition component because we needed to use frame motion I had to use a client component that's why I added this use client directive up top now you might think is this okay that we are passing in server components to this client component or does this mean our entire app is going to now be turned into client components because we are passing in every child and nested layouts now inside of this children to this transition component well the answer is that yes you can pass in server components as children or Pro props two client components without turning them into client components and this pattern is not going to turn your entire app into a client component you can inter leave and interv client and server components I do have a video on the channel where I talk by client versus server components and then to use which on the channel I'm going to link it in the description so you can understand this new architecture a bit better but that's just a common question that I often get I thought I'll address it here now when I initially saved this I don't know if you noticed or not but the animation actually happened on the homepage Let me refresh this app and see this one more time so the animation happens on the homepage but when I try to go to the about page and the contact page or go back to the homepage the animation doesn't happen this is because nextjs is using the cached version of this server component and does not render these components or our layout to then rerun this animation now how will we go about then actually applying this animation that we have here every time that we are transitioning or navigating between different pages now what you can use here is another file inside of your nextjs or inside the app router which is called template. JS now a template is similar to a layout in that it wraps the children pages and layouts but unlike layouts that persist across routes and maintain state templates create a new instance for each of their children on navigation now if you're not familiar with what templates are or when and how you could use them I do have a video on the channel where I dive deeper into templates and actually compare them with layouts uh through examples specifically through uh using State and use effect and animation I'm going to link that also in the cart so you can watch that video to be comfortable with what templates are but that's the perect perfect place for us to actually use a template for this use case in our application because it's going to reender our components every time instead of using the cached version of that specific page or server component it's going to reender the children every time so therefore we can run uh the page transition and animation every time that the user actually clicks a different link now before we jump back to the code and actually create this template I want to show you you how uh the hierarchy of this different file conventions inside the app router works now the temp the template uh and everything that you put inside of it uh will wrap your page component and then uh the template itself will be wrapped with the layout now as I mentioned a template is very similar to a layout in that it wraps the children and the only difference is that it has a key prop that causes react to reender this component every time on navigation ation now this is not next jss specific this is a react feature you can add a key prop to any component that you want to react to render so let's go back to our uh app directory here all I need to do really is to create a template. TSX file and copy the same code that we had inside of this transition into this template so I'm going to save this and now I'm going to go to the main layout I no longer need this transition comp component so I can turn them back into the main tag I'm going to come here and actually X this out so let me close this off so inside of our main or root layout I've turned this back into a regular main tag I'm going to save this and this transition component is useless now so we can go ahead and actually delete this and now I have added this template do. TSX file it can coexist with your layout so let's just also call this template it'sing leaving this children this is going to be your pages and nested layouts and then it's going to wrap them with this motion. div exactly what we were doing in that transition component now with this if I go back to my page and refresh to get rid of the cache if I go to the about page I can now see the transition happening on every navigation because nextjs is now rendering this component every time because that's what templates are made for now that's a wrap for this video folks we added page transitions to our xjs 14 specifically in the app router using frame and motion and template. JS or TS file which is a file you can use inside of your folders or routes anywhere in the app router which acts like a layout in that it wraps the children and nested layouts but the difference is that it does not persist across navigation it does not persist States it does not maintain States it just renders every time again there is a video on the channel where I dive deeper into templates very layout so uh do check that video if you want to understand it a bit more or actually also see other use cases if you have any questions like always hit me up in the comments and I will see you in the next one bye-bye

Channel: Hamed Bahram

Views: 24,199

Keywords:

Id: jVU3JD6qOBo

Length: 9min 12sec (552 seconds)

Published: Sat Jan 13 2024