Introduction

[00:00:00]
>> All right, every one. How's it going? Everyone from around the world. My name is Scott Moss. And I'm going to be your instructor today for our version three of Next.js, which, if you've taken the last version, you know we recently just updated it. But Next.js also just had some really big updates too.

[00:00:17]
So I felt like it was worth and the updates were substantial enough to do another one versus waiting. So I wanted to get that out me and the Frontend Masters team. So that's what we're doing. Cool, okay. Well a little bit about me. My name is Scott obviously.

[00:00:32]
I've been an engineer for a little over ten years now. Before that I was in the Navy where I fixed helicopters stationed down in San Diego. It's a beautiful job. I don't know how I got so lucky. But yeah, engineer for almost ten years now, worked at tons of companies up and down the Bay.

[00:00:49]
The last engineering job I held was at Netflix. I was a senior engineer there. Did all types of stuff at Netflix. Worked on the Smart TV app. Netflix lets you do whatever you want, so I did whatever I wanted. It was really cool. But now currently I'm an investor at a firm in San Francisco where my job is basically like Shark Tank.

[00:01:07]
I just, I take pitches all day like technical pitches. So it's really cool to do a lot of AI pitches and API Dev tool pitches and things like that. But still spend a lot of my free time writing curriculum, writing code, building things on the side, keeping my technical skills sharp.

[00:01:24]
One, because it's just a personal passion of mine. But two, it actually helps me with my job to be up to date on these technologies when I'm talking with these founders. That way I know what they're talking about. And I'm not fooled or tricked or anything like that.

[00:01:36]
So I also love things like, games, sneakers, basketball, anime, stuff like that. So if you're into some of that stuff and want to connect around any of that, let me know. But other than that, I'm just your typical engineer that just stays up till 4 o'clock in the morning writing code for no reason.

[00:01:53]
So that's kind of where I'm at. So yeah, this course is, it's in the title, right? It's an intro to Next.js V3. We have had so many updates over the last six months that have come out to Next.js in the form of Next.js 13. I think when it first came out, when Next.js 13 first came out, there were a lot of like beta features that people just weren't sure if they were gonna get brought into Maine and the APIs are gonna remain the same.

[00:02:24]
But now they're no longer beta, they're part of the actual framework. So we're gonna be covering a lot of that. And just to put it out there, Next.js has tons and tons and tons of functionality features. We just won't be able to cover all them today. It's just impossible.

[00:02:44]
It will take like a week to cover everything in Next.js and that's as you'll see most of it is actually for more advanced apps when you go into production and collaboration and teamwork. But the foundational stuff, that's what we're going to be covering. So you'll have the foundational stuff.

[00:02:59]
Next.js has really good docs. So you can go follow on the docs and we'll take a look at the docs and go over things like that. But I just want to make sure you have a really good foundation on like pretty much everything you would need for any Next.js app no matter what you do.

[00:03:11]
And go for it from there. The other caveat is that with Next.js 13, there's a new way to make a Next.js app. And we'll see what that version is. But the previous version, there was an old way to make the app. So if you are part of a team using the old version of Next.js, some of that stuff is not gonna be taught here.

[00:03:30]
Because I'm only teaching the new stuff going forward. Because that's what the Next.js team is pushing. So we'll talk about some of the older ways. But we won't be demonstrating. And there's no curriculum built around it. I'm totally down to have a conversation about if you have experienced working on the older version and you have some questions of how it might relate to the newer version, let me know and we can we can go over it.

[00:03:51]
Cool, so a couple things if you go to the notes, should get you here. It's a, so these notes are, honestly, mostly for you all, if you've ever taken my courses you know that I just prefer just to hop in editor and just make mistakes and do it live.

[00:04:05]
That's just kinda my style. I just have to do it that way, I can't follow along. So these ones are mostly for you all, but everything that we'll be covering will be in here. You see I have two links here. One is just a link to shortcut you to the Next.js documentation, which we'll be referencing.

