Build A Responsive Next JS Website Using Tailwind CSS - Beginner Guide

what's going on guys clint here and in this video we're going to be building a next.js application styled with tailwind css so this is going to be a very beginner friendly project if you're just learning nexus it's going to be perfect for you so a couple of the benefits nexus offers is uh lazy loading images it offers a built-in image component that we're going to take advantage of also it has a built-in routing system so we're not going to have to deal with react router dom or any of that so let me just give you a quick example basically it's a it's a photography portfolio website here and notice we have a nice parallax scrolling effect here on our home screen then this image slider here something that we're going to be building from scratch using the image component so all of these images are lazy loaded which lazy loading just means the images will not be loaded until they're inside of the viewport of the screen for what you can see in the in the browser here a nice little uh instagram component down here with a nice hover effect we are going to be using a smooth scrolling fix you can notice we scroll down here and also notice our nav bar is going to change colors whenever we scroll so we're also going to be using um like i said with our route system here we're going to be passing through props for our hero component here so you notice we now change to the the work route here and also the contact route as well with a nice contact form down here so like i said we're gonna be building all of this from scratch styled with tailwind css so if you're ready to get started let's jump in so what i'm gonna do first here is just shrink that down and let's go ahead and create our next.js application so i'm going to say yarn create next dash app and i want to install it in this current directory so i'm just going to place a period right there now what i want to use i'm actually going to be using a font called railway and there's special way we have to import fonts into next gs to avoid any errors so let's go ahead and go over to fonts.google.com i'm just going to grab over my font and this is actually the one i want to use right here so i'm going to go ahead and just copy that link that we're going to import here and let's go ahead and just start our server or start our development server over here and that's going to start for localhost 3001 for me so notice we have this is just our boilerplate application the create next app here and inside of our pages folder here notice these are the pages we use on the left here and all we have to do to create a new route is just create a new page in our pages folder and then we're also going to create components folder and we'll use this public folder as well so inside here um notice this index.js they have a head component and you may think that you can just go ahead and paste over this information in here inside of the inside of the header component which i'll go ahead and do but i'm going to show you that what we're going to run into over here first zoom out just a bit here and i'm going to change this up so we can have a better view there we go so inside here let's go ahead and looks like we're getting some errors just wants us to close off these tags here we go so this should be all we need to do let's go into our styles here and i'm going to change the styles from this system to railway and this is going to work as you notice it changes our font now to the railway font however if we inspect this you're going to get an error here in the console it'll likely be an error when you go to build your project and deploy it to the web as well so what it's saying is do not use uh do not add style sheets using the next head instead view this documentation here so let's cruise over and see what it means basically it wants us to create this file right here underscore document.js we can add in all of our all of our code that will be used throughout the whole site in this area right here and what we can use in the head of our individual pages we can basically reserve this for like titles uh and some other metadata like so but any type of linking style sheets we're going to want to place those in this document right here that we're about to create so let's go ahead and do that right now and basically just wants us to to to use that i'm going to leave that there for now let's create our page here and basically just wants us to use this code right here so i'm just going to go ahead and copy that and what it's saying over here is to create the page just says underscore document dot js and we can just go ahead and paste that in there just like so now what i'm going to do is come back over here and just cut that out and then i'm going to paste it right in here let's go ahead and give it a quick save i want this road wrap there we go one of the my viewers told me about that the other day and it has been a lifesaver there so now let's go ahead and check our application here you can notice we still have the font and now we have gotten rid of any of the errors you might see so now that we have that that out of the way what i want to do next is go ahead and just close my application there what i want to do next is go ahead and install tailwind css so let's go over to tailwindcss.com we're going to click on the get started link here we're going to click on the frameworks guide and we're using next.js so first it wants us to create the app we've already done that next we have to install tailwind so what i'm going to do here i'm using yarn if you're using npm just copy that entire line there and we're going to go ahead and close that so what we need to do next here i'm going to go ahead and close my server and i'm going to go ahead and say yarn add and then just paste that in there then the next step is to add in this mpx tailwind init dash p and that's very important it's going to give us this tailwind.config file over here on the left and we're going to use that right now because the next step is to copy this information right here this pages and components and put that inside of our content array like so so go ahead and save that and then the final step is just to add this to our global styles so i'm going to copy that we're done with the tailwind config now in here in our global styles we're going to delete all of this we'll come back and add some fonts here and or a few things here in a minute and what i want to add here let's go and do it right now just say html and what i want to say is scroll behavior i'm going to set that smooth then also i'm going to go ahead and set my font with font family here and like i said we're going to be using a railway just like so and it's always a good idea just go ahead and give a secondary font just in case the browser does not support that so we can delete this home.modules we're going to go ahead and just clean up a few of the files that we're not going to be using so let's delete that now inside of our pages folder what i want you to do is delete this api folder we're not going to be using any of anything in there for this project here and that's going to be all we need to do for now so next let's go ahead and start our server and just make sure that our tailwind css is up and running properly here so let's go ahead and delete a few things it's going to give us some errors and that's because it's looking for some things in here that we just deleted so i'm going to grab this main right here and basically everything down here including the footer i'm just going to go ahead and delete because we want to start from scratch in a completely blank application here and notice this head you guys this is imported from next js here so um we can actually just change our title here we're going to say uh photography next app just like that and now you can notice let's see here we're getting an error here which we're not using that we're importing this here we're not using it so let's go ahead and delete that so um oh and we left one thing there now that should take care of any errors we're having and if you notice our photography next app is now in the title here so next what i want to do is let's go ahead and build out this hero component right there so let's come back over here and we're going to create a components folder here i'm going to create a new component a folder called components now inside of this components folder we're going to create a that's where all our components are going to live and let's go ahead and create our main component i'm going to call it hero.jsx so i'm going to say rafce that's going to generate our functional component here for us and i'm going to go ahead and add this to our to our index.js file that's going to go ahead and auto import for us here so inside of our our hero component it's going to be a very simple component and what we're going to be using we're going to use this on multiple pages so we're using on our home page we're also going to use it on our like demonstrated work page as well as a contact page and what we're going to do is just pass in properties so we don't have so everything's going to be dynamic so one of the great things that we can do in in react js and next so what i want you to do we're going to start off with the div here and then we're also going to have what's here an overlay and this div right here is going to be an overlay and this can actually just be um a self-closing div here and we're going to come back and style everything we're going to put up we're going to fill in all the html then come back and add our tailwind in here so after that we're gonna have another div in here and we're gonna have an h2 and right now i'm gonna say um i'm just gonna say something like this heading and then we'll come back and pass through our properties there then after that h2 we're going to have a p tag and this is just going to say message and again we're going to come back in and fix all of that here later and a button that says book so that's all we have right there and notice you guys if you're new to tailwind css um notice even though that we have an h2 it still looks like a normal p tag and that's what uh tailwind does it basically applies all these baseline styles and what it does is just add a lot of room for customization on our end so one one little thing i want to show you guys real quick it's a plug-in that i'm using um so if you go down to your plug-ins it's called tailwind intellisense and basically um i'll show you what it does but whenever we hover over our tailwind styles it gives us recommendations and lets us know what it is so very very powerful and helpful if you're just starting to learn tailwind css you guys i use it all the time and this is what it is right there so i'd recommend go ahead and going ahead and installing that so let's go ahead and add some styles to this here we're going to turn just with our tail when we're going to turn this into this right here this background so and just also you guys we're going to be pulling in some images from unsplash so we'll get to that here in just a moment that's where we're going to grab our background so right here for this top class name we're going to say is flex here and then we're going to say items center and then justify center and this is the same as saying display flex item center is going to be a line and that's the intellisense right there it's the same as saying align items to the center and all we have to do is just hover and it tells us what it is exactly and so we're also going to say h screen and this is going to say this is the same as saying height of 100 viewport heights there and then we'll say margin bottom 12 and then cpg fixed and then bg center and bg just like so and then also we would have a custom image and this is the only uh custom csr custom css that we're going to be adding in here so um what i want to do is just go ahead and go over to unsplash and i'm gonna find this image that i was just using and see here might not be able to find the exact one that i'm using here i think this is it right here yep that's going to be the one so what i'm going to do is just go ahead and right click and click this copy image copy image address just like so and so this notice we added this this custom image here is the only class name that's not affiliated with tailwind css and so how we're going to do that is just go into our global styles here and i'm just going to add it right here it's going to be fine this custom image just like that and all we're going to say is this is going to be our background image that and then we'll just say url and this is the only image that we're going to post in that we're not going to be using the lazy loading that next.js offers so that's all we need to do we'll leave the unsplash open right there so that's all we need to do perfect and it has our notice has our text here in the middle so let's go ahead and close this global styles and let's finish styling this thing out here word wrap to stay going on there so let's go ahead and add our overlays we have a nice dark overlay on it so we're going to give this a class name and for overlay like i said it's going to be a self-closing div here and let's just say absolute we're gonna say top zero left go right zero bottom zero oops then i'm gonna say bg black and then all we have to do is um put a slash there and it lets us add an opacity to it so i'm just going to say a 70 and i think that's going to be good and i'm just going to say z so this is adding a z index here and what we can do these are this is the intellisense working again here and if i don't want to go up this high what i can do is actually just use some brackets here and add in a custom index or a custom value there so i'm going to say 2 in there and that's that's going to be all i would need to do like right there and then next here what i want to do is add in our we're going to style our div that surrounds our text right here so this right here what we're going to say give this class name say p 5 and that's just giving a little bit of padding around it here and we're going to say text text white i'm going to say z and then that 2 again so it just sticks out on top i'm going to say margin left so i want to pull it off the screen a little bit margin left i'm going to say negative 10 rim then also on the margin top i'm going to say you have 10 ram as well and that's going to kind of place it right there where i want it now for this heading let's go ahead and install there add some styles to our heading tag there and for this i'm going to say text 5 xl and what that's going to do if you hover over it's going to make it really big 3 rim is what that is going to be so then let's also say font bold just like so hey there perfect and then for our message here let me give this a class name e y five just to give a little bit of padding in there and i'll say text xl and that's gonna just bump it up just a tad there now for our button i'm gonna say px8 to give it some padding and then p a y we'll say two border and then uh border and that's all we need to do there perfect that is looking good right there so that is it you guys we're now done with our hero so we're gonna come back and actually pass through some properties here so let's go ahead and go and give that a quick save and let's go ahead and take care of that right now so inside of our index right here this is our home page image here and what i want to pass through here from our homepage we can say whatever we like but what i want to say here for heading right because i'm going to call this heading and then i'm just going to say capture photography just like that just the name of our brand there and then what i'm going to say here next i'm just going to copy that right there for our message and this is how we pass down properties and react to the next js so for message reason put that in a string i capture moments in nature and keep them alive so now we're passing down a header and we're passing down an image to this component right here to the hero component but what we need to do to come in here in our hero component and what we can say is we're going to go ahead and just keep this destructured instead of saying props all we have to say is again the heading and also message just like so then in here we can just say heading just like that just bringing it in from right there and now we can just do the same for message like so and just please note it is case sensitive you guys so now we're bringing in properties that we're passing down from our index component here so that is looking great you guys next what i want to go ahead and do is our navbar component so let's go ahead and create a new component in here create a new file i'm going to call this navbar.jsx you can say js or jsx you guys i use i use jsx because it allows me to use the uh the shortcuts when in my html image so that's what we're doing right there rfce and you guys if you're wondering that shortcut i use the rafce that is the react redux es7 snippets plug-in so and you can just use shortcuts like that to generate your functional components class components or whatever you use if anybody's even using class components anymore so for our navbar we're going to do a few things here we're also going to be using react icons which we'll install in here in a moment so for our nav bar we're going to have an outer div here then we have another div in here this is going to be our h1 and i'm just going to say capture because this is going to be our our um this is going to be our little logo text there and then also we're going to have a unordered list here and then li and let's go ahead and import we're going to be using our links so let's go ahead and just add that real quick so what we're going to say is link here and this is offered to us this link component is offered to us from next js so what we'll say is link href and i'm just going to surround my um my h1 logo there because i want that to whenever we click logo head us back to the home page so and this is how we use the next js link make sure that it's imported there and then we'll just um we'll just throw this this h1 inside like so and then same thing for this li i'm going to do the same thing link href just like that and i'm going to make this one to the home page we'll just say home like that now i'm going to copy this down um a few times here so we're also going to have a say gallery and this is going to smooth scroll to our image slider that we're going to build i'm going to say work here to display a few images and also we'll have our contact page so we'll go ahead and link these um accordingly here i'll say portfolio and this one is going to be really using smooth scrolling so i'm going to say i'm just going to scroll to that id that we're going to come back and create here in a little bit so don't worry about that right now and you guys let's go ahead and add in our our navbar components we can actually view it and we're not going to add it to our index file here we're actually going to add it to our app because we want this our header to display on all screens on all routes not just that main routes so what we want to do is you'll notice that our return component here it doesn't have any parentheses or anything and that's fine because we're just returning a single component however we want to add in the navbar so what we need to do here is go ahead and add in our parentheses there and we're going to just drop this down just a little bit and we also have to wrap everything in in this case i'm going to wrap wrap it with a fragment just like so so let's go ahead and throw that in inside there and let's import our nav bar just like so go ahead and hit save and there you can have it see it we have our nav bar here at um built in here so let's go ahead and close the app.js we're done with that now excuse me and we'll go ahead and finish building out our our um we're gonna go ahead and finish and building out our navbar here so we're already done here building out the main part let's go ahead and excuse me we want to make this mobile friendly so we're gonna add in our react icons and also a mobile menu so i'm gonna go ahead and open up my another little terminal here and i want to install yarn add react dash icons and we're gonna be using a couple icons from react icons and so to act as our hamburger menu and also our closing icon so once you have those let's go ahead and import those we're gonna do that by saying import then we have to put this in curly brackets we're gonna be using a i outline menu and a i ai outline close just like that we're gonna import these from react dash icons and just go ahead and hit say slash aei because this is the folder this is the directory of these specific icons so um now that we're done with that there let's go ahead and actually add in our our mobile button and where our our drop down we're going to go just below this ui here excuse me we'll say mobile mobile button and in here i'm set up a div here and we'll have say a i outline menu just like that and i'm going to go ahead and give a size property here this is just a size property that react icon offers us and i'm just going to say 20 for now and you can see it showing up right there so perfect there now underneath here is actually where we're going to have our our mobile menu itself and this is going to be a side drawer that we're going to hide off the screen and it's just going to slide in slide in from the left here and take up the full screen so inside here i'm just going to say we're going to have a div there then inside here we're going to have an ordered list and an li here and let's go ahead and just um let's actually just go ahead and copy this all unordered list and everything just to make it easy go ahead and paste that in there like so that is perfect now um that's gonna be all we need to do for now let's come back and uh let's go back and style this thing from the from the start here from the very top and and then we're gonna come back and add in the responsiveness for here this class name here what we want to say is excuse me i want to say fixed say left 0 top 0 and we want this to remain at the top of the page no matter what so that's why we're saying fixed here when the width to be full i'm going to say z10 for our index ease in and out then let's say a duration of 300. and while we're adding this in here is we're going to we're just adding this ease in and duration for whenever we start to change our color out of our background whenever we scroll so you can already see it's stuck to the top of our page there that's perfect now i want this to sit inside of a container so i'm going to say max width of i'm going to use my brackets here 1240 pixels here let's say margin auto just like so i want this to be flexed and then justify between okay and then items center we're gonna give a little bit of padding and then we're just gonna have um text white for for all of our text here this will make all of our text and our nav bar gonna be white there so perfect and of course it's looking pretty funny here um i want this word wrap to stay on there we go that's easy for you guys to see so i want this um i can zoom in a little bit for you guys i want this this mobile menu this to be hidden off the screen and we're going to add in some some media queries here as well so excuse me i like losing my voice so next let's go ahead and style this h1 which is going to be our kind of like our logo there so for the h1 we're just going to increase the size a little bit um i'm just going to say font bold and then text text for excel just to bump that up a little bit and that's perfect right there and for our under list here we want this to be flex we just wanted to display horizontally there just like so and we're actually going to say we want this to be hidden then anything above the small breakpoint which i believe is 640 pixels we want it to display flex and tailwind is what you call a mobile first design approach so whatever styles we add in are actually going to be um applied to the smallest break point then we have to specify once we if we want to make any media queries we have to specify um the break point in which we want to do so and that's all we have to do this is all we have to do to add in a midi query sm for small md for medium and you'll see right here the minimum break point is 600 or for small at 640 pixels so once we streak down a little bit more you'll see that should um display it goes to hidden so perfect so let's go ahead and do basically the opposite um let's add in our list items for now and then we'll come back and do the same opposite thing for uh for our our menu there so i'm just going to go ahead and hold down this option button and what that does is allow me to select multiple lines to add multiple lines of code here and just save a little bit time so for our list items all we're going to say here is p s4 and that's going to be all we need there perfect now for our mobile button here let me give this a class name and for the mobile button we want it to um anything above small we wanted to display block otherwise it's going to be hidden so um or sorry i have that the other way around here anything above small going to be hidden otherwise it's just going to be displayed displayed block there so you see that disappears then now for our um for our mobile menu here what we actually want to do here is actually add in um for our mobile menu what we're going to do here is hide it off of the screen and real quick i just want to give this a um this right here i'm going to give it a z10 because i want it to display on top of our of our side menu here so for our mobile menu here let's go ahead and style that and what we're going to say here class name now i don't want the menu display at all above small devices so i'm going to start it off with anything above small we want it to be hidden otherwise it's going to be absolute top 0 left zero right zero bottom zero and i want this to display flex justify justify center item center just like so and then width full and tight green just like so and that's going to be what we need right there and what we need to do i'm going to add in a few more things here um i want the background let's say bg black i want the text to be center and i know it's hiding you guys but we're gonna i'm gonna show you where it went here in just a moment and then want to say ease in then also a duration of we'll say 300 which should be good there so go ahead and give that a save and right now it is um hidden but if we go ahead and just remove that it should be what our post what should be what we're looking at right now so flex looks like i just left something out justify center item center perfect and that's what we want right there so before i go ahead and add in that small hidden media query let's go ahead and install this thing a little bit more so for our list items down here we're going to do the same thing here add in some styles there we go so what we're going to say class name and for this we're going to say p 4 i'm going to say text for xl so it's a little bit larger and then on hover this is a hover selector on say text ray 500 so whenever we hover you have this nice um back there perfect but let's go ahead and paste that back in because we don't want it to display until we click on our menu button so let's go ahead and add in some functionality to make this thing responsive whenever we click on our mobile button and we'll have a look at it in in like a mobile view there so right now it's displaying all the time on mobile devices and we do not want that so we're going to do that with state so let's come up here to the top and let's just go ahead and import the u-state hook just like so now we're going to add our state right here and what i'm going to say const doesn't really matter we can say we're going to put this in some brackets here let's say nav and set nav is usually what i say here equal to use state and we're going to give it a default value of false and then we're going to have a a function here and i'm going to just be an arrow function here and i'm going to call it handle nav just like so not passing anything in but whenever we run this function we just want to update our state here change our state to um to the opposite there okay so from false to true is what we're going to be saying now um let's go down here that's all we need to do there let's come down here or our mobile button here and what we can say here i'm going to go ahead and copy that and so notice our menu button is displaying right there and we actually want it to be an x we're gonna use the ai outline close whenever our menu is open so go ahead and cut that and what i'm gonna do is open up our curly brackets here so we can type some javascript and we're just gonna use a ternary operator here so we're just checking if nav is true which right now it is default false so what i'm going to say is a i will say outline close just like that and this is going to be that size property again of 20. so if it's true we want to display that else if it's false we're going to display display the menu so let's go ahead and nav is true and i line closed okay so that is perfect right there now i'm going to go ahead and close this side one up just give it some more space and so right now everything is false here that's looking good and what we next what we want to do next here checking this here what we want to do next is let's come down here to to our actual mobile menu here and what i want you to do is actually select all of this because we're actually going to use the same thing for our class name in here for our for our mobile menu and let's open up our curly brackets here and we're going to do the same thing if nav is true i'm going to paste this in here else i'm going to paste it as well so go ahead and save that so if it is true we want to display it on the screen else if it's not true what we're going to say this left here instead of left 0 we're going to open up our curly brackets and i'm going to say negative 100 percent and what that's going to do is just hide it off of the screen there boom all right there we go so it looks like um looks like our margins off here you know i think it was looking good on on larger devices but let's go back into our hero here and i'm just going to remove this margin left there i think that'll be all we need yeah so that looks a lot better you guys so one more thing uh whenever we scroll on our nav bar what we want to do is actually change the background of our navbar so let's go ahead and do that right now so let's come back into our navbar component here and how we're going to do that here is we're just going to use a um we're going to set up a little use effect here and actually add in some more state so let's go ahead and our next date i'm going to say const and i'm going to have a color and set color this is going to be equal to use state and i'm going to set this by default and be transparent there and then bring that down one more time and we'll say set text color color and set text color and this one by default i'm just going to say white so let's go in here and add in um let's go ahead and actually add add down here so for our um for our this first div up here and what i'm going to do is actually add in a style and i'll just add it right here so i'm going to add in some styling just like that and this is some inline styling but for over here we're going to say color okay or sorry it's going to be a background color and we're just going to use a template literal here okay so we have to add in our back text just like so and this is going to be the color here right here at the top so this is going to be that state there um like a left and out there there we go perfect and like i said nothing's going to change right now until we actually add in our use effect hook to trigger all the changes here so next what we're going to do is the same thing here for our h1 and i'm just going to say style just like that and instead of background color this one's just going to be color just like so let's add in backticks and then our our template rule here and this is going to be text color just like so and uh let's go ahead and i'm just going to copy that because i'm going to place this in a couple more places we're going to use that on our on our list and then as well as we're going to use it on our um on our mobile menu as well so let's add it in on our go add in this one as well and we also want to set this on our unordered list there let's go ahead and run this thing to make sure it's working properly so what we're going to do is add in a use effect here so we're going to do that right here say use effect now go ahead and you want to make sure this doesn't look like it's going to be imported so let's just go ahead and do that use effect just like so and there we go you know function in there now in here what we want to say is const and this is going to be the name of our uh function here i'm going to say um change color just like that and it's going to be and in here what we're going to do we're going to check to see if window scroll y is greater than or equal to 90. what we want to do is just set the color okay and this is our this is basically our background color and i'm going to set this to um i'm going to set this to all white because we want the navbar to change to white and since our our text is actually white we won't actually change our text black so we'll say set text color and we're going to set that to black there we go um and then we'll just say else we'll leave a color else we'll just set color so this is going to be whenever it goes back it doesn't just stay that way so else if we're underneath this 90 pixels it's just going to go back to transparent then same for the set text color we just want that to go back to uh white so let's have a look here and we also i've almost forgot you guys so inside of our function here or inside of our use effect what we're going to say is a window.add event listener and what we're looking here for is the scroll and every time we uh we hit this event listener we sort of run our change color function so and we can go and add our dependency array here inside of our use effect perfect there so that's going to be all we need to do there um looks like we're getting an error here in our use effect here let's see use effect say oh something these effects defined multiple times oh add something in here yeah this right there i just imported that on accident so go ahead and just delete that we'll give it a refresh i'm not sure if we actually have to go into our damn it let's go into our hero here and i'm going to say see there i just want to see okay there we go i just want to add some margin to make sure we can actually scroll enough to see that effect and let's check our mobile hey there we go but it looks like our we we want this to remain white all the time so let's go back to our net bar here and so for our navbar we probably just need to add um color color let's have a look for our event listener okay i think that's going to be okay everything is working properly you guys so let's go ahead and let's go ahead and come back to our hero here and i'm just going to change that back to marginbot 12. go perfect all right you guys so next what we want to do here let's look at what we're doing next so down here what we can do is i'm going to take this off here what we're going to do next is this gallery let's go ahead and build out our image slider that is right below um right below our hero component here so let's go ahead and open up our sign menu here and we're going to create a new component here i'm going to call it slider dot jsx and also you guys what i'm going to add is a new file called slider data this is going to be just via js file and actually what i'm going to do is just copy it over but basically it's just like a a json format here and just export cons slider data and now we're gonna have access to all these images basically it's just an array of uh i'm using five different images in here and all i did to get the images again i went and grabbed the images copy image address there and then just pasted them in here like so so um if you want to use that i'll go ahead and just kind of make sure you get the right format here so you can use whatever images you like also uh whenever i'm done with this i'll put a link to my github down in the description below so if you want to use these exact images that's cool too so now that we have those um we're going to say raf ce and this is just going to be for our for our slider here now um the first thing what we're going to do is actually bring in our slider data actually here we know let's go ahead and on our index let's add in our slider just like so and let's bring the data in here and then we we can just uh we can just pass them through here so what we're going to say here is import and what we're looking for in here is that we're going to bring in the slider data so what we can say here is import and we're looking for slider data just like that perfect it's going to go ahead and auto import it and we're going to pass that down in here so what i'm going to say is slides is going to be our property there and then we'll just pass down the slider data just like so so now all we need to do is go ahead and basically just accept those here at the top so in our side of our slider here we can just bring that in here and what we're going to bring it in as is just just slides as that that's what we're passing it down as okay and so in here let's go ahead and build this out so first of all we want to give this an id right because we're using the smooth scrolling so let's go ahead and give this an id i'm just going to say a gallery because that's what we said before there so next after this div i want to have an h1 i'm just going to say a gallery in here see what we're doing there we go looks like we're getting some this is inside our index.js looks like we just need to import our slider component there we go that'll get rid of our errors so here you can see down here the bottom is going to be our data here so next okay so we have the gallery now next what we're going to have is another div here and we're going to have a let's go ahead and map through our data here so we're going to say say slider data and let's go ahead and we're going to bring this in here as well so go so sliderdata.map and what we're going to do is just map through all of our um all of our things here we'll just map through and we'll just say uh we'll say slide here and then give it an index just like so here and let's just map through these to be uh we'll say return and let's just go ahead and return for now i'm just going to use an image component here like this source and in here we'll say slide image let's just give it an alt tag just like that this can be self closing there so we're going to come back and update this to the next js image component here in a minute but right now as you can see boom we're now mapping through if you did this correctly with your uh slider data here you're not going to be able to map through all of the images that we have here so that's what we need to do there perfect so once we're mapping through these um a few things let's go ahead and kind of change this over to the image component that next js offers us so we'll say image and something to note when you're using when you're using the image component in next.js you have to you get this error here you have to define the width and height if the images are not locally stored within your project so in this case we are using an external link because we did the copy address so what we have to do is add in a width and height or add the layout fill which displays 100 of the width and height of the parent component here so let's go ahead and add in a width and height so for this i'm going to say width and in this case i'm going to say 1440 and that's going to be pixels and our height here is going to be um if i can spell it right height is going to be 600 just like so and i'm gonna say object bit is gonna be cover equal to cover and what that's gonna do is just maintain maintain the uh the aspect ratio so you notice we see another error here and that's because whenever we use externally uh imported images like we are doing you actually have to add these to like an allow and you're in your next.js configure so let's go ahead and copy this and it tells us right here it is not configured under images so go ahead and copy that and let's go over to our next dot config file here and then just right in here what we're going to say we're going to put it we don't we can remove that and just use like our curly brackets here and we'll say images okay just like that then domains and this is going to be in an array here and we can just paste this inside of quotes here and if we if you pull from another website as well you can actually add in another website here so but in this case i think i'm only going to use images from unsplash and um what we need to do it actually says you need to restart the server whenever you make changes to your next.convic file you have to restart the server otherwise um you're just going to run into some errors there so let's go ahead and restart and we should still see our images here with um with no hey there you go so now we're mapping through our images and notice these are being lazy loaded there so they're not being loaded until we enter in the viewport screen so we know our image component is working properly so let's close that we're done with that there and um was it failed to fetch localhost going on there go ahead and not sure what that error is there that's okay there we go yeah sometimes just need to restart so sorry not sure what was going on there but it looks like it's all cleared up now so um a few things so what we want to do with these so i think these errors will go away after we add in some some more of our logic here so right now we're just mapping through of uh mapping through our data right so we want to add a few things here um and we actually don't want to display all of these we only display one at a time so let's go ahead and add add some extra things here so what we want to say here instead of this image we're actually going to surround everything in a div just like that there we go i'm going to make a little space here and for the cemetery i'm just going to copy that and i'm just going to move it up within there perfect go ahead and give it a save now for this div here i'm going to give it a class name okay and what are we going to do we're going to add in some state here we're going to add in some state and also if we go ahead and give this index you can say key index right there otherwise we're going to get some errors there so i should clear that up so let's go ahead and add in our state and we're going to have a couple functions here so we can go to the next slide and go to the previous slide here as well so let's say const and we'll say say current and set current just like that equal to use state and i'm going to set this to 0 by default here next i'm going to say const length they're equal to um it's going to be slides dot length and this is going to get the current length of the slides so looks like we need to just import this u state hook there boom there we go perfect and sometimes it does that you guys sorry it didn't import sometimes it does not import the right thing or the thing i wanted to import so that's looking good there and um next let's go ahead and create our functions here to to toggle through the slides so i'm going to have a cons next next slide just like that and it's going to be a narrow function and then see let's go ahead and say set all right right so can't set current here and it's going to be current equal to length minus one there it's gonna use a ternary operator zero or uh current plus one and i'll come back and show you here in a minute i'm going to go ahead and copy this down here and and this one is actually going to be we'll say previous slide there and for this one what we're going to say if current is equal to to the 0 what we want to do is length minus 1 otherwise current minus 1. excuse me and then we're also going to add in a little if statement here if dot is array slides here or use a four slides dot length to zero what we're going to do is return and i can't type today return going on it's going crazy return no there we go go ahead and give that a save and let's add in a our buttons here so we can actually toggle through or have something to click to get through our images here so we're going to add those is inside this div but outside of the image component here so for this here um let's go ahead and add in this class name and then we'll add in everything else and for the class name we use a ternary operator again so go ahead and open up the curly brackets and we're going to say if index equal to current just like that okay if that's true what we're going to set is opacity opacity and we'll just say one go ease in and duration we'll say duration make it a thousand it's a little bit longer there else what we'll say is just uh opacity zero go ahead and give that a save perfect so that right now it's hiding all these others all the others um capacity is zero so they're there we just can't see them right now and so um and then we have our index in here so after that what we want to say for this image component here i'm just going to go ahead and copy that okay go actually let's just go ahead and cut and what we're saying is open up our curly brackets here we'll say if index equal to current then we're going to go ahead and display that in here okay give that a save and what that's going to do is just hide all of the other if we're not on the current slide it's going to hide all the other ones it's going to give an opacity of zero it's just going to hide it off the screen so if you're not going to display it at all so now what we need to do finally let's add in our buttons here and we're going to do that right here we're going to have a button here and this is just going to be a react icon we've already installed the packages so what i'm going to say is uh for this icon we can use i'm going to say fa arrow circle left just like that and let's just give this a size property of 50. i'm gonna go ahead and copy that so we need to import it so import from react icons instead of the ai package this is going to be the fa package just that little pretext right there so go ahead and give that a save and oh there it is perfect perfect and next we're going to do let's just go ahead and copy that one we're actually let's give it some class names first before we copy it so we can copy over those class names and what we want to say for this one we want to display absolute i'm going to say top 50 and this will get us pretty close pretty close to where we want it to be i'm going to say left open up our brackets here and i'll say 30 30 pixels just like so text white and if we have 70 that's going to give us a little bit of um opacity there we'll say cursor pointer and select none and then give it a z index of i'm going to say 2 and so go ahead and let's give that a save here and i want to do this really wish that would stay on you guys that would help out a lot so let's go ahead and copy that and we're going to paste the other one at the end of the div here but instead of fa circle left this one's going to be fa circle right there we go and instead of the left here we want to display on the right and let's go ahead and need to make sure this one imports let's just go ahead and import that clear up any errors let's give it a refresh good no errors here um it's not where we want it to be though however and that's okay we just need to add in um some class names we're gonna have to add in a relative here and we'll put that around let's just put it right here we'll surround this with a div if this class name relative plex justify now let's just select this one all the way to the end of that one we'll just go up and that should be all we need to do so let's see if these we need to add an on click there so we'll do that here in a minute let's go ahead and let's go ahead and add that right now so for this circle on the left we'll say on click and every time we click this we want to run the so this one's going to be the previous slide because this one's on the left so we'll say grieve slide and then our circle button on the right here we'll say on click and on this one we want to run the next just like that so let's have a look and hey there you go our slider is working properly um i do however probably want to add some more styling here so let's go up here to the top and for our if we open this up i definitely want to add in some styling here so let's go ahead and do that right now so for the the parent div of this component here where the gallery says gallery i'm going to say class name and we're going to give this a max width of 1240 pixels and we'll say mx auto just like that now for the gallery here give it a class name send me text to excel bold and we'll say text center there it is looking good there perfect perfect and i'll just say p or to give it some padding now this parent div here um this parent div let's see here we can actually let's just get rid of this if we don't need that perfect has added in an extra div there i just noticed so that is looking good um all the let's go ahead and save i think that is looking good right there perfect so um that's going to be all we need to do i don't think we need any additional styling um let's go ahead and open this up and just make sure it's displaying properly there okay there we go perfect so that is looking good you guys we can now navigate to the next slide and it should just start over there so everything is looking perfect right so oh actually it's kind of notice it's adding in some funky stuff there let's have a look um let's have a look what it's doing so you know what let's move this outside of that right there i think that's going to be the trick there to fix it and so let's go ahead and drop this down a bit go and see if that makes any difference all right there we go perfect that's what we want right there you guys everything's looking good perfect perfect all right you guys so smash that like button if you feel like you're getting some value out of that i would appreciate it and next let's go on to our let's go on to that little like instagram component there that we're gonna add in the bottom so we're gonna go ahead and add in a new file it's gonna call it instagram.jsx just like that raf ce it's gonna get our functional component and then i'm gonna add another one because we're just gonna go and say in instagram g.jsx and basically we're just going to be using um kind of destruction a little bit and kind of just make it a little bit nicer and a little bit cleaner so for now like i said we're going to use instagram and then we'll come back and do the instagram image so for the instagram one what we're going to do is actually bring in some images and what i'm going to do is actually just copy them over and if you want to download them that's cool as well like i said i'm going to put put them inside this public public folder here so i have six images i'm gonna bring in here and i'm putting them right inside the public folder um like i said i'm gonna put the link in my github or to my github in the description below if you wanna grab those and uh basically the reason why i'm using statically imported images opposed to the externally imported images i just want to show you both ways that we can use the image component so mig image dash one dot jpeg that's what that one's gonna be called there and what i'm going to do is just go ahead and copy this these over in here so i'm just going to import them here at the top just like so all right and then um for this here i'm going to go ahead and just create rafce so i can import that one as well um uh we'll do that here in a minute here so let's go ahead and let's go ahead and install this thing out here so what we want to have here is gonna be very easy here so we have this outer div here then we're gonna have a p tag and it's just gonna say follow me on instagram there we go and another little p tag in here and this is gonna be that at capture like a little business name there and then in here we're gonna have a div and within here we're gonna have the instagram and there we go perfect now um that's all we need to do here so let's go ahead and want to import this here and there we go and now if we look over here we should see oh okay we're getting some imported so okay one little issue you guys here so when i build a project i put them in like a social folder and um i didn't put the i didn't i just put this and and the assets form so what we can do let's get rid of that and that that should clear up any so public assets there we go so can't resolve let's see make sure this is in here so public that's we're going outside of this into the public folder oh i didn't use the assets either so that's cool we don't really need to for this for this tutorial there so don't worry about that all we can do is just delete this as well and that will get rid of any errors we have leave there we go okay so let's make sure okay there we have our instagram down there perfect and this is all our instagram image there and what we can say here let's go into our instagram image here and we're going to add in a few things in here so let's go ahead and say what we're going to have here is that actual image component let's make sure we import that from nextjs here and our source here our source we're gonna be passing in social img we'll come back and i'll show you we're gonna have some errors here in the meantime but we'll go ahead and say that right there so let's go ahead and let's go ahead and pass these down so we can actually get around these errors here and for right here what we're going to say is just social image and this is just passing down the property so we'll have ig img1 that should take care of any of that any of the errors there so social imgs not defined so we just need to go in here and bring that in social okay perfect get rid of those errors and there you see we have our image there so let's go ahead and let's go ahead and let's go ahead and bring in the rest there so and that just made these we'll style this one and then we can move on from there so we have our image there and then i want to have a div because whenever we hover over this we want that little overlay with a little instagram thing in the middle so this div right here can actually just be this is going to be our overlay so let's make a note there for overlay and then we're going to have a p tag and it's just going to say fa instagram perfect it went ahead and auto imported it for us and let's go ahead and give this a size property of 30. so starting with our styling here you i know you can't really see anything there's our image we want to display right there in the middle with a nice overlay so let's give this a class name here and we'll just say relative there we go and for our image we do want to add a couple things here i'm going to say is class name with full h4 and then our layout layout one is set to responsive there okay and for this div this is going to be our overlay so we'll say absolute it's going to be top 0 left 0 right zero bottom zero and for the hover let's say um cover selector we'll say bg okay let's see how that i think that's gonna be okay might want to go a little bit lighter let's say okay perfect perfect so everything is looking good there um what we do need to add is what's called a uh let's see here i think that might be all we need to add we'll check there in a minute so for this p tag um what we're going to say here is or actually we need to add in here first if we want to display the screen blacks justify center and then also items and it's going to put us right here in the middle of the screen so for our p tag your class name um we'll say text okay 300 hidden and then group over block so this is how we group things and tailwind there's an added in up here group so basically this is saying whenever we hover we want it to display in the uh in the middle of screen so we have flex justify center item center absolute top zero left zero right zero bottom zero cover um cover bg black and we're grouping everything and we're just going to say in here it is hidden then group dash hover we're going to display block text text 300 then we have our go ahead and save this it is inside there perfect so let's go ahead and i'm going to open this up here and add in our um what we're going to do next is actually add in some styling or the uh all the other images here so let's go ahead and do that next here and what we're going to do is we're using grid and like i said we're going to be using six images here so for this outer div let's go ahead and give this class name max width we'll say 1240 pixels just like that we'll say mx auto text text center just like that and we'll say py24 just give it some nice padding here so this is going to be text to excel bold just like that and then this one here class name we'll say padding on the bottom of four then here's where we're gonna display grid and we'll say grid or sorry anything we'll say grid columns 2 by default then anything above medium we're going to say grid columns we'll say 3 then anything above large let's say grid palms 6 and we'll give it a gap of two and then p so as you can see we're on the medium break point so it's displaying three and then as we get up larger it's going to be six however we're only passing in one image right now so let's go ahead and take care of that we also need to add in our our image is not showing up so we'll go ahead and tackle that here in just a minute but let's go ahead and pass down our other images here so two three four five and then six there and all we need to do is just change the numbers and we're going to be passing through all different images there we go so now we have all different images and whenever we hover on them oh they are you can tell they are being lazy loaded so that's perfect right there you guys so one thing our you know our icon's not showing and i just made a little mistake here um inside of our instagram img here actually made this a self closing tag which doesn't make any sense if we're trying to add something inside of it so yeah sorry about that there so all we need to do is that and that should take care of the errors there so now if we hover we now see our instagram image there in the middle so everything's looking great now you guys this is perfect let's move on so next so we have our smooth scrolling is already working properly there we go and this is because we added the id for our gallery there so next let's add in some routes for our work and also contact right now we're getting arrow 404 page not found so let's go ahead and take care of that next um so all we have to do like i said before to add a new page in xjs we simply just create a new file inside of our pages folder here so i'm going to create one that says uh we'll say work dot jsx okay and i'm gonna say rfce get our component there and then also let's create another one that says contact dot jsx and rfce that will get our contact there so now let's go ahead and click work so as you can see let's see here oh i routed that to portfolio so let's go in and let's go to our nav bar i'm just going to change we'll say work just like that i just changed change the route in which it directs us to so let's check that again and work there we go that's perfect and you can see we need to pass through our hero components so let's go ahead and do that next so let's go into our let's see close the nav bar i'm gonna leave that now broken we're gonna come back to i just forgot something real quick um so inside of our see here inside of our work let's go ahead and let's go ahead and cruise over to the work here so what we want to do here we have our nav bars being imported in fact we use really cool tool here but pesticide you can see it outlines all the html elements on our screen you can see it outlines our nap bar so we know it's there just all white so uh what we can do is actually add in our hero here so there's a hero just like that okay and we need to make sure that imports now um what we want to do here is actually pass in our our properties here so remember we had a heading right and for our heading it's going to be a string here or our heading what we can say is um we can say whatever we want here but for this for this um case where we're going to say i'm going to say my work just like that work boom there we go and for the message i'll say um this is some of my recent work traveling oh and it should pass in our message perfect so what i want to do next is actually add in just some images down here like on the work section here to add in some images so let's go ahead and let's go ahead and do that right now and i'm going to add a new file inside of our components folder i'm just going to call it port say portfolio all right this needs to be capitalized here i want that common name convention there portfolio dot jsx rafc e is going to get our functional component here now um let's go ahead and add a few things here so we're going to have our div here and then we're going to have an h1 and it's just going to say we'll say travel photos just like that there and then we'll have a div and then another div here and then inside here we actually have our images so this is going to be our first image and these are going to be externally um externally imported images here so i'm going to go ahead and paste that in there i'm going to give it a save and let's use this word up there okay and i'm going to give it an alt like that now i'm just using a a random image i'm pulling over from unsplash like i said feel free to use your own if you want to use mine as well that's uh that's cool too i'll put a link in the in the description so i want this layout to be responsive and again since we're gonna go back over here we're gonna get an error since we are pulling it in externally um we're not actually we haven't loaded this to our uh work yet here so we add in our portfolio or folio we're gonna get an error because we're not importing we're not defining the width and height of that um the width and height of the of the image here so we need to import this image component as well boom so now we're going to get the width and height error go there it is so for this one here with i'm going to say this one's going to be 677 and we'll say height now that doesn't mean it'll always be this height this height and width if we since we added in the layout responsive it's gonna um it'll be responsive to our viewport here so boom there we go and there it is lazy loaded perfect now for our next image here and um for our next image i'm surrounding all of these in a diff here so this one is going to be i'm going to go ahead and give this class name width full well just so i can kind of keep a note here so for this one image what i'm going to do is i'm just going to copy over this source as well go ahead and save that and let's go ahead for this one this is the next image all of these following images we're gonna have four more images including this one and all the width and height of these will be the same so i'll say 215 for the width and the height is going to be to 17 just like that and you want this layout to be responsive and also we're going to have object object fit cover so everything is uh because we want everything to be the maintain the aspect ratio there so okay there we go perfect perfect so what i'm gonna do next is just this div here so we're having four of these right so i'm gonna copy these down two three and four and i'm just gonna go ahead and i'm just gonna go ahead and paste over the um the different address different urls that we're going to be using here so feel free to um feel free to copy them or if you want to use your own that's cool too i'm going to paste one in there and this next one here i'm going to paste this one there sorry just bear with me you guys and this one in here finally so then paste this one in here there we go go and paste give it a save and let's see how that's working so we should be loading our other images there there we go perfect so now all we need to do is add in our add in our styling here so um so for our styling here let's start at the top here and we're going to say give our container here with a max width of we'll say 1240 pixels and say mx auto just like we're doing py of 16 just give it a little padding and then we'll say text center and for this h1 let's give it a font bold and then text to excel shape it up a little bit there perfect now um let's just say p4 as well so for next year for this div here uh what i want to say is give this a class name and this is going to be the grid for all of our images below and what we want to have here if we open this up that's what it's going to be showing it down so it's going to have five five columns here and this first image just display um three rows and three columns so let's go ahead and say grid here and we're gonna say grid rows none anything above medium we wanted to say red columns five and i would say p four and think about medium four just like so perfect that's looking good there we go now let's go into this first div that's our that's around our first image the parent div on that one and what we're going to say here is with full h full and then we're going to say column span to anything above medium we'll say call spam three and row spam go perfect there we go you guys everything is looking good let's look at this on a smaller device make sure everything is mobile responsive you know what let's just go ahead and say perfect looking good you guys now um one thing that i just thought of if we click on the home that's great we navigate to the homepage but our mobile menu is not closing so that's why i left this open here and all we need to do here is come down here to our links and we have to put this not on the link itself but on the list item so again i'm just gonna select multiple spots first to type in and what i'm gonna say is on click and then basically we can just run the handle nav function because remember every time we run the handle now function it just changes it to his opposite value so it's true now it's gonna it should close it and and there you go perfect so everything is working properly there's our contact page which we're about to do right now and our work page we're passing through properties to our hero component all right you guys let's go ahead and knock out this contact page so i'm gonna close that that that that and so for our contact page what we can do is uh we can add in a contact a contact component here as well so let's go ahead and under our components here we're going to create a new component it says contact.jsx rafce is going to get us our functional component here and let's go ahead and add in our hero here okay so in here hero here we go perfect and we need to make sure that this is being imported and for here what are we going to pass in through our um we can say whatever we want here um remember we're going to type in our heading here and we'll just say contact and for our message we'll say submit the form below for that so let's see perfect there it is populated very nice and let's go ahead and add in our whoops let's go ahead and add in our contact form there okay perfect go contact and we should have our contact form perfect so let's go ahead and style out our form right now um it's going to be a pretty easy one here so we're going to div here and inside camera h1 and it'll say let's work together and underneath that we're going to have our actual form and we don't need an action submit this form is not actually going to submit don't worry about that there so inside this div we're going to have two inputs copy that down this is going to be a see we're doing placeholder and we'll say uh name and this one email perfect and outside this div we're going to have another input this one can be like email or sorry um this one we probably want to say email this one can be text perfect and then a text area and we can say that perfect we don't need a name or id in this case here and then also we're probably going to want a button that says submit here okay so that's looking good there perfect let's go ahead and style this thing so give it class name max width and we'll say 1240 pixels okay margin auto there we go and p dash four and i'm going to give this height of screen just so it gives us a lot of space to deal with here so for our h1 it's going to say text to excel font bold text center and then p four there we go go perfect now for our form let's give this class name for our form i wanna say is max width and i'm gonna give this a max width of 600 pixels just so it doesn't display the entire width of the screen here perfect that's what we want and let's go ahead and give this give our inputs some styling so we can actually see so let's go ahead and first here i want to say when this display is grid we'll say grid bombs two then gap two so for our inputs let's go ahead and i'm gonna style all of these basically the same here same with the text area so let's go and give this a class name order i want to be shadow lg e three and let's see how that looks perfect that's looking good right there you guys um and that's going to be all we need to do there so for this input right here i want to say with full just like that there perfect and then for this as well we'll say now i want to add in some margin here on this so i think we used uh four so let's just say my four dump that down that is looking good perfect um and for our button order shadow large and then uh three let's see how that's margin top two i'm gonna spread this out a little bit there you go so let's open this up a bit you guys i'm gonna close that off so that is looking pretty good i like that there everything is working properly all right you guys so if you want to learn uh next.js if you want interested in a portfolio website i built out a portfolio in next.js also a few others as well so make sure you like the video and uh and subscribe to the channel if you got some value out of this i'm going to be putting out some more react content and also next yeah so thanks for watching you guys thanks for following along i'll see you on the next one

Channel: Code Commerce

Views: 74,413

Keywords: next js, react js, build a responsive website, build a nextjs website, learn next js, next js basics, nextjs routing, next js images component, web developer, coding, javascript, html, css, tailwind, tailwind css, nextjs and tailwind css

Id: HVyct9EUNP8

Length: 78min 19sec (4699 seconds)

Published: Sat Jul 02 2022