How to use react-bootstrap in Next js 14?

in this quick tutorial I'm going to show you how to install react bootstrap in NEX gs14 so let's begin first of all you need to install nextjs uh if it is not installed already so in order to install open your terminal and go to the folder where you want to create your project and run the command npx create-- app at latest and then uh select the options that that it will ask so once your project is created you have to open that project in your favorite editor we will be using the vs code in this case so once your project is created and opened in the editor you can continue from here I already have generated my nextjs project you can see that this is the basic structure and it is currently opened in my browser okay so after that is done we have to install some dependencies we just need to install two libraries react bootstrap and boot bootstrap so open your terminal in the root directory of your project and uh run this command npm install react D bootstrap space bootstrap so this will install two libraries in one command so let's do that I'm going to open my vs code and this is the root directory of my project so here I will type the command npm install bootstrap space react Dash bootstrap press enter and by the way you can also open their documentation and you can get copy paste the command from there as well so they have multiple options to install so this is the npm way so that we just used another approach is the CDN approach you just have to copy paste these lines of code and paste it in your uh HTML and it will be installed and ready to be used so you can look at this documentation read about it read and understand if you want to use any other method so let's go back to our vs code and we can see that packages have been installed so once it is installed we have to use in the components so you can use it anywhere in your in any of your components or any of your pages of Rea of nextjs so first of all we need to import our favorite component so this is how you will import it uh we will be importing we will be importing from the react Das bootst step / button so let's do that I'm going to use it in the page directory so let me remove all of the generated code that came from the nextjs command line so here instead of that I have a simple H1 tag so after the project is installed we have to include the CSS file as well so let's copy this uh F uh line of code and paste it on the top of your page in this way and once it it is done you can use the Styles but uh if you add it in the page. DSX of nextjs then it would be available only within this page but if you want to make it available throughout your entire application so that you you don't have to import this uh line every time you have to put it in a common place so we will move it from here and let's add it into the root layout because this is the place if you add something here it would be available globally entire your throughout your entire application so now here let's import the button on the top so let's add import button uh from react dashbot strap / button and after that here I will add my button variant primary save it and let's open the browser you can see that button is now working so there are other variants as well is so let's try secondary as well so this is a secondary so you can check all other available variants and other than that let's quickly add few more components and see how they will work so let's say I want to use this accordians for that I will just copy this code or if you don't want to copy the entire code just copy this part and here after the button I will add it and I have to import it so so press command okay I have to import I have to import it for that let's copy paste this line and paste it on the top in this way all of the errors are gone now let's go back to the browser to test it so all right as this accordion is interactive it uh needs some events to be used so for example when you click on that it interacts so that's why uh if it is interactive then it cannot be a server component so by default every component is a server component so either either you have to move this according into a separate component and Mark it as a client component or you can just simply convert this entire page into a client component so let's for now add it add the use client on the top just to see if that work I have saved it now let's go back and now you can see that the accordion is working perfectly fine but if you don't want to convert your page into the client component you want to keep it a server side component for that you have to create a new component for that I would create a a new folder in the app directory components and within that I will add a file maybe uh accordion. TSX and now let's move our accordian cod in it so I will cut this from here and now here I will type ra Ace e press enter it has automatically added the be bones of my component so here I will add the name of the component accordian make sure always make sure that that the name of the component should be in should start with capital letter and here I will export this in this way okay or you can export in the single line as well in this approach so let's remove it and now I will paste my accordian code here and let's import the missing missing things so for that I will go back to the page and I will cut it from there and let's paste it okay uh now we have uh conflict with the name so to fix that you can change the name of your component and now let's go back to the page and here I will add accordian and make sure to import the accordian component from the file that you created and now you can get rid of the use Cent save it so you will again start to see this error because now this according is again a server component so now I will only mark this component as the client component save it okay now you can see it is working now let's quickly add few more components and then we will end this tutorial okay now I'm going to copy paste this one to see how that works so let's go back to the page and here I will add it and I have to import the alert so for that I will copy paste this line on the top save it and now let's see you can see that all of these alerts are visible very nice and now we have button groups let's uh test the Cal okay I'm going to copy the entire code and let's move it into the separate component and name it c. TSX uh let me fix the spellings c a r o u s e l okay all right now uh we don't have the image that they are using so I can just I guess get rid of the images maybe okay and uh now we have to import the Cal component in our page. TSX let's do that here I will add actually I have to export this component as well with the name c a RCL Cal component save it okay now here I will type carousal and it will suggest me that it can be imported so if I click on that the component would be imported immediately and with that let's save it okay save it now uh let's go back to to this and here I'm going to delete this line okay save it now again we have the same kind of error uh this will not work until it is a client component so here I will add use client on the top save it okay the Cal is working but as there are no images that's why it is not visible so for that I will add the image from the nextjs so make sure to import it from there and I will import I will add the path here you can add the path of the remote URL as well so I have added a placeholder so let's add it in every Cal item one by one save it okay now let's see that works okay we got another problem here as I'm using a live URL we have to Whit list this host name so in order to Whit list that copy the base domain name and go to the uh next config and here we have to we have to add a path images and here I can add the domains and with in this array you can add multiple domains but I have only one domain at the moment that I want to vely save it now if you reload it it should fix the problem okay you can see that Pro that problem has been fixed and our Cal is now working okay the problem is that the image is too small and kower is too large so let's go back to the ker and we can adjust its width like here let me wrap it in actually let's go back to the page and here I can add a div as its wrapper and here I will add style width 800 pixels save okay now it is looking perfect okay you can see everything is working as expected so in this way there are many more uh interesting component that you may want to add so you can keep experimenting and try different components and once you are satisfied you can use it in your own project so I think that's all for this video I hope that this video was useful for you so please don't forget to subscribe to my channel and hit that Bell icon to get notified for my upcoming videos and also please like and share this video and if you have any questions or feedback or suggestions then please leave them in the comment section and I will do my best to reply them as soon as possible thanks for watching see you next time and goodbye

Channel: AyyazTech

Views: 1,225

Keywords: CSS Integration, Clientside Components, Component Styling, Dependency Installation, Frontend Development, Image Hosting, Nextjs 14, React Bootstrap, React Component Libraries, Serverside Components, Web Development

Id: swxsnF3PXT4

Length: 10min 20sec (620 seconds)

Published: Wed Feb 28 2024