Next.js 13 - Installing Bootstrap With The App Router

in this video I'm going to show you how to add bootstrap to a nextjs project that uses nextjs 13 and the app router in a past video I showed how to install bootstrap with the nextjs pages router so if you are using the pages router I'll link that video down below but most people who saw that video actually wanted to know how to install it with the newer app router let's get right into it so the first thing that we are going to do is actually create a new project so the project name here is going to be next just boot strap example and I will be using npm and now you're going to be prompted with a few questions first one is if you want to use typescript I am not going to use typescript I will use eslint I'm not going to use Tailwind because we're going to be using bootstrap next we will use an SRC directory and then this is the important one here is do you want to use the app router and you're going to want to answer yes to that and I'm not going to customize the default Alias and now we're going to let this get installed for us great once once that's installed we're going to change the directory into that new project and then we're going to open this in vs code all right once we're in vs code here you can see we have this SRC app directory and that is kind of the newer way of this nextjs 13 setup so we're going to have a Pages folder and a layout folder and that's kind of it and then a bit of CSS so let's go ahead and run the app now which if you go back to the terminal here you can do this with npm runev and that's going to give you the link right here which is Local Host 3000 so go ahead and open that in the browser and you'll see we just have the basic nextjs template here back in the code we're going to do a bit of cleanup so we can open up the pages. JS and actually just delete everything and we're going to replace it with a very very simple home screen here which is just going to have an H1 that says hello bootstrap one thing to notice here is this class which is text changer and this is a bootstrap class which will actually make the text Red by default so once bootstrap is installed correctly the text here should be red but at this point we haven't installed bootstrap so we just expect this text to be black uh another thing we're going to do quickly is just delete all the CSS in our Global CSS as well as the page module and now we can go ahead and look at the browser again and you'll see we just have hello bootstrap since it is not red that means bootstrap is not actually installed now we just need to get bootstrap installed and we'll know it's installed by this text turning red so back in the terminal we're going to just create a tab here we're going to install bootstrap with npm install bootstrap and once that's complete you'll actually see in our package.json that it is updated with that bootstrap package so that is good now we're going to want to go to the layout. JS file here and we're going to Above This Global CSS which currently is empty but you'll most likely have some Global CSS in your project you're going to want to import bootstrap above that and go ahead and save this and and that is actually it for the CSS so if you go back into the browser you'll see bootstrap is now installed and we know it's installed because the bootstrap class of text danger is being applied to this H1 tag so this is good for the bootstrap CSS however bootstrap also has some JavaScript features such as the accordion so this is the accordion here this example and if you want this to work where you actually click these there's a little bit more of a setup you need to add additionally so let me go ahead and add this according to my page by copying this and adding here into my homepage so I did make a couple modifications by centering the text as well and making the column A called medium 6 and then centering it so now if you go back you'll see kind of this is what it looks like and if you try to do the accordion it actually doesn't work and that's because the Java Script is not currently set up to work but it's a pretty quick fix and we can install that right now so back in the code we will be using the layout here similar to how we import the CSS we want to import the JavaScript and if you're familiar with how this works in the pages router you use a use effect from react and then import the bootstrap JavaScript but with the new nextjs 13 setup we want to create a new component that is a client side only component to load this bootstrap JavaScript only on the client side and that's because these interactions such as this accordion don't really have anything to do with our server side rendering so we only need this to happen on the client side so what we're going to do is create a new component and we can do this in the folder components which I actually have to create and then we're going to call this the bootstrap client.js so the first thing we're going to do in this component is actually declare that we're using this on the client so this is only going to be a client side component and then we're going to create a very simple function which is going to make use of the use effect and then simply require that bootstrap JavaScript so now that we have this created we can go back into our layout. JS and we're going to import this new component that we just created and lastly in our root layout here where we have the children right below that but still inside the body we're going to add that new component so it's essentially like putting all of this code right within our layout but if you try to put that code directly in here outside of the component and you might think you can just call use client on the layout itself you're going to run into some issues because this is actually exporting some other stuff such as this metadata and you might have other things that you're exporting as well for from the server side functions this is really all you need to do if you go into your browser right now and actually looks like I have an error the source is actually not going to be inside the app directory but I believe we can also just use this shortcut here and that should work so now if you try and click through these accordion the JavaScript is working and bootstrap is fully installed hopefully you found this video useful if you have go ahead and like And subscribe I also have this as a Blog version so if you want to copy and paste the code you can go check that out in the link [Music] below

Channel: 1ManStartup

Views: 7,119

Keywords:

Id: yj1W5b9ARDY

Length: 6min 18sec (378 seconds)

Published: Tue Oct 10 2023