The project we'll build to learn the
App Router is called "Next Reviews".
We'll pretend that we are big fans of indie games,
and we decided to create a website
where we'll publish our own game reviews.
Of course we'll have multiple pages,
including one for each review.
This application will allow us to learn
all the Next.js fundamentals,
like how to map each page to a URL path,
layouts, rendering, navigation, styling,
images and static assets, custom fonts, and so on.
Now, for the first release of our website
we'll keep all the data in local files.
We'll write the content for each
review in Markdown format,
and then load and display that data in the page.
Most of the content will be static,
but we'll also have a tiny bit
of interactive functionality,
in the form of this "Share link" button,
that users can click to copy the
review URL to the clipboard,
so they can share it on social
networks for example.
This will let us understand the difference between
Server Components and Client Components.
This example will cover all
the main features available
when using Next.js as a Static Site Generator.
There are effectively two ways to use Next.js:
as a Static Site Generator, or
as a Full-Stack Framework.
Static Site Generation means that
we can build our code into a folder
that only contains static files,
that are HTML, JavaScript, and other assets.
This way we can then deploy our
website to any web server.
To use Next.js as a Full-Stack
Framework on the other hand
you need to run your code in a Node.js server.
This way, in addition to Static Pages,
you can use Server-Side Rendering,
meaning that the server will
dynamically generate a page
whenever a client requests it.
It also supports Revalidation,
which is a way to automatically
regenerate static pages,
either periodically or on demand.
Running your application on a Node.js server
gives you access to all the Next.js features.
But most features are also supported
by Static Site Generation.
The only difference is effectively Server-Side
Rendering and Revalidation.
This means you can start using Next.js
as a Static Site Generator,
and then, later on, if you need
the Full-Stack features
you can switch to running it on a Node.js server.
That is in fact what we'll do with
our Next Reviews Project.
Let's get started!