Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,130 --> 00:00:04,470
Now we know about API routes,
2
00:00:04,470 --> 00:00:07,250
including dynamic API routes.
3
00:00:07,250 --> 00:00:08,970
Now it is worth a note that
4
00:00:08,970 --> 00:00:11,690
there are some alternatives to how we name
5
00:00:11,690 --> 00:00:15,410
and structure our files inside of the API folder.
6
00:00:15,410 --> 00:00:18,320
And those alternatives are equivalent
7
00:00:18,320 --> 00:00:20,400
to the different approaches we can use
8
00:00:20,400 --> 00:00:22,870
for regular pages.
9
00:00:22,870 --> 00:00:27,870
For example, you can also have catch-all dynamic API routes
10
00:00:28,090 --> 00:00:31,490
by adding free dots in front of any placeholder name
11
00:00:31,490 --> 00:00:33,010
of your choice.
12
00:00:33,010 --> 00:00:38,010
This will then not just handle requests to /API/some value,
13
00:00:38,930 --> 00:00:42,450
but also to more segments you might have.
14
00:00:42,450 --> 00:00:45,560
Equivalent to what you learned about regular pages
15
00:00:45,560 --> 00:00:48,030
and catch-all pages.
16
00:00:48,030 --> 00:00:51,300
Now we don't need a catch-all dynamic API route here
17
00:00:51,300 --> 00:00:53,470
but it is worth knowing about it.
18
00:00:53,470 --> 00:00:55,570
It's all important to understand
19
00:00:55,570 --> 00:01:00,010
how Next.js prioritizes these different files.
20
00:01:00,010 --> 00:01:03,880
If we send the request to /API/feedback,
21
00:01:03,880 --> 00:01:08,200
it's decode into feedback.js file, it will be executed.
22
00:01:08,200 --> 00:01:11,000
Now that is not necessarily obvious
23
00:01:11,000 --> 00:01:13,660
because we have this dynamic API route.
24
00:01:13,660 --> 00:01:18,660
So it could also be possible that requests to /API/feedback
25
00:01:18,690 --> 00:01:23,270
are consumed by this file because feedback is simply treated
26
00:01:23,270 --> 00:01:27,600
as a concrete value for this feedback ID placeholder.
27
00:01:27,600 --> 00:01:32,550
But Next.js is smart just as it is for regular pages.
28
00:01:32,550 --> 00:01:37,550
And if there is a more specific page for a given path value,
29
00:01:37,600 --> 00:01:40,560
so since we have a feedback.js file in this case
30
00:01:40,560 --> 00:01:42,980
it will use that more specific file
31
00:01:42,980 --> 00:01:45,870
which makes more sense for this kind of path
32
00:01:45,870 --> 00:01:48,979
than the more generic dynamic file.
33
00:01:48,979 --> 00:01:52,960
/API some value on the other hand would trigger
34
00:01:52,960 --> 00:01:56,640
the code in the dynamic API route.
35
00:01:56,640 --> 00:01:58,160
So that's just worth knowing.
36
00:01:58,160 --> 00:02:00,300
It automatically works correctly here
37
00:02:00,300 --> 00:02:02,730
but it is important to be aware of the fact
38
00:02:02,730 --> 00:02:06,913
that Next.js will do this prioritization for you.
39
00:02:08,406 --> 00:02:10,490
Now, another important thing to know
40
00:02:10,490 --> 00:02:12,440
is that you have some flexibility
41
00:02:12,440 --> 00:02:15,760
regarding how you structure your files.
42
00:02:15,760 --> 00:02:19,940
You can add a feedback.js file in the API folder
43
00:02:19,940 --> 00:02:24,120
to support requests to /API/feedback.
44
00:02:24,120 --> 00:02:27,500
Alternatively, just as with the regular pages,
45
00:02:27,500 --> 00:02:31,710
you could also add a feedback sub folder in the API folder
46
00:02:31,710 --> 00:02:34,570
and then move to file in there
47
00:02:34,570 --> 00:02:38,000
and rename it to index.js.
48
00:02:38,000 --> 00:02:40,420
And here vscode is asking me
49
00:02:40,420 --> 00:02:43,480
whether it should automatically update all imports
50
00:02:43,480 --> 00:02:45,320
that pointed at this file,
51
00:02:45,320 --> 00:02:46,570
and I will say, yes.
52
00:02:46,570 --> 00:02:49,590
If you don't get the prompt or you chose, no,
53
00:02:49,590 --> 00:02:54,280
you should manually update those import puffs.
54
00:02:54,280 --> 00:02:56,280
So that is the alternative.
55
00:02:56,280 --> 00:02:59,650
A file named index.js in the feedback folder
56
00:02:59,650 --> 00:03:02,260
in the API folder is the equivalent
57
00:03:02,260 --> 00:03:06,390
to having a feedback.js file inside of the API folder,
58
00:03:06,390 --> 00:03:09,770
just as it works for regular pages.
59
00:03:09,770 --> 00:03:13,870
We can also move our feedback ID js file in there.
60
00:03:13,870 --> 00:03:15,010
But if we do that,
61
00:03:15,010 --> 00:03:18,836
that of course also changes the way our API works.
62
00:03:18,836 --> 00:03:21,620
Previously, since feedback ID,
63
00:03:21,620 --> 00:03:26,390
this dynamic API route was directly in the API folder
64
00:03:26,390 --> 00:03:30,130
previously /API some value
65
00:03:30,130 --> 00:03:34,500
triggered the code in this feedback ID file.
66
00:03:34,500 --> 00:03:36,860
Now, since we're in a feedback sub folder,
67
00:03:36,860 --> 00:03:41,690
it's actually /API/feedback/some value
68
00:03:41,690 --> 00:03:43,483
that triggers the code in here.
69
00:03:44,750 --> 00:03:48,130
Now that is actually a path that makes more sense to me.
70
00:03:48,130 --> 00:03:49,720
It's more descriptive,
71
00:03:49,720 --> 00:03:52,920
it's clearer that some requests sent
72
00:03:52,920 --> 00:03:56,300
to /API/feedback/some value
73
00:03:56,300 --> 00:03:59,670
should fetch more details for a single feedback
74
00:03:59,670 --> 00:04:03,190
than if we have just /API/F1.
75
00:04:03,190 --> 00:04:06,740
That doesn't tell us that it's about fetching feedback data
76
00:04:06,740 --> 00:04:09,200
if we just look at this kind of path.
77
00:04:09,200 --> 00:04:11,570
And hence it will keep this structure
78
00:04:11,570 --> 00:04:14,700
of having these square bracket feedback ID file
79
00:04:14,700 --> 00:04:18,680
inside of the feedback folder inside of the API folder.
80
00:04:18,680 --> 00:04:21,920
However, that means that in the index.js file
81
00:04:21,920 --> 00:04:24,750
in the feedback folder, in the regular pages.
82
00:04:24,750 --> 00:04:26,920
So in the feedback page component,
83
00:04:26,920 --> 00:04:29,820
we also need to update this URL
84
00:04:29,820 --> 00:04:34,820
and send our request to /API/feedback/some ID,
85
00:04:35,320 --> 00:04:38,533
because I changed that structure in the API's folder.
86
00:04:39,680 --> 00:04:42,840
And now it looks like I broke some imports as well.
87
00:04:42,840 --> 00:04:45,783
Yes, here we should import from the index file.
88
00:04:47,010 --> 00:04:48,543
And now that works again.
89
00:04:49,840 --> 00:04:52,680
So if I now reload, that all works,
90
00:04:52,680 --> 00:04:54,723
that works, looking good.
91
00:04:56,060 --> 00:04:59,130
So that is how you can also structure your files
92
00:04:59,130 --> 00:05:03,030
and folders in the API folder, in the pages folder.
93
00:05:03,030 --> 00:05:06,090
It essentially works just as it does
94
00:05:06,090 --> 00:05:07,673
for regular pages.
7427
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.