Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,050 --> 00:00:03,340
Now, whilst we're not going
2
00:00:03,340 --> 00:00:06,590
to proceed on this DetailPage for the moment,
3
00:00:06,590 --> 00:00:09,100
whilst we're not going to dive into data fetching
4
00:00:09,100 --> 00:00:12,800
for the moment, I wanna come back to this index.js file
5
00:00:12,800 --> 00:00:15,850
in the news folder and talk about navigation
6
00:00:15,850 --> 00:00:17,950
because currently, I, of course,
7
00:00:17,950 --> 00:00:22,420
always enter URLs in the URL bar manually
8
00:00:22,420 --> 00:00:26,290
and that, of course, is not how users use our website.
9
00:00:26,290 --> 00:00:28,530
Instead, we have links on our website
10
00:00:28,530 --> 00:00:31,290
that allow users to navigate around.
11
00:00:31,290 --> 00:00:34,670
Hence here on this index.js file in the news page,
12
00:00:34,670 --> 00:00:36,850
so on /news page,
13
00:00:36,850 --> 00:00:40,000
we typically don't just wanna say The News Page
14
00:00:40,000 --> 00:00:42,380
but we might also want to display a list
15
00:00:42,380 --> 00:00:45,420
of news items, which are then clickable.
16
00:00:45,420 --> 00:00:48,350
And to do that, I'll wrap this here in a Fragment,
17
00:00:48,350 --> 00:00:50,290
which I import from React
18
00:00:50,290 --> 00:00:53,603
so that we can have a JSON JSX element.
19
00:00:54,660 --> 00:00:57,630
And render a unordered list here.
20
00:00:57,630 --> 00:00:58,870
And in that unordered list,
21
00:00:58,870 --> 00:01:02,113
we could have well, a list of dummy news items.
22
00:01:02,960 --> 00:01:07,960
For example, the NextJS Is A Great Framework article
23
00:01:09,120 --> 00:01:11,950
and then also the Something else article.
24
00:01:11,950 --> 00:01:12,783
Whatever.
25
00:01:12,783 --> 00:01:14,720
So we have two news items here
26
00:01:14,720 --> 00:01:16,680
and these should now be clickable
27
00:01:16,680 --> 00:01:21,680
and then lead to the newsId page with different IDs,
28
00:01:21,790 --> 00:01:25,940
different concrete values encoded in the URL.
29
00:01:25,940 --> 00:01:27,420
Now, when we wanna build a link,
30
00:01:27,420 --> 00:01:30,470
we typically do this by using the anchor tag.
31
00:01:30,470 --> 00:01:32,630
We can create an anchor element
32
00:01:32,630 --> 00:01:35,620
and wrap our text with that.
33
00:01:35,620 --> 00:01:38,980
And then here, we can encode the URL
34
00:01:38,980 --> 00:01:40,660
to which we wanna go.
35
00:01:40,660 --> 00:01:43,700
So in this case, if we wanna stay on this server,
36
00:01:43,700 --> 00:01:46,690
we could say we're going to /news/
37
00:01:46,690 --> 00:01:50,880
and then nextjs-is-a-great-framework
38
00:01:50,880 --> 00:01:54,313
if that would be the identifier of this news item.
39
00:01:55,170 --> 00:01:58,170
And of course, this list could also be generated dynamically
40
00:01:58,170 --> 00:02:01,810
by mapping some array of data into JSX elements.
41
00:02:01,810 --> 00:02:03,290
I'm just hard coding it here
42
00:02:03,290 --> 00:02:04,530
because for the moment,
43
00:02:04,530 --> 00:02:07,760
I wanna focus on the navigation feature.
44
00:02:07,760 --> 00:02:09,880
So that is how we do construct a link
45
00:02:09,880 --> 00:02:12,350
in regular HTML
46
00:02:12,350 --> 00:02:15,590
and if we save this, it also will work.
47
00:02:15,590 --> 00:02:18,960
If I go back to the /news page here,
48
00:02:18,960 --> 00:02:21,070
we actually don't see that it's a link
49
00:02:21,070 --> 00:02:23,330
because in the globals.css file,
50
00:02:23,330 --> 00:02:26,030
I basically disabled the default styling
51
00:02:26,030 --> 00:02:28,250
that would show you that it's a link.
52
00:02:28,250 --> 00:02:29,630
But we can click it
53
00:02:29,630 --> 00:02:33,820
and if I do click it, I am taken to that detail page
54
00:02:33,820 --> 00:02:35,820
for that specific value.
55
00:02:35,820 --> 00:02:37,123
So that is working.
56
00:02:38,150 --> 00:02:41,050
But this is only the second best way
57
00:02:41,050 --> 00:02:44,300
of navigating around in a NextJS app.
58
00:02:44,300 --> 00:02:47,530
It works but watch this refresh icon here
59
00:02:47,530 --> 00:02:49,320
when I click this link.
60
00:02:49,320 --> 00:02:51,510
It briefly turns to a cross
61
00:02:51,510 --> 00:02:54,550
and then goes back to the refresh icon.
62
00:02:54,550 --> 00:02:58,400
This always signals that the browser sends a new request
63
00:02:58,400 --> 00:03:02,020
and gets back a new HTML page.
64
00:03:02,020 --> 00:03:05,410
And that all works but it has a disadvantage.
65
00:03:05,410 --> 00:03:09,140
It means that we don't have a single page application here.
66
00:03:09,140 --> 00:03:12,350
It means instead that we're always sending a new request
67
00:03:12,350 --> 00:03:15,740
to the backend to fetch a new HTML page
68
00:03:15,740 --> 00:03:18,240
whenever the user navigates around.
69
00:03:18,240 --> 00:03:20,430
And that's not our goal here.
70
00:03:20,430 --> 00:03:23,720
It's great that we have those pre-rendered pages
71
00:03:23,720 --> 00:03:26,930
so that when a user initially visits our site,
72
00:03:26,930 --> 00:03:29,470
some content is there right from the start
73
00:03:29,470 --> 00:03:31,960
and it's also great for search engines
74
00:03:31,960 --> 00:03:34,420
but if a user is on the page already
75
00:03:34,420 --> 00:03:36,270
and then navigates around on it,
76
00:03:36,270 --> 00:03:39,590
we wanna stay in that single page application
77
00:03:39,590 --> 00:03:42,460
because that allows us to preserve state
78
00:03:42,460 --> 00:03:45,630
across pages and give the user a better,
79
00:03:45,630 --> 00:03:50,570
a more reactive experience, a better user experience.
80
00:03:50,570 --> 00:03:54,010
That, after all, is one of the reasons for using React,
81
00:03:54,010 --> 00:03:56,630
that we wanna build an interactive UI
82
00:03:56,630 --> 00:04:01,040
where we never send a request for a new HTML page
83
00:04:01,040 --> 00:04:04,220
but where we instead update what's on the screen
84
00:04:04,220 --> 00:04:07,720
with JavaScript, with React in the end.
85
00:04:07,720 --> 00:04:09,220
And we're not doing this here
86
00:04:09,220 --> 00:04:10,950
when we create a link like this.
87
00:04:10,950 --> 00:04:13,300
Instead, we load a brand new page.
88
00:04:13,300 --> 00:04:16,410
We would lose any state we might be storing,
89
00:04:16,410 --> 00:04:19,089
any Redux sate or context state,
90
00:04:19,089 --> 00:04:20,500
all of that would be lost
91
00:04:20,500 --> 00:04:22,280
because we load a new page.
92
00:04:22,280 --> 00:04:26,400
And we simply don't have a single page application here.
93
00:04:26,400 --> 00:04:29,750
Therefore, to stay in that single page application,
94
00:04:29,750 --> 00:04:31,990
we need to create the link differently.
95
00:04:31,990 --> 00:04:35,510
We need to utilize a special component offered by Next,
96
00:04:35,510 --> 00:04:39,340
to be precise, offered by next/link.
97
00:04:39,340 --> 00:04:42,680
That's another sub-package which is responsible for linking
98
00:04:42,680 --> 00:04:46,250
and from there, we can import Link actually
99
00:04:46,250 --> 00:04:49,030
as a default export.
100
00:04:49,030 --> 00:04:52,660
So importing the default export like this.
101
00:04:52,660 --> 00:04:55,950
This imports the Link component from next/link
102
00:04:55,950 --> 00:04:57,540
and that's a special component,
103
00:04:57,540 --> 00:05:01,280
which we can use in our JSX code to build links.
104
00:05:01,280 --> 00:05:02,550
Using it is simple.
105
00:05:02,550 --> 00:05:05,390
You simply use it instead of the anchor tag here.
106
00:05:05,390 --> 00:05:08,740
So I replace a with Link.
107
00:05:08,740 --> 00:05:11,620
We leave the ref attribute, the ref prop
108
00:05:11,620 --> 00:05:14,740
because Link expects a ref prop.
109
00:05:14,740 --> 00:05:19,130
And that then sets the target destination of that link.
110
00:05:19,130 --> 00:05:22,720
It will also then by default render an anchor element.
111
00:05:22,720 --> 00:05:24,090
So all that will still work.
112
00:05:24,090 --> 00:05:26,250
Our styling will still apply.
113
00:05:26,250 --> 00:05:28,850
Yet, if I save and reload,
114
00:05:28,850 --> 00:05:32,400
if I now click this and you watch the refresh icon,
115
00:05:32,400 --> 00:05:35,890
you see that now this never changes to a cross.
116
00:05:35,890 --> 00:05:38,610
Now we instantly go to the second page
117
00:05:38,610 --> 00:05:43,610
and now we go there without fetching a new HTML page.
118
00:05:43,890 --> 00:05:46,980
Instead we are on a single page application
119
00:05:46,980 --> 00:05:49,470
and the visible content on the screen
120
00:05:49,470 --> 00:05:52,620
is actually just re-rendered by React.
121
00:05:52,620 --> 00:05:54,970
And that's great because that allows us
122
00:05:54,970 --> 00:05:57,410
to combine the best of both worlds.
123
00:05:57,410 --> 00:05:59,250
We have this highly interactive
124
00:05:59,250 --> 00:06:02,290
and reactive single page application here
125
00:06:02,290 --> 00:06:05,940
where we can manage and store state across pages
126
00:06:05,940 --> 00:06:08,320
and yet, if a user would visit this page
127
00:06:08,320 --> 00:06:11,650
as an initial page by just entering this URL
128
00:06:11,650 --> 00:06:14,050
and hitting Enter, we would also be able
129
00:06:14,050 --> 00:06:17,030
to return the finished HTML page here.
130
00:06:17,030 --> 00:06:20,010
So search engines would also see that finished page
131
00:06:20,010 --> 00:06:21,920
if they directly visit it.
132
00:06:21,920 --> 00:06:23,920
But if we were on the website already,
133
00:06:23,920 --> 00:06:25,280
and we just clicked the link,
134
00:06:25,280 --> 00:06:27,090
we stay on that single page app,
135
00:06:27,090 --> 00:06:30,360
we stay inside of that single page app.
136
00:06:30,360 --> 00:06:34,080
Because Link, this special Link component renders
137
00:06:34,080 --> 00:06:38,550
an anchor tag but it watches clicks on those anchor tags
138
00:06:38,550 --> 00:06:42,240
and if you click there, it prevents the browser default
139
00:06:42,240 --> 00:06:46,580
of sending a request, at getting a new HTML page.
140
00:06:46,580 --> 00:06:50,760
Instead, it will load the to be loaded component for you
141
00:06:50,760 --> 00:06:52,520
and change the URL
142
00:06:52,520 --> 00:06:55,250
so that it looks like you changed the page
143
00:06:55,250 --> 00:06:59,430
whilst in reality, you stay in that single page application.
144
00:06:59,430 --> 00:07:02,460
And hence, for site internal links
145
00:07:02,460 --> 00:07:04,380
in a NextJS application,
146
00:07:04,380 --> 00:07:06,560
you wanna use the Link component
147
00:07:06,560 --> 00:07:08,750
instead of the anchor tag component
148
00:07:08,750 --> 00:07:11,823
because with that, you get the best of both worlds.
11603
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.