[00:04:21]
I hope you'll be referencing because again, there's just so much amount of information in this framework and we're not gonna cover everything. But the other one is the actual repos. If you click on that, you can go check it out. Highly recommend using this to as a reference for the code that we'll be writing.

[00:04:38]
If you feel like you might be falling behind, if you just want to look ahead, however you wanna reference it, it's there, it's always gonna be there. So take a look at it. I'll be doing everything from scratch in this course and I'll probably be doing it very similar to what's in the repo but not exactly one for one.

[00:04:56]
Because I'm just random and I just do things differently every time I write code. I don't remember any of this stuff, I just do it again. So that's kind of how my style is. But yeah, so the other thing I just wanted to talk about is what I think you would need to know to get the best from this course.

[00:05:14]
So one, having a good understanding of Node.js. So that doesn't mean you need to be an expert at it, but maybe if you've taken an intro course to Node.js, that's probably good enough, or if you've just built the Hello World app in Node.js, that's probably good enough. That also includes if you've ever built any front-end app that uses a framework like React, or Vue, or Svelte, because they all use build tools that are based off Node.js, so that's probably also good enough.

[00:05:40]
And then obviously you need to know JavaScript. I'll be using TypeScript in the course. You do not need to know TypeScript. All the types are optional and I never used them. So [LAUGH] you won't even notice it. But I'm just using TypeScript out of the box cuz it's just easier to work with these days.

[00:05:55]
And then the last thing is, I would say, probably a decent understanding on what the difference between servers and clients and just basic networking with HTTP and kind of how that works. Maybe to the point of like, you know how to make an API call, like that's it.

[00:06:09]
Anything beyond that I'm not expecting you to know, TCP and WebSockets and DNS level things. Just like I know what API call is. I know what a server is. I know what a client is. Because it's going to get kind of crazy in here when we talk about some of the new features.

[00:06:25]
And I'm very curious how people react to it. Because when I saw some of this new stuff, I was just like, what's going on? So it's gonna be pretty cool. Okay, let's just take a look at the finished app. I didn't focus on style here. It's not gonna win any awards, and that's intentional.

[00:06:42]
We're focused on functionality. But basically, it's a to-do app that's just composed of three things. So you have a home page where you can put all your home stuff. We have a documentation page where we can write documentation about an API that we're gonna have. And then the actual app, which is just a to do app that allows you to like create to dos and it just list them here for you.

[00:07:05]
It's basically that. So it seems simple on the surface, but if you've ever built a to do app, you know you can expand that to create some complicated, I mean, you can make Evernote [LAUGH]. That's an app. I don't know about Evernote, it's a thing but it's a billion dollar company, so it happens.

[00:07:20]
So we'll be basically be building this using the latest features from Next.js. Also we have a full stack course that I teach using Next.js and this will literally transition right over to that. So in that course we will actually build a sophisticated, nicely designed ready to go production app that you can deploy and hopefully, my goal with that one is that you'll be able to use that app every day.

[00:07:45]
It'll be something that you actually enjoy. So that's a more ambitious one. But you need to know this foundation before you can do that and that course is a lot faster. We moving a lot faster in that course. We talked about this already but the last thing here is just like how to best take this course.

[00:08:00]
So like I said, I'm going to be giving some high level overview about some topic. You might see me break away and just like demonstrate some code about that topic unrelated to the app that we're making. And then it'll be like, okay, now I'm ready to like apply this to the app that we're making.

[00:08:15]
So basically what you can do is you can listen as I'm doing those first two steps, when I'm giving an overview. While I'm demonstrating how to use it in the code, and then for the third step where we actually apply it, you can follow along on your machine and copy it or do it your own way.

[00:08:29]
Or just feel free to follow along whenever I'm in editor, but I will be doing a lot of code that I'm just throwing away just for demonstration purposes. But I will let you know which code is like, I'm just testing this out. I'm just showing you versus like, no, this is for the app.

[00:08:40]
You should pay attention to this. So you don't have to worry about that.