In this course section here,
we are going to dive into
optimizing NextJS applications.
To be precise,
we'll dive into two very important
optimization opportunities you have
in every NextJS application,
which you typically wanna grasp and implement.
We'll take a look at optimizing images
because as it'll turn out,
NextJS can help you with that.
And we'll take a look at improving the search
engine visibility of your site
by adding page metadata,
which of course is not all it takes
to perform search engine optimization,
but which is a crucial aspect.
Now, I will say that
in the official NextJS documentation,
there also is an entire area dedicated
to optimizing NextJS applications.
Though some of these items here
are really very specific for specific use cases.
For example, for pages that include videos
or for advanced techniques,
if you want to analyze the bundle size
of your application.
In this section as mentioned,
we'll focus on optimizing images
and optimizing the metadata
or setting metadata on our NextJS pages.
And for this section,
I'm using one of those project snapshots
from an earlier section
and you find this project snapshot attached.
Though I will say right away
that this is a snapshot
where we are using Cloudinary
for uploading and storing images.
So if you wanna follow along
and use this snapshot,
you'll need a Cloudinary account
and you'll need to enter your Cloudinary cloud name,
API Key and API Secret here
in this .env.local file,
which you should also add to your project
because it's not part of that starting project.
So you'll need to add such a file
with the appropriate values to your project
just as we did it in an earlier course section.
So that's the project I'll work with.
And in this project here,
I have a starting page
where I see some posts from users.
I have a feed page where I see more posts,
and I have that "New Post" button,
which allows me to add a new post.
And I now wanna start by optimizing the images
that are displayed on this website here
in this basic NextJS demo application.
And with that,
I mean both images like this one in the header,
which are part of the overall page,
and images like these ones here,
which are user generated images.
So both kinds of images should be optimized
and as it turns out,
NextJS can help us with that.