How to add routing loader using nprogress in Next.js?

[Music] hello everybody welcome back to another video and in today's video we'll see how you can create a progress bar while navigating to different pages in next chairs so let me show you a demo of how this looks like so first of all we have this main you know the main page right now on this main page i have this link that goes to the second page which i have created so when i was to click this link what will happen is it will navigate to the second page of course next year's routing but just see that okay this progress bar that you see the spinner that you see that is not normally available so we are going to add that functionality today in this video and it is very very easy so trust me it is very very easy and when we uh go back to another page let's say home it still shows up okay if i click on second page again it still shows up and then click on home and it is customizable also so you can customize it to fit your needs so let's get started okay so i have a folder here and i'm going to create an xjs application um so i'm going to call it uh let's just say npx create next app okay that's what the name of the app i mean create next app is used right over here and i will name this app in progress demo okay and i'll just say npm or i mean dash dash use npm now this flag basically means it's going to use npm instead of the default one which is yarn right now okay so i have also yarn installed so it uses yarn but we are going to use npm in this one so just hit enter and it will create a nexus application so once this is installed uh what i'm going to do is i'm going to cd into n progress demo that's the app name and first things first i'm going to open it up in bridges to your code okay of course a code editor we need it so code dot will open it up in visual studio code and now i'm just going to close this terminal and i'll bring visitor to your code in so here is the project right over here um as you can see so let me just zoom in so that it is more clear more visible we are using nextgs version 11 that's the latest version now and it's better also so first of all let's run the development server i'm going to open up a new terminal like this okay by going to terminal new terminal and right over here i'll just say npm run dev okay that's the command to run the development server of course i don't know why is this too slow and it will start the development server so we don't need to check it again and again thing we need to check really is this so um right over here i wanted to say so the first thing we need to do here is to install n progress now in progress is a package and npm package which basically helps uh in doing that in achieving that goal uh that we want to do okay so what we can do is we can just open up the terminal and you can add a new terminal and you can just say npm i and progress that's the command to install in progress now if you are also using typescript uh you will also need the types of in progress so what you can do is you can just run npm i dash uppercase d at types slash and progress if you're using typescript so that's one thing that's one thing you need to know next up what we need is an endprogress.css file so end progress is installed it is successfully installed we don't need to go to the terminal again now there is a css file which is needed in order to make this work so what i have is my blog post open here which you can check out on this link i'll leave this link in the description below so what you can do is you can just go to this cdn this link that i have specified here and you can just copy all of the contents from this cdn so let me just close this now and what you can do is you can just go to styles and then create a new n progress dot css file that's what i want to name it you can name it anything you want and i'll paste every single piece of code right over here now you can also make changes inside of this one like if you want to make if you want to change the color well what you can do is you can just highlight all of the all the colors are same so you can just you know go ahead and press f2 and then change the color that's a vs code feature so yeah it's a very useful one and you can you can do that and you can change the height of course we are going to change something okay so let's keep it default as of now the next thing is to import this endprocess.css file in our main file so if i go to pages underscore app.js this is the main file now only in this file we are able to import the global css files okay so what we can do is we can just say we can just add right over here import and then i can just say dot slash styles slash n progress dot css that's the name of our file that's the path so you can just add this import and it will import the file uh it will simply import the file and let's save this we won't see any changes in our application though the next thing we want to do is we know we want to add a new page of course okay so i'm going to name it second dot js i'm going to create it inside pages folder and it is second.js and simply from my blog post right over here i'm just going to copy all the code that we have for second.js and i'm going to paste it and i'll explain that in a just a bit so as you can see first of all this is the default home code okay the home.js or i mean the index.js code this is simply that code but i have made some changes the first change okay we don't need this next image okay we don't need the image the first change is that we have changed the title okay that does not uh make any difference then i have got this uh as the you know title and description so title right over here and description right over here and this is a nexus link which gets us to the home page slash okay and right over here we get the data we map over the data we get each user and then we output user dot name and then works in the company name okay and if you're wondering where is this data coming from this data is coming from the get server side props right over here so we fetch from this uh api endpoint json placeholder maybe you know it uh we fetch the data we return the json and then we just slice it into four things okay so basically it returns to us 10 users and we make it four users and yeah i am using get server side props here and the reason for that is to make the load a bit delayed so basically when you request the page get servers at props runs on that request time so that's why i want to delay it a bit and that's why i'm using the get server side props example once everything is done we can save this file second.js and let's close this up now we just need to work in this this particular underscore app.js file and it is very simple it's just a few lines of code so we need to import two things right over here first of all import router from next slash router that's the you know nexus default router that's the default export that we are importing right over here and the next thing we need to import is n progress you can name it anything you want okay i'm naming it and progress like this and then we can import it from and progress of course these two imports and after that we can add we can use the router events now this is also very useful so what you can do is you can just say router dot event start on and then okay so the first event we need to see is route change start on this event what you can do is you can just you know pass in the callback function right over here and then you can console log anything you want so let's say console.log route changed um and when basically you change the route so when you click on any link or you get redirected and all that stuff then you console log this so let's just get to our application localhost 3000 that's the application that's where our app is running and as you can see we got welcome to nextgs uh okay i need to change something so in our index.js file if we go index.js we just need to change this link right over here so let me just do that so we can just go ahead and i'm just going to copy and paste it so we have got this uh link and we can just import import link from next slash link okay next slash link okay we've got the uh link set up we just need to focus on this thing so it uh it has an href of slash second and then a tag with the second page text so let's save this and now let's go back to our web browser and what you'll see is uh when it the hot reload when it happens you will see we got go to the second page so now the moment i'm going to click this you are let's just open up the console maybe in this console okay so what i can do is i can just click this link and as you can see we got the console.log route changed we didn't get any you know we didn't get anything like getting the loader or something we just got route change and this is the link if i click this as you can see we got route changed again so that is uh so that is what we are going to see so we got the event route changed and right over here you can put anything you want so what i can do is i'm just going to remove this callback function and i'm going to say n progress dot start now one thing to note here you don't need to invoke these functions you don't need to call it like them like this okay if you do so it is going to call the function immediately and then it's going to you know mess everything up so what you have to do is just pass a reference to the start function so that it can run it so you just pass it as as a callback and we can do the same thing with the two other events that we have i'm just going to copy and paste these two okay this one is route change error so basically when there is an error when you cannot change the route for some reason it completes the progress bar with the done function and when it is complete it completes that's that's it and this is only the line of code you need in order to work with that so first of all let's just check this out okay so when i click on second page you'll see a loader up there as you can see the spinner and loader um maybe you like it was a bit hard to see so if i click on home as you can see it works go to second page and it works the only thing now i want to change is to customize it a bit now how can i customize it well i did some a little customization so if we go to the endprogress.css file i just control clicked it right over here now right over here i changed uh only three things first thing i changed is the color right over here i don't want this color on the white screen so what i do is i just select it and i press um i just copy the other color i want i'm going to select this and press f2 and then paste the other color and hit enter so it changes every reference of this color right here as you can see we've got every reference changed so once the color is changed the next thing i changed is the height so height is going to be three pixels in my case and then um on the basically on the spinner icon what i changed is the width and height which is 25 pixels what i want and the border is going to be 3 pixels and then finally what you can do is you can just check this out so i'll just reset the maximization reset the zoom and then when you click second page you see it's a bit more visible that's what i like so now i have made the throttling tool fast 3g and now when you click on second page you'll see it load a bit more so as you can see it is loading because it is going ahead and fetching the data from the api and that's how everything works i hope this video helped you please leave a like to this video comment down below your questions and your suggestions that you have write in the comments section and let me know if you want more and more next cheers related videos just like this one finally thanks for watching [Music] you

Channel: Max Programming

Views: 399

Keywords:

Id: oD0CIe14M5I

Length: 14min 23sec (863 seconds)

Published: Fri Jul 02 2021