Build a Fullstack Music App with Next.js Create a List Nav with LinkBox

[00:00:00]
>> So cool, we got the next image. Now what we wanna do, let's look at our design here. And we wanna get these initial navigations done with our icon. So this is where the list thing is gonna come in. And this is where I said, yeah, we do need to hard code this data but not so much in the JSX.

[00:00:15] Because I don't wanna write, a list item and a list icon and then some text times, in, right, I don't wanna do that. So instead I'm gonna just make some data up here, where I'm gonna put the menus and then we can map over these menus. And just write one component I don't like doing all that.

[00:00:34] So we're gonna say const nav menu. And this is gonna be in an array. So if we kinda look at this, it looks we need an icon we need I don't know a name or text or label or something like that. And then what route you wanna go to when you click on it so that's what an app menu item looks like.

[00:00:55] So in this case I'm gonna say name is gonna be, home icon is gonna be the end home, one that we import a top. And then I'm gonna say routes. When you click on this, well, it should just go home. So I'm gonna do that. I'm gonna copy this, and I'm gonna do the same thing for what is it called?

[00:01:17] Search. So search, and this one is Md search and this one should go to slash search. Same thing for the last one this one's called library or is it my library your library excuse me your library. And this one I think this one's gonna be the MD music.

[00:01:39] Which one is this? I imported it in the music library. So that's so specific, [LAUGH] why does material design have that? I don't know. And it was called this route library. So cool. We have our Nav menu. And we'll just enumerate over that now. So, outside of this box where we have our image we're just gonna make a another box right here inside.

[00:02:09] So this is the content box this is the image box and then underneath the image box but still within the content box. We wanna make another box for this menu. There we go and then we'll just add some margin bottom to this one and I'll tell you why.

[00:02:28] So margin bottom kinda just won't play around this number again I'm just gonna put. I don't know 20 pixels we'll see what looks good the reason I'm doing that is because if you look at. This list that has three navigation items in it there's a space and then there's two more.

[00:02:45] So that margin bottom has to account for that space there. That's what it's two groups of menu items. I guess you could just put them next to each other. But then again, your designer works so hard to put that space there. You should do it too. Just you wanna make a designer's look good.

[00:02:59] So, make sure you have that space. Okay, so now that we got that, I'm gonna add a list. Company component like that. It's really cool because it takes this spacing prop. That tells you how much space you want in between each list item, and it's just a number.

[00:03:16] I'm just gonna put two cuz that's the one that worked for me. So I'm just gonna put two here. I think, who knows what they're multiplying by. That might be times ten. So maybe that's 20 pixels. Or times five and that's ten pixels. I don't know, but look at the.

[00:03:29] Don't go off of that. So that seems to work pretty good. And then now I'm just gonna iterate over nav menu, so nav menu.map. I'm gonna get a menu item here. And then for each one of these, I'm just gonna ender a list item, right? So I might do a implicit return, on multiple lines, which means I can do parenthesis here.

[00:03:53] Followed by squared curly bracket and then hit enter that way I don't have to put the return keyword. That's kinda confusing that's the same thing as literally putting the curly brackets and then putting the return. And then putting these parentheses so that was a lot more code and that's why I didn't do it.

[00:04:10] So I'm just gonna go back to doing a implicit return what the parentheses because it's gonna be multiple lines. And then brackets actually I don't need brackets because I'm gonna return a component. So, then here I'm just gonna say let's title. So, and inside this list item, this is where we gotta do a bunch of funky stuff.

[00:04:34] So the first thing is let's style this list item. And we're gonna put some padding X on it. X which again is left and right. And again, when it comes to this spacing, you really just gotta play around what it's. So this is gonna be 20 pixels when change the font size, so we're gonna bump this up a little bit.

[00:04:50] We'll make this 16 pixels. We're kinda hard coding all this stuff. And then because we're iterating over something and reacts, it prefers if we give each item a unique key. So it can track it for optimization purposes. So, what's unique about these menu items? They all have a different name.

[00:05:09] So I could just say, menu.name as the unique element here. If this was something from the server, you put the ID or underscore ID or whatever. Because each list item is gonna be clickable, as in it can route somewhere, we need these to be links. But I want the whole list item, to be clickable and not just the text and the list item.

[00:05:31] So I'm gonna use something called the link box from Chakra UI that literally does that for us. So we'll just use the link box here and then what we're gonna do is we're gonna use a component from next AS. For the actual link, so I'm gonna import. I'm gonna call this next link from next link.

[00:05:52] And the reason we have to do this versus a regular anchor tag is because if we use a regular anchor tag when someone clicks on this. It's gonna go to the server make a request when the server was gonna render from the server. And it's not gonna do client side rendering.

[00:06:05] That's not actually what we want. That would not be a fun app. I mean, your music will basically stop playing. So we want client side rendering after the initial server render. So by using the next link, we're opting into client side rendering. So inside this link box, I'm gonna say next link.

[00:06:27] So and then it's gonna take a H ref. In this case, the H reference is gonna go to wherever the route was. So in this case, menu dot route, and then we've got this thing called pass H ref. This just means if you have an anchor tag inside of an, if you have a custom component.

[00:06:54] Or an anchor tag inside of next link it's gonna pass the h ref that you gave it to its child components. So it's symantec and everything works just fine. And we actually are gonna use a another custom component that does require an h ref. And it's called the link overlay which comes from chakra UI.

