A second version of this course released using Next 13+, but this course is great if you want to see another example fullstack project. We now recommend you take the Build a Fullstack App with Next.js, v2 course.
Transcript from the "Adding the Logo" Lesson
[00:00:00]
>> What I wanna do is basically, just kinda mock some of this stuff up, obviously like these playlists, we haven't gotten to the database and the data yet, so we're just mocking these playlists out till we get there. The navigation stuff is static, it doesn't matter who you are.
[00:00:12] You're always gonna have the same links here, so we're just gonna hardcode that. But even then we are gonna hard code it, I am not gonna hardcode into JSX. I still want this to be data driven, even though it's static. So what does that actually mean? l will show you, but I don't really wanna hardcode into JSX because it's gonna be a list.
[00:00:28] That means I'd have to write one, two, three, four, five different things, when I could just write one thing, cuz they're all the same thing with different icons and different texts. So you'll see what I mean by that. So let's get started on the sidebar. First thing we wanna do is create the container for it and get the layout right, so I'm gonna return a box here, which is basically a dev.
[00:00:51] And let's give this thing a width. So because the sidebar is rendered inside of the player layout, which already has a box that which already has a width, I want the sidebar to be 100% of that parent. So in order to do that, I need to give it a width of 100%, so be 100% of your parent, which is 250 pixels.
[00:01:09] And from there, I'll also need to calculate the height. So let's think about the height for a little bit. Typically, you don't have to think about height, but because it's absolutely position, we do have to think about height cuz we want it to be full length, even though you might have 0 playlists.
[00:01:23] We still wanted to go from top to bottom, so we have to give it a height. But there's a player bar at the bottom, so we have to account for that. I remember us saying that this was gonna be 100 pixels. So I'm gonna account for that by giving the height.
[00:01:37] I'm gonna use calc and I'm gonna calculate this being 100 view height minus the 100 pixels of the player bar. So that's how I determine how high that is. And next thing is, I'm gonna give this a background, I can just put bg for short, and I'm just gonna put black because that's what it is in the design.
[00:02:00] I'm gonna add some padding to the left and right, I can shortcode that by saying padding x. So on the x-axis, that's what padding x is, it also has padding y. You can do padding, which is all four, the padding x is left and right, it's a shortcut for that.
[00:02:14] And I'm just gonna play around with it, so I'm gonna say 5 pixels, and then the color of the text is gonna be great, like that. So now we have a box, that's got the width of 100 height, all that good stuff. So now I'm gonna go back to our design, and you can see, yeah, it did exactly what I said it was gonna do.
[00:02:35] It's black, it's 250 pixels wide, it's 100 view height tall minus 100 pixels of the player underneath it. So this is what the player is going to render right here. So that's why there's that space here cuz we did 100 view height, which is the full height of the screen minus 100 pixels.
[00:02:52] So far, this is doing exactly what we wanted it to do. It's looking pretty good. And you can see that the color is gray for the text here. You can see I have the word js in there, and it is indeed great. If you're still trying to get the imports, don't worry about it.
[00:03:06] You'll import them as we start using them. The VS code auto imports most of this stuff, so you don't have to type them all in. I just wanted to narrate on why we had these in the first place. Typically, I wouldn't type them in all the top either cuz I don't even know I need them until I'm writing the JSX anyway, so that's just the process.
[00:03:23] Okay, so let's get cracking with this. The next thing we're gonna do is we're gonna make a another box here. Like I said, boxes are just divs. This first box is basically just gonna be like if you think of the one that we just made, that's the shell, that's the container.
[00:03:39] Now, this next box is gonna be where all the content lives, that way, we can separate the two. If we ever need to do padding for all the content at once, it's just really great to have this outer div that's the layout and have an inner div that's the content.
[00:03:52] And that way, they're separate. Whereas if you just put all your children inside of the layout, and you wanna add some padding, you have to add padding to each one of those individually. Whereas you could just add it to the content div and all of them will see that padding.
[00:04:04] So typically, that's just the way I like to do it. Yes, it adds extra divs in places like that, but it's so much easier to style in my opinion. So we're gonna have this box here. We're gonna put some paddingY, which is top and bottom. And let's play around with this number.
[00:04:21] We'll do 20 pixels. That's gonna be the padding on the top and padding on the bottom. And then the next thing we're gonna do is we're gonna make a div for the image that goes here, this logo here, so we need to make some. That's the next div we're gonna make for this logo here.
[00:04:39] So we're gonna do that. So I'm gonna make another box. Like I said, these nested divs. And we'll give this a width of, again, you kinda gotta play around with this number, whatever feels right, you have those design tools, they'll tell you the exact pixels that the designer made.
[00:04:54] We're gonna do some margin bottom cuz there are space underneath it, of like 20 pixels, and then a paddingX, which is left and right. 20 pixels is well, so we'll do that. And then I'm gonna import something from NextJS, I'm gonna call it NextImage from 'next/image', and it's just the image component that's optimized by NextJS.
[00:05:22] They do tons of optimizations on the image as far as like compression, and they allow you to hook into a CMS and add a query string too and do a bunch of crazy stuff. It's just, yeah, you should look it up, it's pretty insane. We're gonna be using NextImage to actually add our logo, so I'm gonna say NextImage.
[00:05:44] If I can spell, there we go. It's actually a self closing tag. So we'll do it like that. And then we're gonna give it a source and we'll get the image in a minute. And then what we're gonna do is give it a height. I'm gonna say 60 and a width of double that, so it looks like a rectangle, so 120.
[00:06:08] And then as far as where we're gonna get the image from, if you head over to the notion, if you scroll down, there should be a little logo here that says Trax. That's the image. That's the logo, I actually made that logo. So if anybody needs logos design, I'm charging, let me know.
[00:06:25] So we're gonna download this and I'm just gonna just call it Trax. I'm just gonna call it logo and call it whatever you want. So I'm gonna download this, put this in my downloads folder, and then I'm gonna go back to my code, open up finder again, go to downloads.
[00:06:47] I must trust you. If I'm pulling my downloads folder in front of all y'all, that means I trust you cuz that's dangerous, okay? Cuz you have no idea what's in someone's download folder, that's kind of scary. So I'm gonna grab this logo, and it's important that you put it in the public folder on the root of the project, it must go into public folder.
[00:07:05] So I'm gonna drag it there. You shouldn't have to optimize any of this SVG, I'm pretty sure I already cleaned up the fixed width and fixed height on it. So then as far as adding the logo, all we have to do is just say slash, and then the name of the file, which in this case, logo.svg.
[00:07:22] So I'll save that. And if we can't see it, it's probably cuz it's black. So let's go check it out, no, that's fine. And there you go. We have our logo, our nice custom Trax logo. Yeah, so if you are looking at this on a white background, you will not be able to see this transparent white logo.
[00:07:45] If you've never used those before, if you don't know how to do this, you can go to notion. You can click on settings and you can click on appearance so you can change the appearance here. Or you can just hover right after this screenshot and before this screenshot.
[00:08:01] It's right here, it's just invisible, sorry. Any other questions on that?
>> Sorry, [INAUDIBLE] questions and maybe it's just to dig into the next image. But why are we setting the height and the width not as in quotes, I mean, the curly brace?
>> Yeah, great question. The question was, why are we not using height and width as we normally would with styles up here, like this width?
[00:08:27] Okay, so let's talk about this. So with these components like box and all these components in chakra, they have all the CSS properties enumerated as react properties and you can use them however you want. The next image component has no affiliation with the chakra UI component lib, and does not have the same functionality.
[00:08:49] But they do happen to have the same name as in height and width. But if you look at the docs for next image, it actually prefers you to just add in a value here. In fact, it actually won't even work, unless you put a value. That's the only way they can optimize this image if you tell it what the size of it is, and that's how the optimization happens.
[00:09:06] And I would imagine they probably don't care about pixels because they do that anyway, they just add it for you. But this is what the next image documentation recommends, is doing it this way. So yeah, you couldn't do all this really cool stuff like this on this image.
[00:09:22] But I think maybe you might be able to use SX on every single component. But then TypeScript wouldn't like it, yeah, so yeah, it's not chakra, basically.