ProNextJS
    Loading
    lesson

    Welcome to Pro Next.js

    Jack HerringtonJack Herrington
    Code

    Welcome to Pro Next.js! I'm thrilled that you've chosen this course to learn Next.js, the leading full-stack framework for React. My goal is to make this course not only educational but also engaging and interactive.

    Course Objectives

    This course is designed to help developers become proficient Next.js developers for their jobs. We'll be covering every aspect of Next.js, with a focus on the parts you'll be using frequently in your day-to-day work. By the end of the course, you should be fluent in this powerful full-stack framework.

    Course Structure

    The course is structured so that you can follow it from beginning to end or jump around to specific sections if you need a quick refresher later on. However, I recommend going through the first section, "Getting to Know Next.js," from front to back and following along to build a solid foundation for the rest of the course.

    To truly learn Next.js, it's important that you actively participate in the exercises. While it might be tempting to sit back and watch, you won't learn if you don't do the work yourself. When I offer you the chance to try something on your own, take advantage of it!

    Next.js App Router

    In this course, we'll be focusing exclusively on the Next.js App Router. Next.js currently has two routers:

    1. The older Pages Router
    2. The newer App Router, released in 2023

    We'll compare the App Router to the Pages Router and demonstrate how to port applications from the Pages Router to the App Router. I strongly recommend starting new projects with the App Router, as it's the new standard for Next.js development.

    Course Prerequisites

    To make the most of this course, you should have a basic understanding of the following:

    • Node.js command line (e.g., npm, pnpm, npx)
    • JavaScript (TypeScript knowledge is helpful but not required)
    • React fundamentals (functional components, props, hooks, etc.)
    • Core web concepts (server, client, fetch, HTTP methods)

    Don't worry if you're not an expert in all these areas; we'll cover them in-depth throughout the course. Every time I ask you to do something, I'll demonstrate how I do it, so you can learn from the example.

    Your Instructor

    I'm Jack Herrington, a principal full-stack software engineer with 40 years of experience. I've written eight books on topics ranging from PHP and podcasting to complex architectural concepts like module federation. As a web developer since 1998, I've worked on various projects for big companies and startups alike. I also led the development and deployment of Next.js at Nike and Walmart Labs.

    Getting Started with Next.js Tutorial

    In the first tutorial, we'll build a GPT Chat application using Next.js. This project will showcase:

    • Authorization
    • Database connectivity
    • Server actions
    • File-based routing
    • AI
    • Streaming

    You'll deploy the application at every step, allowing you to share your progress with friends, family, and coworkers. It's an excellent way to grasp the fundamentals of Next.js.

    Additional Resources

    After this introduction, there are a few videos discussing:

    • Why you should choose Next.js
    • When not to use Next.js
    • The relationship between Vercel and Next.js

    This information provides a solid foundation, but if you're eager to jump into the "Getting Started" tutorial, feel free to skip ahead to the Setup section. You can always revisit the higher-level concepts later.

    Let's get started!

    Transcript

    >> 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,

    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

    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,

    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,

    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,

    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.

    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

    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.

    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.

    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,

    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,

    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,

    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.

    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,

    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.

    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

    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.

    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.

    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

    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.