[00:07:16] So this pass h ref is gonna take this h ref and pass it to this link overlay here. So we don't have to and then finally inside of this link overlay I can do another component. Which is gonna be the list icon so I'm gonna say list icon and I can use the property called as.

[00:07:38] So what icon do you want this to be? You could put, text in here and opt into chakra UIs icons that it comes built with. But we do not want that. We are gonna use the icons from the ones that we imported from react icons. And in this case it is gonna be menu dot icon, whatever that thing is.

[00:07:55] We are gonna make sure that it is white somerset set color whites. And then I'm gonna add some margin rights to it so it has space between it and the text. And I'll just be 20 pixels and actually this is self closing so we don't need anything between it.

[00:08:16] And right underneath that. Is this gonna be menu dot name. And that right there should give us a somewhat close version of the menu of the design. And as you can see, it does look pretty close to the design, that we have. One thing I've learned about working on you eyes is that you're just gonna have a lot of deals.

[00:08:45] Right? We're really, [LAUGH] really good. You guys actually have a lot of deals because what I found out is that. You really wanna get good at positioning things and putting them in the right place. And it's a lot easier when you have containers around everything. So actually a lot of the HTML or in this case, the JSX that you write are just gonna not serve any purpose other than to be a target.

[00:09:06] To which you can style on to actually target its child or its children in this case. So, I wanna move this group of things. Well, you got to wrap it in a div will only remove these two things in this group. We got to wrap those two things in a div and it's just a lot of that stuff just being able to control.

[00:09:22] Where you position typically means wrapping whatever you wanna div seeing do I go in. And do some objects like this, or do I go in and just, repeating myself and writing this code? Me personally, if I have to do it more than once I'm gonna turn it into data.

[00:09:44] And at the same time, if it's someone other than me working on this project, I'm gonna turn it into data. Because now all I have to do, especially if this this was, imagine if you had a file. They just had a file called menus and it was just all the menus in there.

[00:09:58] If someone wants to add a new menu item all they have to do is just go into that file add a new object. They don't need to know where in the code this has been rendered they don't know they don't need to know the solution. And six other components.

[00:10:08] They don't need to know the styling. They just got, I know it's a favorite icon I know it's called favorite and I know it's gonna slash favorites. So I'm just gonna add that object and that's it. Anyone can do that. So for me, I would always do that.

[00:10:21] And also it kinda makes it really easy to test because now when you wanna write test. To make sure that all the right things are on the page. You don't have to test that each menu item got put on the page, you don't have to test that a menu item got put on the page.

[00:10:36] And then you only gotta test that this has the right items in it. So it's so much easier to test an array with objects and then it's, let me go look in the DOM and query for ten things it's kinda annoying. So, yeah, me personally, if yeah, I would just read it, put it in data.

[00:10:52] I mean, that's what react and most front end frameworks were created. Is to do this is to be data driven. Whereas before, we were all driven by, putting state in the DOM and you had all this big spaghetti code with J query. Which people hate on J query is also pretty dope at the same time.

[00:11:09] But anyway, yeah, that's what this is supposed to do. So I take advantage of the framework, it wants you to do this in my opinion. So, how does next image optimize performance? It depends on the type of image that you import. So whether it's an SVG, or PNG or JPEG, but there's different optimization packages that people manually do anyway.

[00:11:33] If you have web pack, you can use a, what's that SVG optimizer? For the name of it. There's a very popular SVG optimized that you add to web pack. And it'll basically trim all the unnecessary stuff in your SVG file. It'll get rid of certain things. It'll try to inline it.

[00:11:49] So the next image will try to do that. It will also try to just get rid of unnecessary if you have like a JPEG or something like that. It will try to get rid of the metadata that's in there that's not associated with it. Geo location stuff that might be associated with an image that you might take on your iPhone, things like that.

[00:12:07] And then it also works with most CMS is because if you use the image from a CMS it most of the CMS is allow you to. Transform the images on the fly through the CDN by adding things to the query string. Next JS supports that functionality with a plugin.

[00:12:26] So it does a lot of that. I'm sure it does more than just that. But it's just their version of that a lot of frameworks have their own image tag. Gatsby has one that does something very similar. You don't have to use it. But I recommend you do use it.

[00:12:42] It also helps with the responsiveness. So I think it actually creates different sizes for you at different resolutions and things like that if you pass the appropriate props. We're not taking advantage of it fully by just using a HREF and our SVG was already pretty much cleaned up by me.

[00:12:57] So I don't know how much optimization is doing for our logo. But yeah, you should probably use it all the time. I would recommend it. But you have to know the width and the height in order. So I guess the only time you wanna use is, I don't know the width and height I'm gonna change this and CSS so then you.

[00:13:12] I guess you wouldn't use next image but yeah if you knew that then yeah use next image. So far this is what it looks like I mean if we just compare the two this looks pretty good. In my opinion it looks looks pretty good there is a hover effect here.

[00:13:27] We can get to that. Maybe that is not so exciting. So I don't know. But it works. I'm not gonna click anything because it's gonna break if I go but you can see that. The if you hover over that the browser is telling us that they are actually gonna those places.

[00:13:41] So pretty cool.