Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,090 --> 00:00:04,050
If you want to add content
2
00:00:04,050 --> 00:00:07,220
between the head tags on your page,
3
00:00:07,220 --> 00:00:11,110
you can easily do that in Next.js applications
4
00:00:11,110 --> 00:00:13,530
with help of a special component.
5
00:00:13,530 --> 00:00:15,260
Let's say on our homepage
6
00:00:15,260 --> 00:00:18,970
so this Index.js file in the Pages folder.
7
00:00:18,970 --> 00:00:22,340
Let's say we wanna add extra information
8
00:00:22,340 --> 00:00:24,600
to that head section.
9
00:00:24,600 --> 00:00:26,310
We can do that by importing
10
00:00:26,310 --> 00:00:29,830
a special component exposed by Next.js.
11
00:00:29,830 --> 00:00:34,830
The head component which we import from next/head like this.
12
00:00:35,780 --> 00:00:40,193
So where we imported link from next/link
13
00:00:43,880 --> 00:00:46,830
we now import head from next/head.
14
00:00:46,830 --> 00:00:50,890
That's a special component which you can add anywhere
15
00:00:50,890 --> 00:00:54,870
in your JSX code for a given component.
16
00:00:54,870 --> 00:00:58,360
So here we don't have to add it at the top level.
17
00:00:58,360 --> 00:01:00,770
We can go into the stiff here
18
00:01:00,770 --> 00:01:03,830
and add the head component here.
19
00:01:03,830 --> 00:01:07,160
And please note, it's Head written like this
20
00:01:07,160 --> 00:01:08,800
with a capital H.
21
00:01:08,800 --> 00:01:11,310
It's not head written like this.
22
00:01:11,310 --> 00:01:14,900
This would not have the effect we want.
23
00:01:14,900 --> 00:01:17,150
We need head written like this
24
00:01:18,100 --> 00:01:20,370
because now you can add
25
00:01:20,370 --> 00:01:25,130
your typical head section HTML elements
26
00:01:25,130 --> 00:01:30,130
between those special head tags and Next.js will inject them
27
00:01:30,930 --> 00:01:33,680
into the head section of the page.
28
00:01:33,680 --> 00:01:36,240
So if I, for example, add a title here
29
00:01:36,240 --> 00:01:40,050
which is a typical HTML element for the head section,
30
00:01:40,050 --> 00:01:45,050
we could set the title to Next.js events here
31
00:01:45,160 --> 00:01:46,870
or whatever you want.
32
00:01:46,870 --> 00:01:49,070
And if you do so and save this,
33
00:01:49,070 --> 00:01:52,220
if you go back to the starting page, if I reload,
34
00:01:52,220 --> 00:01:55,980
you now see in the tab here it shows our title.
35
00:01:55,980 --> 00:01:58,210
And if I inspected this page
36
00:01:58,210 --> 00:02:00,700
and I have a look at the head section here,
37
00:02:00,700 --> 00:02:04,170
we indeed see the title was added.
38
00:02:04,170 --> 00:02:07,760
So Next.js injects the content which we add
39
00:02:07,760 --> 00:02:11,570
between those head tags into the real head part
40
00:02:11,570 --> 00:02:13,283
of the rendered page.
41
00:02:14,510 --> 00:02:17,120
And of course we're not restricted to the title.
42
00:02:17,120 --> 00:02:21,550
We can also add meta tags here, meta elements.
43
00:02:21,550 --> 00:02:23,170
These can always be self-closing
44
00:02:23,170 --> 00:02:25,860
since they have no content between the tags
45
00:02:25,860 --> 00:02:30,550
and then, for example, add our description tag here
46
00:02:32,830 --> 00:02:37,830
with a content of find a lot of great events
47
00:02:38,880 --> 00:02:43,880
that allow you to evolve, whatever.
48
00:02:43,880 --> 00:02:44,850
Something like this.
49
00:02:44,850 --> 00:02:46,810
Maybe you'll find a better description
50
00:02:46,810 --> 00:02:49,300
but we can add such a meta tag here
51
00:02:49,300 --> 00:02:52,000
and now if we inspect the rendered page,
52
00:02:52,000 --> 00:02:55,710
we see that in the head now all those added.
53
00:02:55,710 --> 00:02:58,240
And that would be a special tag,
54
00:02:58,240 --> 00:03:01,380
this meta tag here with a name of description.
55
00:03:01,380 --> 00:03:05,270
That would be a tag which does matter to search engines
56
00:03:05,270 --> 00:03:08,320
because in the end this here, this description text
57
00:03:08,320 --> 00:03:11,100
which we added to the content attribute,
58
00:03:11,100 --> 00:03:14,720
that is the text that would show up in a search result
59
00:03:14,720 --> 00:03:18,500
when your page is showing up in Google search, for example.
60
00:03:18,500 --> 00:03:23,100
So that matters and here between these special head tags,
61
00:03:23,100 --> 00:03:25,550
so instead of this special head element,
62
00:03:25,550 --> 00:03:30,530
you can really add any HTML elements that would normally go
63
00:03:30,530 --> 00:03:33,140
into the head section of your page.
64
00:03:33,140 --> 00:03:36,480
And that allows you to fine tune and configure
65
00:03:36,480 --> 00:03:39,313
what should show up in that head section.
5105
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.