Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,440 --> 00:00:05,290
Besides reusing our Head content
2
00:00:05,290 --> 00:00:06,910
inside of a component,
3
00:00:06,910 --> 00:00:09,880
we also might have certain Head settings
4
00:00:09,880 --> 00:00:13,580
that should be the same across all page components.
5
00:00:13,580 --> 00:00:15,450
So we don't wanna copy and paste it
6
00:00:15,450 --> 00:00:18,080
into every single page component.
7
00:00:18,080 --> 00:00:21,070
Now we could solve this by outsourcing it
8
00:00:21,070 --> 00:00:24,120
into a separate file, into a separate component
9
00:00:24,120 --> 00:00:27,360
and then importing that into all the page components
10
00:00:27,360 --> 00:00:31,330
and using it there, but we can also use another approach.
11
00:00:31,330 --> 00:00:35,490
Next, JS has this _app.js file
12
00:00:35,490 --> 00:00:39,930
and it also has another file which we'll be able to utilize.
13
00:00:39,930 --> 00:00:43,070
Now, let's understand what the idea behind those files is
14
00:00:43,070 --> 00:00:44,990
before we dive into them.
15
00:00:44,990 --> 00:00:49,990
The _app.js file is your route app component
16
00:00:50,300 --> 00:00:53,080
which in the end is rendered for every page
17
00:00:53,080 --> 00:00:54,860
that is being displayed.
18
00:00:54,860 --> 00:00:58,290
This component here, which is received through props,
19
00:00:58,290 --> 00:01:01,580
this actually is the actual page component
20
00:01:01,580 --> 00:01:03,180
that should be rendered.
21
00:01:03,180 --> 00:01:08,040
MyApp, this component here is rendered by Next.js
22
00:01:08,040 --> 00:01:11,240
and this component prop will automatically be set
23
00:01:11,240 --> 00:01:15,040
by Next to JS so you don't need to do anything for that.
24
00:01:15,040 --> 00:01:18,490
But then you can utilize this _app.js file
25
00:01:18,490 --> 00:01:21,030
such that as we're currently doing it,
26
00:01:21,030 --> 00:01:25,250
you wrap your page content with our components.
27
00:01:25,250 --> 00:01:27,710
Like here, I'm wrapping the Layout component
28
00:01:27,710 --> 00:01:32,300
around the page component to give all pages the same layout
29
00:01:32,300 --> 00:01:35,530
so the same navigation bar, for example.
30
00:01:35,530 --> 00:01:39,650
So that actually is a file which we are already utilizing.
31
00:01:39,650 --> 00:01:44,650
And of course, therefore we could also import Head here
32
00:01:45,030 --> 00:01:50,030
from next/head imported into this app.js file
33
00:01:50,170 --> 00:01:54,550
and then add Head here to set some generic setting
34
00:01:54,550 --> 00:01:58,480
that applies to all our page components.
35
00:01:58,480 --> 00:02:02,690
For example, we could add another meta tag here
36
00:02:02,690 --> 00:02:06,880
with a name of viewport and then our content
37
00:02:06,880 --> 00:02:11,880
of let's say, initial-scale=1.0, width=device-width.
38
00:02:13,800 --> 00:02:17,470
This would be a meta tag which is often added to pages
39
00:02:17,470 --> 00:02:21,810
to ensure that the page is responsive and scales correctly
40
00:02:21,810 --> 00:02:23,710
and we therefore typically wanna add this
41
00:02:23,710 --> 00:02:27,140
to all our pages, not just to some.
42
00:02:27,140 --> 00:02:31,030
So that would be a great example for some head tax,
43
00:02:31,030 --> 00:02:34,600
some head element, which you wanna add to all pages
44
00:02:34,600 --> 00:02:37,533
but which you of course don't wanna copy around manually.
45
00:02:38,430 --> 00:02:41,590
Therefore we can add it once in this app.js file
46
00:02:41,590 --> 00:02:43,540
and if we do so, we see that
47
00:02:43,540 --> 00:02:46,400
if I reload this events page for example,
48
00:02:46,400 --> 00:02:48,910
and I inspect my rendered page,
49
00:02:48,910 --> 00:02:53,910
then here this viewport name is part of this page.
50
00:02:54,230 --> 00:02:55,400
So that works.
51
00:02:55,400 --> 00:02:57,960
Now, this is applied to all the pages
52
00:02:57,960 --> 00:03:01,903
by setting it up once in this _app.js file.
4285
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.