Introduction to Next.js 13+, v2 Creating & Styling the Home Page

Transcript from the "Creating & Styling the Home Page" Lesson

[00:00:00]
>> Here comes the final challenge. Now that we've learned all there is to know about getting started with nextjs, we're going to attempt to build our own blog/personal website as quickly as we can, and tying all those things together. So, follow along with me. So, what we're gonna do is already have something for us here on GitHub, you can follow along with me there.

[00:00:23] So I'm gonna go to that, which is intro nextjs-app. There we go, all right, so I'm gonna go there. And you can check out the blog-start-branch. So the blog-start-branch is pretty much what we get when we started at the beginning, which is like what next Create App gives us when we scaffold it, but I just taking away all that stuff, so we can just make our own thing.

[00:00:50] So please, clone, fork, pull that down locally, and that's where we're gonna start. What we're gonna do now is we're going to walk through and try to build small scale apps, it's not gonna to be crazy. We're not gonna use a database or anything like that. It's just gonna try to combine all the skills that we did.

[00:01:06] There's no right there's no wrong, follow along, interpret however you want. And I'll kinda narrow it along the way. So as a starting point, clone this repo here, which is basically just what you would get if you did create Next app and then deleted all this stuff that it created?

[00:01:22] This is basically what this is. So, let's do it. Let's follow along and try to make it out. All right, so first thing first is we have our homepage route here. It just says hello, we have our layouts here. It's not really doing anything, and then we have this head tag.

[00:01:40] So first thing is let's create our new routes. So we'll make a folder here for, let's just say for a contact form or something like that. And then we'll make another folder here for blog, where our blogs go. And inside of here we'll make another folder for all of our blog posts that we'll use slug for.

[00:02:02] And inside it there we'll make a page.tsx. And then for the blog itself, we'll make a page.tsx for all the blogs. So we got all of that. And for the contact, we'll need a page.tsx as well. There we go. So we got all of our pages Yes, save that.

[00:02:24] Thank you. Let's start with the homepage. So the homepage, homepage is where you just talk about yourself, show off your profile, things like that. So we'll just keep something like a full page. Just talk about ourselves. This is me, this is what I do. Here's some links to my projects.

[00:02:40] Here's my blog. Here's how you can contact me, and we'll just link off into that, right? Now, so let's do that. So we have this div here, we'll make another div. And the way that I'm thinking about doing is just like making it full screen, and just say, hey, this is my name, here's my blog, here's how you contact me.

[00:02:58] Basically keeping it super simple. So we'll do that, I'll put that div there, this will be here before our name This will be for like our blog and this will be for like contacting us. So, nothing crazy. Something like that. Obviously, this isn't gonna look good, so we got to add some styles.

[00:03:19] Let's get some styles in here. So we could just use Global styles, but that'd be gross. I don't wanna use Global styles to just style this one page. So we'll make a module. So what we can do is, for the module, we can put it in the app directory, we can put it in the styles directory.

[00:03:35] There's no wrong here. I'm just gonna keep everything in the styles directory cuz I don't like cluttering up stuff. There's nothing wrong here. You can do whatever you want. So I'm just gonna say home.module. .css, and I always make a thing for the home. I'm gonna say this is height 100 vh, width 100 vw.

[00:04:05] Background, [SOUND] black, like dark mode. The screen hurts my eyes. [LAUGH] We'll do that, and then we'll go into our page, and we'll import those styles. So we'll say import those styles [SOUND] from [SOUND] styles/home.module.css. And we'll just add them here ClassName=styles.home like that. Now we go check it out, see what broke.

[00:04:45] We gotta reset that build. Go back here. Here we go. And obviously we need a reset here. So let's get a reset in here. We'll just make one from scratch. Inside of our global, we'll just say, body, html, margin: 0px. padding: 0px. And it will import that global in our layout.

[00:05:21] [SOUND] Just like that, cool. And they're still some funky CSS thing going on there, but that's totally fine. All right, so got that. Got our page. Obviously, add some more styles to the home module. Let's just make sure that the color is white for the text, so we can actually see it.

[00:05:50] There we go. And then what we'll do is we'll say display: flex, justify-content: center, align-items: center like that, easy. And then we'll just say this Hi, or it lets us do it. Keep it semantic [SOUND] Scott Moss, something like that. Super excited, there we go, look at that.

[00:06:24] About to get a job already. That's my name. And you can say, check out my blog. So this is gonna link to our blog. So what do we need to link to our page?
>> Link component.
>> Link component, yeah. So Link, and this will be Check out my Blog.

[00:06:46] [SOUND] And then we can say href to where?
>> /blog
>> /blog, exactly. There we go. So we got that. Check out my blog. And yeah, there's no component there and so it died. We have to make a component here, but the link works, sweet. And then for a contact, pretty much the same thing.

[00:07:13] We can grab this and we can say, contact me. Hey, Boom, so we've got our links. They look ugly, but that's the whole point, we wanna give off that hacker news vibes. So that's [LAUGH] what we're trying to do, that's the whole point It makes us look like we know more than we actually know.