Intro to Next.js

As I mentioned at the top of the module, Next.js (commonly shortened to just Next) is a popular full-stack React meta-framework. As I write this in mid-2023, it's the only framework to fully take advantage of React's new full-stack model, including React Server Components.

In this chunk of lessons, we'll learn about the fundamental structure of Next applications. You'll learn how to create pages and layouts, how to structure server vs. client components, and learn how to avoid some of the gotchas with server-side rendering.

Two different Nexts (warning)

An important thing to know about Next is that it changed dramatically in 2023.

On May 4th 2023, Next released v13.4, which marked the official stable release of the “App Router”. This is essentially a total rewrite of Next.js, done to integrate all of the new React features like React Server Components.

In this course, we're going to focus exclusively on the new App Router. This is the future of Next.js, and honestly, I think it's a big improvement.

I want to teach you the latest and greatest stuff, so that the skills you learn in this course last as long as possible. The trade-off here is that you'll be ahead of many educational resources out there. It can be harder to troubleshoot issues with Next 13.4+, because there just aren't that many tutorials / StackOverflow answers / etc.

The “original” version of Next is called the Pages Router. It hasn't officially been deprecated yet, but I imagine that it's only a matter of time.

How can you tell if an online resource is out of date? Here are some things to watch out for:

A directory structure that involves the /pages directory.
Methods named getServerSideProps and getStaticProps.
Files named _app.js and _document.js.
“API Routes”.

If you see these things in an online tutorial, it means they're using the classic Pages Router; anything related to routing will be out-of-date.

These days, the current major version of Next is 15, released in October 2024. Fortunately, things have been relatively static since the App Router’s introduction, so you don’t have to worry as much about discrepancies in online resources.