Build A Linktree UI With Next.js 13 and NextUI 2.0 (NextUI Tutorial)

what's going on guys it's Cooper codes and in this video we are going to be building this link tree component using nexgs 13 and next UI 2.0 so this is going to be a pretty simple project but its main goal is to get you guys started with using next UI 2.0 alongside nexjs13 I'm going to show you guys how to work with the initial template project provided by next UI and then we're going to change some things to create this component here it's just like a link tree component so you can see I have my YouTube My GitHub also my newsletter called the code letter this is a completely Shameless plug but we can press on the code letter right here and it's going to load in the website if you guys are interested in a high quality newsletter that's going to give you amazing information every single week go check it out but I'm not here to sell you guys too much on this we can also jump back and go to my other links for example GitHub I'll just show another one we'll go over to github.com Cooper codes you'll see this is just kind of an example component and it's not like we're doing any of the back end functionality for linktree but this is a great start when it comes to working with next UI so next UI is one of the best react UI libraries that recently has announced next UI 2.1 now this means you can use these components inside of nexjs13 and it supports server-side rendering and all that good next js13 stuff a really important thing is that it works directly with Tailwind CSS so you can use these next UI components alongside tailwind and you will have no issues when we create a project with next UI and xjs13 there is a template project that allows us to get everything set up as fast as possible so I'm going to put this command here somewhere in the description and we can head on over to an empty folder in Visual Studio code now that we're in vs code we can go in here and then copy the create next app command from our template what this command is doing is it's making a create next app with a example template which pretty much means it's going to create a nexjs template according to the link here so the link here is a GitHub repository that next UI has built that allows us to instantly build next.js searching applications with next UI specifically so once we press enter here it's going to ask us a couple of questions I'm just going to call this app Dev Dash card and that's all we need to do is name the app and we are good to go so as we can see here it's going to create that Dev card folder in the top left inside of here is going to be the entire nexjs searching application that was built off of the template we just used so we can go into the devcard folder here by saying CD Dev card and in order to run our application we can say npm run Dev so next UI gives us a bunch of stuff for example it gives us a couple of routes here so you can see there's a Blog route and a Bouch route a docs route because the app folder in xjs13 uses folder-based routing you'll see that inside of our app folder there is going to be a bunch of stuff in here for the purpose of this tutorial I would say don't be too discouraged or worried about all the different contents of this folder to make this video simple I'm just going to use the main localhost 3000 route to hold our little link tree component so as they say here we can get started by taking a look at page.tsx again guys remember that Nexus 13 uses folder-based routing and so because we are in the base route or kind of like the base folder is what you can think of it as we're going to go to the page.tsx that is inside of our app folder and so inside of this page.tsx is going to be the initial page that was showing under our nav bar so if we delete the first div that shows like make beautiful websites regardless of your experience you can delete this we will then see that change get updated to our interface to keep things simple I'm going to delete everything inside of the page.tsx here so we can go back in here and pretty much just delete everything except the section so they have two more divs which I'm going to delete both so we just have an empty page.tsx and then we keep these section because I'm going to kind of reuse some of the styling there so you might be confused because right now our page.tsx has no content but we still see a nav bar and also a power by next UI here these two pieces of information here are coming from our layout.tsx so if we go over to our layout folder we can see that the actual content of our web page is going to be inside of this children attribute here in nexjs13 so everything around the children is the stuff that's going to be around our page.tsx it's a simple way of thinking about it for example this footer here is showing Power by next UI I don't want this to show on every single page so I'm going to get rid of the footer by just deleting it like this if we save our changes and go back to our web page we'll then see that the footer is completely gone which is good news one more thing is if we see this navbar component here we can go back to layout.tsx and see that they have a custom navbar component that they built here this is going to be inside of the components folder another cool way of seeing where the snapbar component is coming from is by doing control and then clicking on the nav bar in vs code I'm going to be honest this navbar component is definitely fully built out and kind of complex so if you're new to stuff like this don't be too worried about this at all just know that inside of the nav bar we are going to go to the return statement to see the actual elements it's returning these elements are generally going to be left to right so you can see inside of the navbar content here we have a navbar brand which is going to be that logo that's showing on the left of our nav bar right now you can see that it's showing Acme right here but we can actually change this logo to something else for example Dev card and we can also just get rid of that logo that they have from before now inside of our navbar changes we can see that we still have all these routes but the logo has changed which is great news one thing is important to understand is that these home docs pricing blog they're all defined within something called site config this is a common way for especially next.js13 websites to have all the information about certain routes in one config file or config object so if you want to change the routes for your specific website or do anything with that you can go over to the site config itself and so if we scroll up and see where site config is coming from we'll see it's coming from at config site this ad symbol in your next js13 projects just means the base root so your actual Dev card folder here so if we go to the dev card folder and then we go to the config folder and then we go to site.ts this is where that side config is coming from and you'll see our nav items are being shown here where each one has a label and also a reference to the actual route I'm just going to keep the about route and delete everything else so we can go in here and delete docs pricing and blog by just deleting the objects here and if we save this and go back to our project we'll see this only going to show home and then also the about page and so we can go back to our nav bar and delete these little sponsor routes and search bar if we want as well so inside of navbar we can go to the bottom here and just to explain this this now bar brand is our logo this list here is going to be the different routes we have so for example home and about and you'll see this navbar content here holds a couple of things one of the first things you can see is as little Twitter icons and Discord icons and GitHub icons are here so if we want we can just get rid of that entire navbar content you'll see this also holds the search input so that little search bar we see and and also that sponsor button we saw before to make things look kind of nice and symmetrical so there's stuff on each side I'm going to delete the sponsor button and also delete the search button right here if we save our nav bar and go back we can see we now have a very simple navbar as opposed to before I know that's a lot of work but it's supposed to get you guys kind of familiar with working with these next.js13 components so hopefully it's helpful now we have a completely blank page.tsx where we can build out our link tree component inside of page.tsx we can get started with building our component and just to make a little comment at the top here to describe each thing we're going to do is we are going to create a card for our link tree to live in or a little link tree component you guys know what I mean we are then going to create a next slash image for the user's image we are then going to create some chips to describe the user for example typescript or you know YouTuber if you're a YouTuber or programmer or something like that right and then create a text description of the user just under all that and then create cards for each user link so that's kind of the process we're going to follow in this tutorial so the first thing we have to do is we have to get to the actual next UI Dash org slash card component so if we go over to our command line we have to install these components one by one to get the next.js searching compatible ones so if we want to use the card component from next UI we go in here and we say npm install at next UI Dash org slash cart this is going to add the card component to our project so we can npm run Dev again just so we have that server running in the background I want to make sure that this section here has a full height so H dash full this is going to make it so we can Center our card component to the middle of the screen so it has kind of a height to base that middle off of so if we go to the top here we're going to see a bunch of imports which were from the previous version of page.tsx before we deleted everything so we can just delete these and there will be no problems there and for our first import I'm going to import the card component from at next UI Dash org slash cart so down here we can do a card like this and now you'll see we're using the next UI card component inside of the card there is another kind of complementary component called card body and so we can use that with Indy card to make a nicely formatted card body because our link tree component is pretty much just one huge column what we can do here is we can say div class name is equal to flex and then Flex Dash call so this is a flex column layout and we're going to make DeWit Dash full and so this is a good example of how you can use Tailwind CSS kind of intertwined with these next UI components this stuff right here is next UI and then on the inside we can use tailwind and it's going to look great and so this big column is literally going to be wrapped around our entire component because for each item we add to our card we are going to make a row for it so for example the first thing we're going to do is create a next image so I'm going to go in here and say div class name is equal to flex which means it's a flex row by default and then justify Dash Center this is to make our image go otd Center and because we are using next slash image here we can go to the top of our application and then import image from next slash image boom and so now we can go in here and then get the image like this it's of course going to want some properties to the next image here so you guys can use any kind of square image you want I'm going to use a Cooper codes PNG that I have locally if you don't have a image on hand you can also go to the GitHub at the final version of this project and this Cooper codes image will be in there if you want so I'm going to take this image here and bring it over to my public folder right here so I have my Cooper codes logo PNG right here and this is important because that means we can use this image as the source for our component and so we can say the image source is equal to slash Cooper codes dot PNG and this is because images generally will reference this public folder when you're working with them in xjs13 open it has to be Cooper codes with the Capitals there it also wants a predefined width and height so I'm going to say the width is equal to 200 and then the height is equal to 200 as well it also wants an ALT for anyone using a screen reader or something along those lines so I'm just going to say Cooper codes profile picture so if we go over to our component and refresh the page you'll see that we have our card here which is just the profile picture a couple things I want to do just to make sure this actually gets aligned properly when we go and create other components is we can go down here and say class name is equal to justify Dash Center this is going to take it to the center of the row that it's in and then the rounded Dash large this is going to round the corners and just to make sure you might be using like a darker image we're going to use border Dash large so this is going to give our image a little bit of a border boom so we have a very basic idea of what our component is going to eventually look like now we can keep on making these Flex rows for every single row of content we have so for example on the next row we are going to have some styling for the name of the user so I'm going to make this a header to and I'm just going to call it Cooper codes also you guys don't have to make it be called Cooper codes I would actually encourage you guys to make your own little Dev card and it'd probably be more fun for you so we can apply some Tailwind text properties to any text in our application so for this one I'm going to say class name is equal to text Dash 3xo and then font Dash bold the interesting thing about working with the rows like we're doing is that we can add a padding to the top of the text so we can make some space between the text and the image so for the row itself I'm going to make a padding Dash top of two it's a subtle difference but now we can see there's a little bit of a gap between the text and then the image itself now I'm going to make these little things called chips which will show off attributes of a certain user just like how we use the card component if we want to use the chip component we can go into our command line and npm install at next UI Dash org slash chip so just like before we can go and then import that specific package so we can import chip from Chip so again I'm going to make another row so we can go in here I can just copy the row from above I don't want the padding top but inside of everything in this row I want to have a margin of four so there's some space in between each chip and also a gap of four this is going to add a margin and also a gap to every item inside of our row so if we add a chip like this and we say next js13 these chips and Tailwinds have different variants so for example I'm going to make it have a variant of Shadow a color of primary so it's just going to give us that blue color and also a size of small and so now if we npm run Dev again we can see what this first chip looks like and then we can add some more as well alright pretty cool so we have our first chip done now we can add some more super easily so we can go in here I'm just going to copy the chip like this and remember because we are in a row these are going to stack side by side with an emphasis on the center because you have the justify Center here I'm going to make this next one next UI and then we can add a final chip which is going to be YouTuber so if you guys are YouTubers you can add this one too or you could just say programmer or something else who knows all right but now it's actually going to show off some different things about the certain user just to add some content I'm going to make a little text underneath the Cooper codes here so I'm going to go in here and make another row for the little text we're going to make to describe a certain user so I'm going to get rid of the margin 4 and GAP 4 so it's just the justify Center and I want to make sure that this text doesn't go on for too long so I'm going to make it a Max width of a small and as you guys can see there's going to be about 384 pixels and that's coming from tailwind and I'm just going to make it a simple paragraph and it's going to be a class name of text Dash large text Dash Center to align the text to the center like it says there and also font Dash semibold I'm going to make a little description about myself so I'm just going to say I create software engineering tutorials I also make music in my free time boom there we go so now we have a little description of the user which is great now we can actually get into building those cards for every single link a user has and so now I'm going to make a column specifically for our cards to live inside of so I'm going to make a div class name is equal to flex Lex Dash call justify Dash Center and in between each cards I want to have a gap of four and on this row I want to have a padding top of four so kind of differentiating everything above with our actual links so for the links themselves we can use the card component again so we can say card like this for our cards I'm going to make them have a class name where it's going to be a width of full so it takes up the full width of the rows within our column and these card components are going to take one row up by default so that means they're going to stack up on top of each other and I'm also going to make them is hoverable which gives us some cool styling for when we hover it it's going to change the background and make the card look clickable and then inside the card body I'm going to give it a class name of padding-3 just to have some kind of padding around the link and then in H3 for the actual link itself so for example the first thing I'll link is to my YouTube and I'm going to make the class name of self Dash Center to Center this text to the middle of the card body and also text Dash large so now we kind of have this hoverable card which is super cool an important thing here is we are going to wrap this entire card around a link so we are going to use a simple a href link like this and we're going to wrap it around our entire cart and if you're confused as to why would we not use a next link generally next link is to take you to and from different areas in your own next.js application as soon as you link to an external resource you don't need to use something like next link anymore because you're going to be bringing the user to something that is outside of your next JS application so if I wanted to link to YouTube you have to make sure you have the full https link like this and then go to youtube.com Cooper coats and then the target is going to be underscore blank this is kind of the trick in HTML to enable it so when you click on a link it's going to open in a user's new tab so if we go over to our card here and then press on YouTube it's going to take us to the Cooper codes YouTube so boom subscribe if you guys want so we can now go back and pretty much apply this to any link we want so for a couple more ones I'm going to do my GitHub next so I'm just going to copy the entire link again and just do GitHub then make a github.com Cooper codes and then to show one more I'm going to do the code letter and it's going to be thecodelater.com all right let's go check these out one learning point here that I left in almost intentionally is that the card actually isn't completely centered to the middle of the screen if we inspect element we can actually start to figure out why this is happening so if we inspect element and go to our main you'll see that inside of main right here there's a bit of padding on the top so if you see that green on the top right there I can't really move my mouse to show you guys but there's green on top of our component that's not on the bottom of it right this is because this is coming from our layout and we can see it has a padding top of 16. and so this is going to make anything inside of our actual content not be aligned to the middle of the screen so if we go over to our layout.tsx and you'll see right here's what I'm talking about this main has a padding top 16. we can get rid of the padding Top by just doing this saving our file and now you guys will see our card is actually centered to the middle of the screen which is great news another cool thing we can use to make this component look way cooler is we can make a gradient background to find a cool gradient I go to this website called hypercolor.dev This is not sponsored for anything just for to get that disclosure out but it's a really good way to find interesting looking Tailwind CSS gradients and so we can apply these gradients to our background and make take our component kind of stand out so you'll see every single gradient has a bunch of different ways of how it could look the coolest one is radial Dash Center so if we go to radial Dash Center here you'll see it's going to look good for our type of component where there's something in the middle of the screen and so if you find a color you like or a different thing you like for example I'll just use the Gotham one here you can then press on the tailwind and it's going to copy over the actual Tailwind classes to give you that gradient background so inside of our main right where we got rid of that padding we can apply the background to this area so now I'm just going to copy paste what I got from that gradients website make sure to save our file and so one thing I'm going to do here is we'll see that inside of our layout it has a max width of 7xl I'm going to change this to a Max width of full that way the gradient is going to expand across our entire website and boom there we go we now have a decent looking gradient that's going to kind of show off our main component that we built here another thing is kind of subtle but shows off how you can make next UI look interesting is we can go over to our page.tsx and we can also give this card right here the initial card so the one that wraps around our entire content is going to be Shadow it's equal to large this is going to apply a shadow that's going to kind of show up subtly but bring more emphasis to the card we built so you guys can only kind of see it but it's going to give us a little Shadow behind the component and just to show off the functionality working here we go it's going to link us over to GitHub Cooper codes we can then press on the code letter here it's going to link us over to Boom the three minute coding newsletter and so hopefully this video was helpful in getting an initial understanding of next UI and also how to build things with the next UI components if you guys are interested in a more full project using x2i let me know in the comments otherwise thank you so much for watching

Channel: Cooper Codes

Views: 3,274

Keywords: linktree, linktree clone, ui, nextjs 13 ui, nextjs 13 tutorial, nextui, nextui 2.0, nextui 2.1, nextui tutorial, nextui nextjs 13, nextjs 13 nextui, nextui next.js 13 project, linktree next.js 13, next.js 13 linktree, next.js 13 next ui 2.0, next ui, nxt ui, next.js 13 ui tutorial, nextui 2.0 tutorial, learn nextui, tailwindcss, tailwind css, tailwind css tutorial, tailwind tutorial, tailwind, tailwindcss nextui, nextui taliwind, nextui 2.0 tailwindcss, tailwind next

Id: rMyx5XiYnxI

Length: 21min 3sec (1263 seconds)

Published: Tue Sep 19 2023