All language subtitles for 016 Module Summary_Downloadly.ir_en

af Afrikaans
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian Download
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:02,285 --> 00:00:03,118 [Maximilian Schwarzmuller] And that is it 2 00:00:03,118 --> 00:00:05,400 for this course section. 3 00:00:05,400 --> 00:00:09,150 We've now had a detailed look at file based routing 4 00:00:09,150 --> 00:00:13,300 and how we set up pages and how we navigate between pages 5 00:00:13,300 --> 00:00:15,870 with Next.js. 6 00:00:15,870 --> 00:00:20,240 We had a look at the pages directory and that the files 7 00:00:20,240 --> 00:00:22,790 and folders in there have a special meaning. 8 00:00:22,790 --> 00:00:26,560 Index JS is always treated as a route page 9 00:00:26,560 --> 00:00:28,190 for the given folder. 10 00:00:28,190 --> 00:00:31,380 So either the overall route page, if it's an index 11 00:00:31,380 --> 00:00:36,380 JS file in pages or in portfolio or other sub folders, 12 00:00:36,780 --> 00:00:41,780 Index JS would be loaded for /portfolio/ nothing. 13 00:00:42,160 --> 00:00:45,730 We also can have other file names to, for example, 14 00:00:45,730 --> 00:00:50,730 load/portfolio/list, and then load this list page component. 15 00:00:51,810 --> 00:00:54,390 And we can also have dynamic segments 16 00:00:54,390 --> 00:00:59,390 by enclosing placeholder identifiers in square brackets 17 00:00:59,800 --> 00:01:02,360 and then loading different kinds of data 18 00:01:02,360 --> 00:01:06,070 for different concrete values we might be getting. 19 00:01:06,070 --> 00:01:08,930 And we get access to the concrete value entered 20 00:01:08,930 --> 00:01:13,010 for a POV segment, through the use router hook, 21 00:01:13,010 --> 00:01:13,873 as you learned. 22 00:01:14,880 --> 00:01:17,970 Now, we can also have nested dynamic segments 23 00:01:17,970 --> 00:01:20,270 as we did with clients. 24 00:01:20,270 --> 00:01:25,130 And we can also have such catch-all files here 25 00:01:25,130 --> 00:01:28,000 by having square brackets and then three dots 26 00:01:28,000 --> 00:01:31,370 in front of any identifier of our choice. 27 00:01:31,370 --> 00:01:34,940 And that allows us to catch multiple dynamic segments 28 00:01:34,940 --> 00:01:36,440 in one go. 29 00:01:36,440 --> 00:01:38,990 And all these are very powerful features 30 00:01:38,990 --> 00:01:42,540 for loading pages in exactly the way you need. 31 00:01:42,540 --> 00:01:45,140 Now for navigating around we want to use the link 32 00:01:45,140 --> 00:01:48,040 component provided by Next.js 33 00:01:48,040 --> 00:01:50,730 or, if we need to navigate programmatically, 34 00:01:50,730 --> 00:01:53,230 we can do that through that router object 35 00:01:53,230 --> 00:01:57,660 which we get through use router or in class-based components 36 00:01:57,660 --> 00:02:00,823 through to with router, higher order component. 37 00:02:01,810 --> 00:02:05,050 And therefore, we now know what file-based routing is 38 00:02:05,050 --> 00:02:06,410 and how it works. 39 00:02:06,410 --> 00:02:09,880 But is that now better than the code-based approach 40 00:02:09,880 --> 00:02:12,990 we know from standard react projects 41 00:02:12,990 --> 00:02:16,000 that do not use Next.js 42 00:02:16,000 --> 00:02:18,830 Ultimately that is, of course, up to you to decide 43 00:02:18,830 --> 00:02:21,330 but I want to give you my perspective on that 44 00:02:21,330 --> 00:02:24,123 and a small comparison I came up with. 45 00:02:25,120 --> 00:02:28,050 When we compare file-based routing, which we get 46 00:02:28,050 --> 00:02:31,440 with Next.js to this standard code-based routing 47 00:02:31,440 --> 00:02:34,910 we have in standard react apps with react router, 48 00:02:34,910 --> 00:02:37,910 then in the case of file-based routing, 49 00:02:37,910 --> 00:02:42,420 we have no extra boiler plate code that needs to be written. 50 00:02:42,420 --> 00:02:46,830 So this kind of route configuration, which we need to write 51 00:02:46,830 --> 00:02:50,030 in our react components when using react router, 52 00:02:50,030 --> 00:02:53,220 that is not required with Next.js 53 00:02:53,220 --> 00:02:55,890 and the file-based routing system. 54 00:02:55,890 --> 00:02:59,420 Instead of writing this boiler plate code, 55 00:02:59,420 --> 00:03:01,980 we simply create component files, 56 00:03:01,980 --> 00:03:04,230 which we would need to do anyways, 57 00:03:04,230 --> 00:03:09,010 and we just store them in a structure that replicates 58 00:03:09,010 --> 00:03:12,800 the path we want to have in our URL in the end. 59 00:03:12,800 --> 00:03:17,090 And that in my opinion is a very natural way of, well, 60 00:03:17,090 --> 00:03:19,290 setting up all our page components 61 00:03:19,290 --> 00:03:21,880 and of storing our page components. 62 00:03:21,880 --> 00:03:25,010 So therefore, we do something we need to do anyways, 63 00:03:25,010 --> 00:03:28,730 and we save the other part of creating extra code, 64 00:03:28,730 --> 00:03:31,900 just to tell react which components 65 00:03:31,900 --> 00:03:34,190 should be loaded for which path. 66 00:03:34,190 --> 00:03:37,630 We combined that into one step instead. 67 00:03:37,630 --> 00:03:41,320 Therefore, in my opinion, that's a very intuitive system 68 00:03:41,320 --> 00:03:44,890 of creating components and of storing components 69 00:03:44,890 --> 00:03:46,750 and of setting up routing, therefore. 70 00:03:46,750 --> 00:03:48,750 We don't need to do anything for that. 71 00:03:48,750 --> 00:03:51,510 We get the routing for free, if you want to call it 72 00:03:51,510 --> 00:03:52,730 like that. 73 00:03:52,730 --> 00:03:56,090 So with file-based routing the file and folder structure 74 00:03:56,090 --> 00:03:59,720 we have is everything that influences our routes. 75 00:03:59,720 --> 00:04:03,240 And we, therefore, fully control the POVs we support 76 00:04:03,240 --> 00:04:06,610 in our application, through our folder structure 77 00:04:06,610 --> 00:04:08,900 in that pages folder. 78 00:04:08,900 --> 00:04:11,680 Now for navigating around, we use a link component 79 00:04:11,680 --> 00:04:14,220 and we can also navigate imperatively, 80 00:04:14,220 --> 00:04:16,303 so there's nothing special about that. 81 00:04:17,200 --> 00:04:19,670 Now for a code-based routing, we do have 82 00:04:19,670 --> 00:04:22,720 that extra boiler plate set up in code. 83 00:04:22,720 --> 00:04:25,760 Though, of course, you could argue that by doing that, 84 00:04:25,760 --> 00:04:28,440 you have some code where you can see 85 00:04:28,440 --> 00:04:30,340 which routes are supported. 86 00:04:30,340 --> 00:04:32,940 You don't need to look at the file system 87 00:04:32,940 --> 00:04:35,290 though I would argue that looking 88 00:04:35,290 --> 00:04:38,220 at the file system wouldn't be too difficult, 89 00:04:38,220 --> 00:04:40,080 but of course, ultimately that's of course, 90 00:04:40,080 --> 00:04:41,910 up to you to judge. 91 00:04:41,910 --> 00:04:44,050 Now, it is definitely straightforward, 92 00:04:44,050 --> 00:04:47,210 don't get me wrong, but it includes new components 93 00:04:47,210 --> 00:04:48,890 and concepts, which you need to learn, 94 00:04:48,890 --> 00:04:51,560 like that switch component, and that route component 95 00:04:51,560 --> 00:04:54,210 and how to order your routes and so on. 96 00:04:54,210 --> 00:04:56,600 So that can be annoying. 97 00:04:56,600 --> 00:04:58,610 Now a potential advantage, of course, 98 00:04:58,610 --> 00:05:00,520 is that the file and folders set up, 99 00:05:00,520 --> 00:05:02,270 does not matter at all. 100 00:05:02,270 --> 00:05:05,042 In my opinion, having the folder structure 101 00:05:05,042 --> 00:05:08,380 dictate the POS is an advantage 102 00:05:08,380 --> 00:05:11,170 but you could see this as a disadvantage as well. 103 00:05:11,170 --> 00:05:14,210 And with code-based routing you can store your component 104 00:05:14,210 --> 00:05:15,630 files wherever you want. 105 00:05:15,630 --> 00:05:20,190 They won't have any influence on your routes or your POS. 106 00:05:20,190 --> 00:05:23,940 Now navigation works pretty much as it does with Next.js. 107 00:05:23,940 --> 00:05:25,410 You have a link component 108 00:05:25,410 --> 00:05:27,850 and you can also navigate imperatively there. 109 00:05:27,850 --> 00:05:30,030 So no differences there. 110 00:05:30,030 --> 00:05:31,890 Therefore, overall, in my opinion, 111 00:05:31,890 --> 00:05:34,170 file-based routing is more intuitive 112 00:05:34,170 --> 00:05:36,790 and is easier to set up, but it is, of course, 113 00:05:36,790 --> 00:05:38,300 up to you to judge. 114 00:05:38,300 --> 00:05:43,300 Either way, it is how Next.js thinks about pages and routes. 115 00:05:43,700 --> 00:05:46,330 And therefore, when working with Next.js 116 00:05:46,330 --> 00:05:49,203 you want to embrace that file-based approach. 9320

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.