Introduction

[00:00:00]
>> Scott Moss: How's it going, everybody? And welcome to Intermediate Next.js, I'm your instructor Scott Moss. I've been fortunate enough to kinda been there in the early days when a lot of these frameworks were coming to fruition and worked with some of the teams that created these frameworks. So I've just been involved on the low level, early on and even now in my career, I'm still involved as much as I can.

[00:00:19]
And then when it comes to Next.js, I've been there since day one, I love the Vercel team. I've been using them since they were called now, and then Zeit, and then now Vercel. And Next.js has pretty much been my go-to framework before it was recommended on the React docs.

[00:00:33]
So I'm kinda OG Next.js. And this course is just like a further extension on the intro course of our time talk. If you haven't checked out that intro course, and you're looking to get started the Next.js, highly recommend checking that one out first. Because this one is expecting you just know a little bit about Next.js.

[00:00:51]
We do get into the weeds here a little bit. But if you haven't paying attention to anything Next.js related, you know that they've had some major updates in the last year and a half on their side. But also because there were a lot of downstream changes from React.

[00:01:05]
Even with the new React version 19 coming out, there's a bunch going on. So a combination of those things, the Vercel team decided to create some somewhat controversial features, I would say. I mean, because they were just hugely breaking changes. But I think once you learn the patterns, and you adopt them, you come to realize the beauty and why they made those changes and how you can take advantage of them.

[00:01:27]
So in this course, I wanna talk about that, right? There are a lot of unsaid patterns that I've learned from using Next.js in production for some time now that aren't in any docs. Some of them are my opinions and things like that, but a lot of them are just what the community have developed over time since some of these new features have come out.

[00:01:48]
Let's walk through some of the resources of the course and kinda just get our bearings, and then we'll hop into it. So first things first is, there's a repo here or my GitHub. My Github is this. It's named after my son, Hendrixer, and the course is intermediate-nextjs. So fork and clone down that repo.

[00:02:11]
In the read me, you'll find a link to the course notes. So these are the notes that we'll be following, I'm just gonna hop into the session 0, talk about the intro here a little bit. Just to recap of what Next.js is, again, I'm assuming you've at least built a hello world with Next.js, hopefully, with the app directory.

[00:02:28]
If you haven't built anything with the app directory, that's fine if you have experience with the pages directory, but I won't be going over. I won't be doing a tour of, here's every single thing with the app directory, that's gonna be in the intro course. So I walk through that thoroughly, I hold your hand and walk you through that.

[00:02:44]
But this one is just assuming you've at least built something with the app directory. But I think if you do have extensive experience with the pages, you'll probably be fine here, just ask questions along the way. So Next.js framework on top of a framework built by Vercel. It's basically, I like to describe it as the rails for React.

[00:03:05]
It's just a bunch of opinions baked into React. And if you go to the React Docs as far as getting started, it's the recommended framework. It's literally the number one framework to use. I think it wasn't even that long ago, where they recommended use create React app. And now, I don't think they mentioned that anywhere.

[00:03:23]
It's like at the bottom sermon, we also have this thing called CRH. Maybe if you wanna check that out, but for the most part, it's really gonna be Next.js. And just to see how far along they've come, if you just go look on their website and look at who's using it, you have copies of all sizes, and, I mean, OpenAI uses them for so much stuff.

[00:03:43]
It's just incredible what they've been able to achieve with the framework and such a fragmented landscape when it comes to front-end JavaScript. So I'm still just impressed that they're able to do that, and I'm just a big fan of it. So here's some of the topics we're gonna cover.

[00:03:59]
>> Scott Moss: It's me just spitting out a random list of all the things that I know we're gonna be talking about. So server actions and mutations, so if you've tried to use those. I know in my intro course, server actions and mutations, you had to enable them because they were not enabled by default.

[00:04:14]
And I think in that course, I said, I don't use these. And it wasn't because it was experimental. It was cuz I just couldn't find a good use case for them. I was like, why would I do this? I could just use a route handler, okay, that is not the case anymore.

[00:04:26]
I pretty much always use server actions and mutations, now you'll see why. And rarely do I use the route handlers for a lot of things. We'll talk about form actions, which are really cool. Some special hooks that come with that, transition hooks. Middleware, which is not really new to Next.js 13 plus, but it's very useful when you think about different environments like Edge and things like that.

[00:04:50]
How to do things like protecting your routes with authentication, it's way different. Server component data fetching, caching server components data, memorizing server side data calls, caching revalidation, streaming and suspense error handling, parallel routing, route matching and a lot more. There really is just a lot in this course, this might be one of the most extensive courses I've taught.

[00:05:14]
So it's gonna be a lot packed into this one, so if you're looking in the looking for a wide net of covering things, this is the course. We're talking about the prerequisites, you know JavaScript, you know React, you build some things in Next.js. As far as the format, it's pretty much similar to how I teach most of my courses.

[00:05:33]
I'll introduce a concept, I'll talk about it, most of it will be in the notes. I typically kinda wanna make sure I'm saying the same thing that the creators are saying, but in my own words. So most of those lecture notes are just my interpretation, what the docs are saying, and then from my experience.

[00:05:48]
But for the most case, a lot of that information is gonna be on the docs. And then I kinda walk through that interpretation of, yeah, this is what this means. Here's some gotchas, stuff like that. And then we apply that to something practical, and then we just do that on repeat, until we finish the things we wanna talk about.

[00:06:05]
Yeah, before we get into the course, so let me show you what you're gonna be building so [LAUGH] you know what's happening. So we're gonna be building an event app where you can make events and have attendees, RSVP and things like that. It's called party with a D.

[00:06:20]
So that's what we're [LAUGH] gonna be building. Right now, here's the sign-in form, we need to figure out a couple things to enable this. So I'm just gonna sign in with an account that I think I have already, let me see. Cool, yeah, here we go. So you get to this dashboard.

[00:06:36]
This dashboard is just like a combination of a bunch of stuff that kinda shows you your current RSVS that you have, the latest events that you created and what their statuses are, and then total attendees across all your events as a number. So this is quite interesting how we're gonna make this.

[00:06:52]
I'm very excited to explore all of this.