Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:03,000 --> 00:00:05,139
We're now setting an appropriate
2
00:00:05,139 --> 00:00:06,409
title on each page.
3
00:00:06,476 --> 00:00:09,363
The Home page uses the default one.
4
00:00:09,363 --> 00:00:11,414
Now, there's another small thing
5
00:00:11,414 --> 00:00:13,337
that's missing in our website,
6
00:00:13,401 --> 00:00:15,267
and that is an icon.
7
00:00:15,267 --> 00:00:17,443
At the moment the browser just
8
00:00:17,443 --> 00:00:18,966
shows a generic icon,
9
00:00:19,038 --> 00:00:21,149
while in the other two tabs
10
00:00:21,149 --> 00:00:23,781
you can see the custom icons for
11
00:00:23,781 --> 00:00:26,249
Udemy and Next.js for example.
12
00:00:26,331 --> 00:00:29,119
In fact, you may also have noticed that,
13
00:00:29,119 --> 00:00:30,652
when we load this page
14
00:00:30,722 --> 00:00:33,831
in the console we see a Not Found error,
15
00:00:33,831 --> 00:00:36,670
because the browser tries to load
16
00:00:36,670 --> 00:00:38,821
"favicon.ico" by default,
17
00:00:38,907 --> 00:00:41,919
but there is no such file in our website.
18
00:00:41,919 --> 00:00:44,748
So, let's see how to set a custom
19
00:00:44,748 --> 00:00:46,806
icon in our Next.js app.
20
00:00:46,892 --> 00:00:49,408
If you look at this lecture's Resources,
21
00:00:49,408 --> 00:00:52,564
you'll find a file called "icon.png",
22
00:00:52,564 --> 00:00:54,356
that's a small image.
23
00:00:54,441 --> 00:00:56,216
Let's go and download it.
24
00:00:56,216 --> 00:00:59,407
Now, we want to save it directly in our project,
25
00:00:59,407 --> 00:01:01,628
inside the "app" folder.
26
00:01:01,628 --> 00:01:03,578
So, let's save it there.
27
00:01:04,408 --> 00:01:06,843
Next.js will automatically
28
00:01:06,843 --> 00:01:09,184
use that "icon.png" file.
29
00:01:09,278 --> 00:01:10,800
In fact, you can see that
30
00:01:10,800 --> 00:01:14,152
the browser is already displaying the new icon.
31
00:01:14,152 --> 00:01:17,618
But let me show you how this works in more detail.
32
00:01:17,618 --> 00:01:20,116
Inside the "app" folder we now
33
00:01:20,116 --> 00:01:22,281
have this "icon.png" file.
34
00:01:22,365 --> 00:01:25,146
This is a 32x32 image,
35
00:01:25,146 --> 00:01:28,855
that I've created from the "alien monster" emoji.
36
00:01:28,855 --> 00:01:31,649
Feel free to create your own icon if you like,
37
00:01:31,649 --> 00:01:32,317
by the way.
38
00:01:32,378 --> 00:01:35,047
But the App Router will automatically
39
00:01:35,047 --> 00:01:37,355
detect that file in our project,
40
00:01:37,428 --> 00:01:40,428
and generate the right HTML tag.
41
00:01:40,428 --> 00:01:42,512
If we look at the document "head",
42
00:01:42,512 --> 00:01:44,867
there is now a "link" tag,
43
00:01:44,867 --> 00:01:47,613
with all the right attributes,
44
00:01:47,613 --> 00:01:50,268
and "icon.png" as the "href".
45
00:01:50,360 --> 00:01:53,997
So, once again, Next.js makes our life easy,
46
00:01:53,997 --> 00:01:56,822
by taking care of all the details automatically.
47
00:01:56,822 --> 00:01:59,331
All we have to do is put a small
48
00:01:59,331 --> 00:02:01,291
image in the right place.
49
00:02:01,370 --> 00:02:05,638
Now, "icon.png" is just one of many files
50
00:02:05,638 --> 00:02:08,308
automatically recognized by the
51
00:02:08,308 --> 00:02:10,979
App Router as "Metadata Files".
52
00:02:11,065 --> 00:02:12,971
We can find the full list in
53
00:02:12,971 --> 00:02:14,604
this documentation page.
54
00:02:14,672 --> 00:02:16,742
In addition to the Favicon, you
55
00:02:16,742 --> 00:02:18,412
can provide other images,
56
00:02:18,479 --> 00:02:20,990
like the "apple-icon", that will
57
00:02:20,990 --> 00:02:23,423
be used on iPhones for example.
58
00:02:23,502 --> 00:02:26,427
Another file we can add to our "app" folder
59
00:02:26,427 --> 00:02:28,751
is "robots.txt".
60
00:02:28,751 --> 00:02:31,880
This is normally a simple text file with
61
00:02:31,880 --> 00:02:34,384
instructions for search engines.
62
00:02:34,462 --> 00:02:38,040
For example, you can use it to tell web crawlers
63
00:02:38,040 --> 00:02:40,954
not to index your "/private" pages.
64
00:02:40,954 --> 00:02:43,133
But the advantage of having this
65
00:02:43,133 --> 00:02:44,768
inside the "app" folder,
66
00:02:44,836 --> 00:02:47,143
rather than in the "public" folder,
67
00:02:47,143 --> 00:02:49,450
where you can put any static asset,
68
00:02:49,516 --> 00:02:51,827
is that you can also generate the
69
00:02:51,827 --> 00:02:53,647
file contents dynamically.
70
00:02:53,717 --> 00:02:57,425
You can write a "robots.js" file instead,
71
00:02:57,425 --> 00:02:59,952
with some code that will dynamically
72
00:02:59,952 --> 00:03:01,847
generate the right content.
73
00:03:01,917 --> 00:03:05,047
More than for the "robots.txt",
74
00:03:05,047 --> 00:03:07,444
this feature can be useful to
75
00:03:07,444 --> 00:03:09,510
generate a "sitemap.xml".
76
00:03:09,592 --> 00:03:12,778
This is another file used for SEO,
77
00:03:12,778 --> 00:03:16,405
but in this one you list all the available pages,
78
00:03:16,405 --> 00:03:18,469
to make it easier for search
79
00:03:18,469 --> 00:03:20,092
engines to index them.
80
00:03:20,165 --> 00:03:22,642
You can also have images for
81
00:03:22,642 --> 00:03:25,118
OpenGraph and Twitter cards.
82
00:03:25,206 --> 00:03:28,964
These will be used to show a preview of each page
83
00:03:28,964 --> 00:03:30,994
when you share links to your
84
00:03:30,994 --> 00:03:32,951
website on social networks.
85
00:03:33,024 --> 00:03:35,917
You can either put image files directly
86
00:03:35,917 --> 00:03:37,772
inside each route folder,
87
00:03:37,846 --> 00:03:42,073
or you can generate images dynamically using code.
88
00:03:42,073 --> 00:03:45,693
So we could provide a different "opengraph-image"
89
00:03:45,693 --> 00:03:49,209
for each review page in our website for example.
90
00:03:49,209 --> 00:03:51,748
For the moment, in our application
91
00:03:51,748 --> 00:03:54,063
we'll only keep the "icon.png".
92
00:03:54,137 --> 00:03:55,915
But be aware that you can have
93
00:03:55,915 --> 00:03:57,693
all these other files as well,
94
00:03:57,753 --> 00:03:59,919
if you need them for your own projects.
6698
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.