In the first part of this course
we'll develop a Next.js app
that is a fully static website.
The app we'll build is a personal blog.
Let me show you what it will look like,
once it's finished.
As you can see, it's a simple blog website,
where we can post some articles,
that we'll write in Markdown files.
And the app will automatically generate
a page for each Markdown file.
We'll also implement a Dark Mode switch,
so our users can toggle between
light or dark colours.
So it's a fairly simple website
to get us started with Next.js,
but it will already teach us
quite a few things.
We'll see how to set up a Next.js project.
We'll talk about "Pre-rendering",
that's perhaps the biggest advantage of using Next.js
rather than plain React.
We'll cover page navigation and routing.
We'll see how to style our components,
using a library called Styled JSX.
A very important section explains
how to load data in a Next.js page.
In this example we'll read the data
from local Markdown files,
but the concepts we learn here will be useful
in many other cases,
like if we want to fetch data from a web API.
Then we'll see how to build a "dynamic route",
that allows us to use the same component
for generating multiple pages,
in this case for all our blog posts.
As we've seen, we'll add a Dark Mode switch,
which will also be an example
of how to write client side functionality.
And related to that we'll learn about Hydration,
which is the mechanism used to
add client side functionality
to components that were rendered on the server side.
Finally we'll see how to deploy our application,
and we'll cover a few different options,
from Vercel, that's the platform behind Next.js
to building our app in a way that
can be deployed to any static hosting provider.
So, let's get started!