Before we start writing our first Next.js project,
you should be aware that
there are now two different ways to use Next.js,
known as the App Router and the Pages Router.
Even when looking at the documentation,
you need to select which of the
two routers you're using,
because many things work differently
depending on that.
The App Router is new,
it was made stable in version 13.4, in May 2023.
So, in this video I'll give you a quick overview
of the differences between the two routers,
and what this means for you
in terms of which sections
of this course to watch.
First of all, the two routers are
named after the folder they use.
With the App Router,
inside your project you have
a directory called "app"
where you keep all your pages, and other routes.
While with the Pages Router
you keep them in a folder called
(guess what) "pages".
As I mentioned, the App Router is the new one,
only declared stable in May 2023.
While the Pages Router is what
Next.js had been using
ever since the framework was created back in 2016.
The App Router is now the recommended way
to create new applications.
However, the Pages Router is still supported,
and will continue to be maintained
for "multiple major versions moving forward."
(To quote the official announcement.)
There are lots and lots of
existing Next.js projects
that were created before the
new router even existed,
including some very popular websites.
The new App Router does have some advantages,
which is in fact why the Next.js team
decided to create a different
way to build applications.
It's based on React Server Components,
that are rendered only on the server
without sending any JavaScript
code to the browser.
It also supports Nested Layouts,
and a few other features
that are not available in the Pages Router.
Now, this course covers both the
old and the new functionality.
You'll find a number of sections, after this one,
explaining how to build a project
using the App Router.
It's covered first, since it's
now the recommended approach.
But after that you'll also find other sections
with examples based on the Pages Router.
For clarity, each section is prefixed
with either "app" or "pages".
So, what does this mean for you?
What should you learn:
the App Router, the Pages Router, or both?
Most people should learn the App Router,
because, as we've seen, it's
now the recommended way
to build new Next.js apps.
Even if you have an existing application,
you may want to start migrating
it to the new router.
So, at this point,
I think you should only learn the
Pages Router if you have to,
meaning if you know you'll be working on a project
that was written before the
new router was introduced.
But there are cases where that may well be useful.
For example, if you just joined a new company
that has an existing application
based on the Pages Router.
As we've seen, it's still supported,
and will be for quite some time.
So, in terms of the course content,
if you're like most people,
you can watch only the sections on the App Router,
and simply skip the rest.
If you do need to work with the Pages Router,
you should know that the two parts
of the course are independent.
You don't have to watch them
in the order they're listed.
If you want to learn the Pages Router first,
because that's what you'll
be working on initially,
you can start from that part.
But again, in all other cases
you can watch only the first part,
on the App Router.