1
00:00:00,000 --> 00:00:03,000
In this course section here,

2
00:00:03,000 --> 00:00:04,000
we are going to dive into

3
00:00:04,000 --> 00:00:08,000
optimizing NextJS applications.

4
00:00:08,000 --> 00:00:09,000
To be precise,

5
00:00:09,000 --> 00:00:13,000
we'll dive into two very important

6
00:00:13,000 --> 00:00:16,000
optimization opportunities you have

7
00:00:16,000 --> 00:00:19,000
in every NextJS application,

8
00:00:19,000 --> 00:00:22,000
which you typically wanna grasp and implement.

9
00:00:22,000 --> 00:00:26,000
We'll take a look at optimizing images

10
00:00:26,000 --> 00:00:28,000
because as it'll turn out,

11
00:00:28,000 --> 00:00:31,000
NextJS can help you with that.

12
00:00:31,000 --> 00:00:35,000
And we'll take a look at improving the search

13
00:00:35,000 --> 00:00:38,000
engine visibility of your site

14
00:00:38,000 --> 00:00:41,000
by adding page metadata,

15
00:00:41,000 --> 00:00:43,000
which of course is not all it takes

16
00:00:43,000 --> 00:00:46,000
to perform search engine optimization,

17
00:00:46,000 --> 00:00:50,000
but which is a crucial aspect.

18
00:00:50,000 --> 00:00:52,000
Now, I will say that

19
00:00:52,000 --> 00:00:55,000
in the official NextJS documentation,

20
00:00:55,000 --> 00:00:58,000
there also is an entire area dedicated

21
00:00:58,000 --> 00:01:01,000
to optimizing NextJS applications.

22
00:01:01,000 --> 00:01:04,000
Though some of these items here

23
00:01:04,000 --> 00:01:09,000
are really very specific for specific use cases.

24
00:01:09,000 --> 00:01:12,000
For example, for pages that include videos

25
00:01:12,000 --> 00:01:14,000
or for advanced techniques,

26
00:01:14,000 --> 00:01:17,000
if you want to analyze the bundle size

27
00:01:17,000 --> 00:01:19,000
of your application.

28
00:01:19,000 --> 00:01:21,000
In this section as mentioned,

29
00:01:21,000 --> 00:01:23,000
we'll focus on optimizing images

30
00:01:23,000 --> 00:01:25,000
and optimizing the metadata

31
00:01:25,000 --> 00:01:30,000
or setting metadata on our NextJS pages.

32
00:01:30,000 --> 00:01:32,000
And for this section,

33
00:01:32,000 --> 00:01:35,000
I'm using one of those project snapshots

34
00:01:35,000 --> 00:01:37,000
from an earlier section

35
00:01:37,000 --> 00:01:40,000
and you find this project snapshot attached.

36
00:01:40,000 --> 00:01:42,000
Though I will say right away

37
00:01:42,000 --> 00:01:44,000
that this is a snapshot

38
00:01:44,000 --> 00:01:46,000
where we are using Cloudinary

39
00:01:46,000 --> 00:01:50,000
for uploading and storing images.

40
00:01:50,000 --> 00:01:52,000
So if you wanna follow along

41
00:01:52,000 --> 00:01:54,000
and use this snapshot,

42
00:01:54,000 --> 00:01:57,000
you'll need a Cloudinary account

43
00:01:57,000 --> 00:01:59,000
and you'll need to enter your Cloudinary cloud name,

44
00:02:00,000 --> 00:02:03,000
API Key and API Secret here

45
00:02:03,000 --> 00:02:05,000
in this .env.local file,

46
00:02:05,000 --> 00:02:08,000
which you should also add to your project

47
00:02:08,000 --> 00:02:11,000
because it's not part of that starting project.

48
00:02:11,000 --> 00:02:13,000
So you'll need to add such a file

49
00:02:13,000 --> 00:02:16,000
with the appropriate values to your project

50
00:02:16,000 --> 00:02:20,000
just as we did it in an earlier course section.

51
00:02:20,000 --> 00:02:23,000
So that's the project I'll work with.

52
00:02:23,000 --> 00:02:24,000
And in this project here,

53
00:02:24,000 --> 00:02:26,000
I have a starting page

54
00:02:26,000 --> 00:02:28,000
where I see some posts from users.

55
00:02:28,000 --> 00:02:32,000
I have a feed page where I see more posts,

56
00:02:32,000 --> 00:02:35,000
and I have that "New Post" button,

57
00:02:35,000 --> 00:02:38,000
which allows me to add a new post.

58
00:02:38,000 --> 00:02:42,000
And I now wanna start by optimizing the images

59
00:02:42,000 --> 00:02:45,000
that are displayed on this website here

60
00:02:45,000 --> 00:02:48,000
in this basic NextJS demo application.

61
00:02:48,000 --> 00:02:49,000
And with that,

62
00:02:49,000 --> 00:02:52,000
I mean both images like this one in the header,

63
00:02:52,000 --> 00:02:55,000
which are part of the overall page,

64
00:02:55,000 --> 00:02:57,000
and images like these ones here,

65
00:02:57,000 --> 00:03:00,000
which are user generated images.

66
00:03:00,000 --> 00:03:03,000
So both kinds of images should be optimized

67
00:03:03,000 --> 00:03:05,000
and as it turns out,

68
00:03:05,000 --> 00:03:06,000
NextJS can help us with that.