1
00:00:03,000 --> 00:00:06,553
We have a simple navigation bar, with a few links.

2
00:00:06,553 --> 00:00:10,000
And by the way, I'm running the dev server again,

3
00:00:10,000 --> 00:00:12,161
not the production one.

4
00:00:12,161 --> 00:00:14,332
As we've seen, we should use

5
00:00:14,332 --> 00:00:16,349
the Next.js Link component

6
00:00:16,426 --> 00:00:18,446
whenever we point to another

7
00:00:18,446 --> 00:00:20,466
page inside our application.

8
00:00:20,538 --> 00:00:24,453
That's not necessary for external links of course,

9
00:00:24,453 --> 00:00:26,767
because client-side navigation

10
00:00:26,767 --> 00:00:28,772
only works within our app.

11
00:00:28,849 --> 00:00:31,476
For example, in our reviews website

12
00:00:31,476 --> 00:00:33,577
we're going to use some data

13
00:00:33,652 --> 00:00:37,318
downloaded from the RAWG video games database.

14
00:00:37,318 --> 00:00:40,227
RAWG provides an API that's free "for

15
00:00:40,227 --> 00:00:42,506
personal and hobby projects".

16
00:00:42,585 --> 00:00:45,503
All they ask for is a backlink from

17
00:00:45,503 --> 00:00:48,088
"pages where the data is used".

18
00:00:48,172 --> 00:00:50,500
Now, we won't actually call this

19
00:00:50,500 --> 00:00:52,392
API directly from our app,

20
00:00:52,465 --> 00:00:54,325
but I will provide you with

21
00:00:54,325 --> 00:00:56,117
some images and other data

22
00:00:56,185 --> 00:00:59,229
that I downloaded using their API.

23
00:00:59,229 --> 00:01:03,552
So, it's only fair to put a link to "rawg.io"

24
00:01:03,552 --> 00:01:06,084
maybe in the footer of our website.

25
00:01:06,084 --> 00:01:09,296
So we have something to display in the footer.

26
00:01:09,296 --> 00:01:12,054
Let's say "game data and images"

27
00:01:12,176 --> 00:01:13,294
"courtesy of"

28
00:01:14,196 --> 00:01:17,124
and then put a link to "rawg.io".

29
00:01:17,124 --> 00:01:19,389
Since this is an external link,

30
00:01:19,389 --> 00:01:22,212
we can use a regular anchor element.

31
00:01:22,212 --> 00:01:26,371
There's no need to use the Next.js Link component.

32
00:01:26,371 --> 00:01:28,535
In fact, we may want this link

33
00:01:28,535 --> 00:01:30,267
to open in a new window,

34
00:01:30,339 --> 00:01:32,814
by setting "target" to "_blank".

35
00:01:32,899 --> 00:01:34,617
And this is the footer.

36
00:01:34,617 --> 00:01:36,417
It could do with some styling,

37
00:01:36,417 --> 00:01:39,466
but we'll take care of that in the next section.

38
00:01:39,466 --> 00:01:43,074
The link will obviously open the RAWG website,

39
00:01:43,074 --> 00:01:44,854
in a separate tab.

40
00:01:44,854 --> 00:01:47,734
Now, we know that in our RootLayout

41
00:01:47,734 --> 00:01:49,133
we have elements,

42
00:01:49,215 --> 00:01:51,541
like header and footer, that

43
00:01:51,541 --> 00:01:53,534
are common to all pages.

44
00:01:53,617 --> 00:01:56,716
But it's important to also understand that

45
00:01:56,716 --> 00:02:00,403
the layout component is not just a convenient

46
00:02:00,403 --> 00:02:03,844
way to share common elements across pages.

47
00:02:03,926 --> 00:02:06,938
It also affects how the pages are rendered,

48
00:02:06,938 --> 00:02:08,683
especially when navigating

49
00:02:08,683 --> 00:02:10,428
from one route to another.

50
00:02:10,495 --> 00:02:13,069
We can see that if we inspect the

51
00:02:13,069 --> 00:02:15,254
Elements using the DevTools.

52
00:02:15,332 --> 00:02:19,374
The layout component provides the basic structure,

53
00:02:19,374 --> 00:02:21,736
including the header and the footer.

54
00:02:21,736 --> 00:02:24,926
While the content for each specific page

55
00:02:24,926 --> 00:02:27,956
is rendered inside the "main" element.

56
00:02:28,036 --> 00:02:30,135
Now, let's pay attention to

57
00:02:30,135 --> 00:02:31,923
how the elements change

58
00:02:32,000 --> 00:02:34,595
when we navigate to a different page.

59
00:02:34,595 --> 00:02:36,646
When I click "Reviews", you can

60
00:02:36,646 --> 00:02:38,564
see that some elements flash,

61
00:02:38,630 --> 00:02:40,716
meaning they were updated.

62
00:02:40,716 --> 00:02:42,608
If you noticed, "header" and

63
00:02:42,608 --> 00:02:44,162
"footer" didn't change.

64
00:02:44,229 --> 00:02:46,458
Inside the "body", only the

65
00:02:46,458 --> 00:02:48,686
"main" element was updated.

66
00:02:48,769 --> 00:02:51,937
Let's try this again, with the About link.

67
00:02:51,937 --> 00:02:53,561
I'll freeze the screenshot

68
00:02:53,561 --> 00:02:55,061
while editing the video,

69
00:02:55,123 --> 00:02:57,396
so you can clearly see that the

70
00:02:57,396 --> 00:02:59,303
"main" tag is highlighted,

71
00:02:59,376 --> 00:03:02,195
because the "h1" and "p" elements

72
00:03:02,195 --> 00:03:04,672
inside it have been replaced.

73
00:03:04,758 --> 00:03:07,006
You may notice that the "head"

74
00:03:07,006 --> 00:03:08,580
element also changed,

75
00:03:08,655 --> 00:03:10,616
but we'll talk about that in

76
00:03:10,616 --> 00:03:12,437
the section on "Metadata".

77
00:03:12,507 --> 00:03:14,798
The point is that, when navigating

78
00:03:14,798 --> 00:03:16,213
to a different route,

79
00:03:16,280 --> 00:03:18,716
Next.js only re-renders the

80
00:03:18,716 --> 00:03:20,791
page-specific elements,

81
00:03:20,882 --> 00:03:23,033
not the layout elements.

82
00:03:23,033 --> 00:03:25,792
The layout stays exactly as it is.

83
00:03:25,792 --> 00:03:28,170
This is faster and more efficient

84
00:03:28,170 --> 00:03:30,260
than re-rendering everything.

85
00:03:30,332 --> 00:03:33,108
It also means that the user can still

86
00:03:33,108 --> 00:03:35,659
interact with the layout elements,

87
00:03:35,734 --> 00:03:39,081
even while a page transition is in progress.

88
00:03:39,081 --> 00:03:41,710
So, you may want to keep this in mind

89
00:03:41,710 --> 00:03:43,515
when deciding whether to put

90
00:03:43,515 --> 00:03:45,191
some elements in a layout,

91
00:03:45,255 --> 00:03:47,865
or in some other shared component that

92
00:03:47,865 --> 00:03:50,063
you then include into each page.

93
00:03:50,132 --> 00:03:52,471
If possible, it's better to keep

94
00:03:52,471 --> 00:03:54,445
them in a layout component.