Introduction to Next.js 13+, v2 Introduction

Transcript from the "Introduction" Lesson

[00:00:00]
>> How's it going everyone? I'm Scott Moss welcome to Intro to Next.js v2. Very excited to be back here once again with the folks our frontend masters here in Minnesota. Even though I said I'll probably never come when it's snowing again, but [LAUGH] here I am and honestly this time it's not that bad.

[00:00:17] I guess that means I've been here long enough to where I kind of just warmed up to it. I'm kinda used to it at this point. And I dunno, the snow was a really good break from it just being dry all the time in California. So yeah, Intro Next.js v2, this course is, I mean, it was always gonna happen, but I think a really big push for this course was the recent announcement of Next,js 13, which was a breaking change.

[00:00:43] You know, maybe it's really just a completely different way of thinking about how to make applications in general not just upgrades to a framework, but just like upgrades to a mental model. Really. There's a lot of changes in this framework. So I spent a lot of time building in it, talking with the folks at Versailles, talking with the folks working on Next.js, talking with the folks on the React team.

[00:01:04] Just trying to get a good sense of where the future is for some of this technology. So I baked all that in, and I'm bringing it to you all in the form of this course. So if you don't have any experience with Next.js, that's totally fine. That's what this course is for.

[00:01:20] All I ask is that you have some experience with JavaScript and hopefully you have some experience with a framework, typically something like React, because Next.js is based off of React if you didn't know, but we'll cover a lot of that stuff. Okay, so what you can do is you can go to this URL here if you want to kind of look at the notes and follow along.

[00:01:43] The notes are mostly a guide for me to keep me from rambling up here all day and talking about stuff I shouldn't be talking about because it might be too advanced for this course or stuff like that, because I can just talk all day. So they're mostly for me.

[00:01:55] But if you feel the need, totally look at this stuff and you can follow along. But we'll mostly be spending our time in the editor today, walking through some examples, trying to build something out of all the lessons that I'm walking through, the new techniques and practices and APIs that we're going to be talking about.

[00:02:11] But yeah, if you want that, you can follow along here. I'll be having it on screen, so you can follow along with me if you want. So I guess a little more about me, if you don't know me. I've been an engineer for over a decade now and recently.

[00:02:25] And since then, I've done a lot of things, I've started companies, done open source, things like that. And now transitioning over to being an investor. I'm a VC now, but I still write code all the time for fun. So it's no longer my day job. But as you can tell, I just can't get away from this stuff.

[00:02:44] It's just really cool. And a lot of my stuff that I do at my job is evaluating technical pitches anyway, so I still see code every day it's just I'm not always the one writing it, but this stuff is very interesting to me, so I like to stay up to date.

[00:03:00] But yeah, like I was saying, this next day ask course, I'm super excited about it. I was telling Mark that there's so many new things in Next.js 13 and React 18 that I've just like, I wouldn't say struggling, but I was just trying to make sure I was finding a way to Introduced the topics in a format that would be digestible, for this course while not getting into the weeds of like production quality optimizations that can be saved for something else.

[00:03:26] So, if you have questions, if you feel like I'm not going deep enough on certain things asked those questions. And it's probably because I feel like it was out of scope of this intro course. So, and also some of these patterns are still developing. Next.js 13 is still somewhat in beta, it's still relatively new.

[00:03:44] So a lot of opinions and things are still being fleshed out. But we could talk about those things and have discussions about them.
>> What would you say as far as people taking version one of the course if they're using prior to Next.js 13, if they're using Next.js 12 or earlier, should they take the first version of the course?

[00:04:04]
>> If you are using Next.js 12, you will probably get better benefit out early version of the course. There's a lot of crossover that we'll be covering here. But if you want to talk about specifically just what's Next.js 12, then I think the first course might be better.

[00:04:21] If you wanna go to 13 and beyond then you probably wanna watch this course. Yeah, that's how different those two versions are. They're completely different. And you'll see why. But like I said, there is some crossover when it comes to how Next.js handles its conventions and configurations. But there's some things that they can't help because React itself was updated, so, okay.

[00:04:44] Yeah. So some of the things we'll be covered. Covering creating pages using the app and pages directory. If you've used versions of Next.js before 13, there was no app directory. There was only pages directory. But now there's an app directory. And it kind of works the same, but it does not work the same.

[00:05:02] It is completely different, but also kind of the same. You'll see what I'm talking about. That's where all the magic is. But we'll be talking about that and the differences between them. Server and client components, how to use those together, this is one of the biggest changes introduced to React is this whole mental model and concept of server first routing server components which is way different than server side rendering so if you ever heard of SSR You might be thinking like, yeah, I know what server side rendering is.

[00:05:30] This is not that. This is something completely different than server side rendering. And we'll talk about that, but we've gone over it. Fetching data on the server and the client side, which Next.js has had support for in the past, using things like get static props and get server side props and things like that.

[00:05:49] Okay, that's gone. Data on the server side and then the client side is as you'll see it's kind of mostly the same. We'll talk about configuration. So how do we get the best out of Next.js? Up to a point we probably won't get into like how to optimize for production and speed things up and stuff like that.

[00:06:07] We'll figure out how to at least tweak some things if we need to. Styling, that's important. We can't make apps if they don't look good. We've got to make them look just like those pixels those designers give us. So we'll talk about all the different ways you can style your components, which there are some caveats when using server components and trying to think in a server-first mindset.

[00:06:27] And how CSS interacts on the server when there is no DOM and all that stuff. So there's a lot of things you have to think about and then many, many more or whatever you guys ask me. So pretty much. Any questions on that stuff? Yeah, Mark?
>> Will you potentially be looking at edge functions versus API routes at all?

[00:06:47] That's a great question. So I do not plan on covering edge functions and API routes, but I can definitely talk about it because there really isn't that big of a difference between the two. So if we get into when we get into the API functions and stuff, I'll talk about the difference between those two.

[00:07:06] But for the most part, there really isn't a big difference on the runtime the different types of runtimes that Next.js allows you to have because the code is mostly the same unless you're doing some crazy stuff so