Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,200 --> 00:00:06,200
Now that's it for the very basics of NextJS,
2
00:00:06,200 --> 00:00:09,540
and especially the file-based routing system.
3
00:00:09,540 --> 00:00:13,240
How you can create multiple pages, including dynamic pages,
4
00:00:13,240 --> 00:00:14,960
and navigate around.
5
00:00:14,960 --> 00:00:17,810
Now, NextJS also has a lot to offer
6
00:00:17,810 --> 00:00:20,580
when it comes to pre-rendering these pages
7
00:00:20,580 --> 00:00:23,460
and when it comes to fetching data for pages.
8
00:00:23,460 --> 00:00:26,270
And that's therefore, the next content block
9
00:00:26,270 --> 00:00:29,450
we're going to dive in, in this course section.
10
00:00:29,450 --> 00:00:33,430
But for that, we're going to leave this dummy news project
11
00:00:33,430 --> 00:00:36,700
which was only there for learning the core basics
12
00:00:36,700 --> 00:00:38,220
about file-based routing,
13
00:00:38,220 --> 00:00:42,020
and we're going to switch to a different project instead.
14
00:00:42,020 --> 00:00:44,710
And for this, I've got a brand new project,
15
00:00:44,710 --> 00:00:47,770
and this project is about the same idea.
16
00:00:47,770 --> 00:00:50,730
It's the same kind of project as we had
17
00:00:50,730 --> 00:00:53,500
in our React crash course tutorial,
18
00:00:53,500 --> 00:00:56,410
but you don't need to go through that module first.
19
00:00:56,410 --> 00:00:59,930
Instead attach to find a starting project,
20
00:00:59,930 --> 00:01:02,070
which I did create with that
21
00:01:02,070 --> 00:01:05,880
NPX create next app command again,
22
00:01:05,880 --> 00:01:07,430
just a bit cleaned up,
23
00:01:07,430 --> 00:01:11,170
and with some components which are pre-built for you
24
00:01:11,170 --> 00:01:15,150
simply because these are standard React components,
25
00:01:15,150 --> 00:01:18,420
nothing NextJS-specific in there yet.
26
00:01:18,420 --> 00:01:21,350
We're going to work on them a bit throughout this course
27
00:01:21,350 --> 00:01:24,390
but at the moment they're just basic React components,
28
00:01:24,390 --> 00:01:26,290
and since you already know React,
29
00:01:26,290 --> 00:01:28,880
I don't want to bore you by again,
30
00:01:28,880 --> 00:01:32,140
writing such basic react components.
31
00:01:32,140 --> 00:01:35,360
Instead here, we want to focus on the Next features
32
00:01:35,360 --> 00:01:38,520
and the many cool features NextJS adds,
33
00:01:38,520 --> 00:01:41,060
and hence, this starting project already
34
00:01:41,060 --> 00:01:44,610
has a couple of components which we will use.
35
00:01:44,610 --> 00:01:47,430
On the other hand, the pages folder is empty
36
00:01:47,430 --> 00:01:51,410
so that we can again, practice this file-based routing
37
00:01:51,410 --> 00:01:54,240
and add some pages for this project,
38
00:01:54,240 --> 00:01:59,240
and the styles folder also just has some basic styles here.
39
00:01:59,580 --> 00:02:02,360
And therefore we're basically starting from scratch here
40
00:02:02,360 --> 00:02:05,000
with a brand new NextJS project,
41
00:02:05,000 --> 00:02:09,550
and we're going to build this meetup application here,
42
00:02:09,550 --> 00:02:12,910
which again, is kind of similar to what we built
43
00:02:12,910 --> 00:02:15,940
in this React tutorial already.
44
00:02:15,940 --> 00:02:18,490
But there also are some differences.
45
00:02:18,490 --> 00:02:20,460
The application we're going to build
46
00:02:20,460 --> 00:02:23,220
is all about having some meetups.
47
00:02:23,220 --> 00:02:27,120
And we got a page that allows us to create new meetups,
48
00:02:27,120 --> 00:02:30,530
and that those meetups will then be sent to some backend
49
00:02:30,530 --> 00:02:33,060
and will be stored in some database.
50
00:02:33,060 --> 00:02:36,900
That is logic we're going to add throughout this course.
51
00:02:36,900 --> 00:02:39,030
And we then have a page where we fetch
52
00:02:39,030 --> 00:02:41,690
and display a list of meetups.
53
00:02:41,690 --> 00:02:43,260
And that's of course also something
54
00:02:43,260 --> 00:02:45,270
we're going to build together.
55
00:02:45,270 --> 00:02:49,980
And we then can also visit the detail page of a given meetup
56
00:02:49,980 --> 00:02:52,670
to fetch and to display the details
57
00:02:52,670 --> 00:02:54,560
for that specific meetup.
58
00:02:54,560 --> 00:02:56,410
And that will be a dynamic page
59
00:02:56,410 --> 00:03:00,847
where different meetup identifiers are encoded into URL.
60
00:03:01,980 --> 00:03:03,900
And therefore, we're going to practice
61
00:03:03,900 --> 00:03:08,090
what we briefly touched on already, file-based routing,
62
00:03:08,090 --> 00:03:10,940
and we're going to add a bunch of new features
63
00:03:10,940 --> 00:03:14,800
where NextJS helps us relate it to data fetching
64
00:03:14,800 --> 00:03:19,350
but also related to blending back-end and front-end code
65
00:03:19,350 --> 00:03:22,050
and sending requests to an API
66
00:03:22,050 --> 00:03:26,020
which we will build together in this next project.
67
00:03:26,020 --> 00:03:29,030
And therefore, we've got plenty of exciting topics to cover.
68
00:03:29,030 --> 00:03:30,143
Let's dive in.
5534
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.