Welcome to Pro Next.js

00:00 >> Welcome to Pro Next.js. I'm really glad that you chose this course to learn Next.js, the leading full stack framework for React. I hope you find this course not just educational, but also fun and interactive. Now, before we get into it, I just want to cover a few things. So first off, at its core,

00:19 this is professional Next.js. We designed this course to help developers become professional Next.js developers for their jobs. That means that we will be covering every single aspect of Next.js, but we will also be covering

00:34 specific parts that you'll be using day in and day out several times over. Because at the end, I really want you to be fluent in this incredibly powerful full stack framework. The course itself is structured so that you can follow it from end to end, or if you want, you can jump around from section to section,

00:53 if you need to brush up later or get a quick refresher. Now, that being said, this first section is called Getting to Know Next.js, and the idea is to give you a really good solid foundation to build on as you progress through the course. I recommend going through this section,

01:10 the Getting to Know Next.js tutorial from front to back, and follow along so that you give yourself that really good knowledge base to start. I also recommend that you actually do the exercises. I know it's tempting to just watch this stuff and just sit back,

01:27 but you really won't learn it unless you actually do it yourself. So when I offer you the chance to get in there and try it for yourself, I recommend that you take it. Now, next up is Next.js itself. In this course, we are going to be covering the app router exclusively.

01:45 There are actually two routers built into Next.js now. The older version, which has been around for a decade now, is called the Pages Router, and the newer version, which was released last year in 2023, is called the App Router. I'll be showing you that Pages Router stuff

02:02 only in as much as we'll be comparing it to the App Router, or porting the Pages Router applications to the App Router, and you'll see how that's done. Now, the App Router is the new standard for Next.js, and I strongly recommend that you start building new applications with the App Router as opposed to the Pages Router.

02:21 Now, there are some prerequisites for this course, since we do want to focus the majority of the content on Next.js itself. So first, I recommend that you know the basics of how to use the node command line, in particular things like NPM or PMPM if you like, and the MPX command.

02:40 Second, you need to know JavaScript. It would be a whole course to teach that to you on its own, and it would also be helpful if you knew a little bit of TypeScript. We'll be using a ton of it, not going to push the boundaries on that one, but there are always instructions that go along with every video, so if you get stuck on the types,

02:59 there's always some instructions that'll help you through that. Third, we assume that you have a basic understanding of the fundamentals of React, like how to write a functional component, what properties are, basic hooks like useDate, useEffect, that sort of thing. And fourth, we assume that you understand the core web concepts like a server,

03:16 the browser, or client, if you prefer, and also how to use functions like fetch to make requests to the server, and the basic HTTP verbs of GET and POST. But don't be too worried if you're not like 100% on all that stuff, we will be covering it pretty deeply as we go through the whole course. And of course, every time I ask you to do something,

03:36 I will show you how I do it, and you can see the end result and learn from that. Which brings me to my last point, which is, who am I? Well, I'm Jack Harrington. I'm a principal full-stack software engineer. And though I don't usually talk about it, I've been writing software for 40 years.

03:54 Crazy. I've written eight books, from fun stuff like PHP hacks and podcasting hacks, to super mind-bendingly complex architectural topics like module federation, practical module federation. Now I've been a web developer since '98,

04:12 and I worked on websites from social networks to productivity applications, to e-commerce apps for really big companies and startups. I also led the development and deployment of Next.js at two of the world's biggest companies, Nike and Walmart Labs. So I've got a lot of practical experience to share with you.

04:31 And I've been talking and teaching about Next.js on YouTube, on the Blue Collar Coder, for over three years with many, many, many videos. But I'll be honest with you, this course right here, this is the one you want to take, because I can use all of the tools of this platform

04:49 to help you learn it at your own pace and interactively. So take my advice, follow along with what I'm doing. And when I tell you to try something for yourself, do it. Can't learn just by watching. Now in this first Getting Started with Next.js tutorial, we are going to build a chat and GPT application on top of Next.js. It's awesome.

05:07 It's got authorization, database connectivity, server actions, file-based routing, AI, streaming. And you're going to be deploying it at every step. So you can show your friends and your family and your coworkers. It's just a great way to understand the fundamentals of Next.js.

05:25 Now there are a few videos after this about why you should choose Next.js in particular, when you shouldn't use Next.js, and the relationship between Vercel and Next.js. And that's all really good foundational information to have. But hey, if you just want to go to that Getting Started and just try it out, then go to that Setup section of the tutorial

05:44 right now and just jump on in. You can always go back for that higher level stuff later on. So without further ado, let's get into learning professional Next.js.

00:00 >> Welcome to Pro Next.js. I'm really glad that you chose this course to learn Next.js, the leading full stack framework for React. I hope you find this course not just educational, but also fun and interactive. Now, before we get into it, I just want to cover a few things. So first off, at its core,

00:19 this is professional Next.js. We designed this course to help developers become professional Next.js developers for their jobs. That means that we will be covering every single aspect of Next.js, but we will also be covering

00:34 specific parts that you'll be using day in and day out several times over. Because at the end, I really want you to be fluent in this incredibly powerful full stack framework. The course itself is structured so that you can follow it from end to end, or if you want, you can jump around from section to section,

00:53 if you need to brush up later or get a quick refresher. Now, that being said, this first section is called Getting to Know Next.js, and the idea is to give you a really good solid foundation to build on as you progress through the course. I recommend going through this section,

01:10 the Getting to Know Next.js tutorial from front to back, and follow along so that you give yourself that really good knowledge base to start. I also recommend that you actually do the exercises. I know it's tempting to just watch this stuff and just sit back,

01:27 but you really won't learn it unless you actually do it yourself. So when I offer you the chance to get in there and try it for yourself, I recommend that you take it. Now, next up is Next.js itself. In this course, we are going to be covering the app router exclusively.

01:45 There are actually two routers built into Next.js now. The older version, which has been around for a decade now, is called the Pages Router, and the newer version, which was released last year in 2023, is called the App Router. I'll be showing you that Pages Router stuff

02:02 only in as much as we'll be comparing it to the App Router, or porting the Pages Router applications to the App Router, and you'll see how that's done. Now, the App Router is the new standard for Next.js, and I strongly recommend that you start building new applications with the App Router as opposed to the Pages Router.

02:21 Now, there are some prerequisites for this course, since we do want to focus the majority of the content on Next.js itself. So first, I recommend that you know the basics of how to use the node command line, in particular things like NPM or PMPM if you like, and the MPX command.

02:40 Second, you need to know JavaScript. It would be a whole course to teach that to you on its own, and it would also be helpful if you knew a little bit of TypeScript. We'll be using a ton of it, not going to push the boundaries on that one, but there are always instructions that go along with every video, so if you get stuck on the types,

02:59 there's always some instructions that'll help you through that. Third, we assume that you have a basic understanding of the fundamentals of React, like how to write a functional component, what properties are, basic hooks like useDate, useEffect, that sort of thing. And fourth, we assume that you understand the core web concepts like a server,

03:16 the browser, or client, if you prefer, and also how to use functions like fetch to make requests to the server, and the basic HTTP verbs of GET and POST. But don't be too worried if you're not like 100% on all that stuff, we will be covering it pretty deeply as we go through the whole course. And of course, every time I ask you to do something,

03:36 I will show you how I do it, and you can see the end result and learn from that. Which brings me to my last point, which is, who am I? Well, I'm Jack Harrington. I'm a principal full-stack software engineer. And though I don't usually talk about it, I've been writing software for 40 years.

03:54 Crazy. I've written eight books, from fun stuff like PHP hacks and podcasting hacks, to super mind-bendingly complex architectural topics like module federation, practical module federation. Now I've been a web developer since '98,

04:12 and I worked on websites from social networks to productivity applications, to e-commerce apps for really big companies and startups. I also led the development and deployment of Next.js at two of the world's biggest companies, Nike and Walmart Labs. So I've got a lot of practical experience to share with you.

04:31 And I've been talking and teaching about Next.js on YouTube, on the Blue Collar Coder, for over three years with many, many, many videos. But I'll be honest with you, this course right here, this is the one you want to take, because I can use all of the tools of this platform

04:49 to help you learn it at your own pace and interactively. So take my advice, follow along with what I'm doing. And when I tell you to try something for yourself, do it. Can't learn just by watching. Now in this first Getting Started with Next.js tutorial, we are going to build a chat and GPT application on top of Next.js. It's awesome.

05:07 It's got authorization, database connectivity, server actions, file-based routing, AI, streaming. And you're going to be deploying it at every step. So you can show your friends and your family and your coworkers. It's just a great way to understand the fundamentals of Next.js.

05:25 Now there are a few videos after this about why you should choose Next.js in particular, when you shouldn't use Next.js, and the relationship between Vercel and Next.js. And that's all really good foundational information to have. But hey, if you just want to go to that Getting Started and just try it out, then go to that Setup section of the tutorial

05:44 right now and just jump on in. You can always go back for that higher level stuff later on. So without further ado, let's get into learning professional Next.js.