1
00:00:02,000 --> 00:00:04,000
Another very nice feature

2
00:00:04,000 --> 00:00:09,000
added by NextJS is file-based routing.

3
00:00:09,000 --> 00:00:10,000
Now what does this mean?

4
00:00:10,000 --> 00:00:14,000
In traditional React, you don't even have a router.

5
00:00:14,000 --> 00:00:16,000
And just to be clear,

6
00:00:16,000 --> 00:00:19,000
routing means that we give the user the illusion

7
00:00:19,000 --> 00:00:21,000
of having multiple pages.

8
00:00:21,000 --> 00:00:24,000
When we navigate around and we load different pages,

9
00:00:24,000 --> 00:00:27,000
then that's the job of a router.

10
00:00:27,000 --> 00:00:30,000
Typically we use React Router for that.

11
00:00:30,000 --> 00:00:34,000
This router basically watches the URL, and when it changes,

12
00:00:34,000 --> 00:00:37,000
it basically prevents the browser default

13
00:00:37,000 --> 00:00:40,000
of sending a request to some backend server,

14
00:00:40,000 --> 00:00:42,000
and instead renders different content

15
00:00:42,000 --> 00:00:44,000
on the page with React.

16
00:00:44,000 --> 00:00:47,000
A different component in the end.

17
00:00:47,000 --> 00:00:48,000
That's what routing is.

18
00:00:48,000 --> 00:00:51,000
We change what's visible on the screen

19
00:00:51,000 --> 00:00:55,000
based on the URL without sending a extra request to a server

20
00:00:55,000 --> 00:00:58,000
because we stay in that single page application

21
00:00:58,000 --> 00:01:02,000
which we typically build with React.

22
00:01:02,000 --> 00:01:05,000
Now that's routing, and typically with React,

23
00:01:05,000 --> 00:01:07,000
routing is set up in code.

24
00:01:07,000 --> 00:01:09,000
That code could look something like this,

25
00:01:09,000 --> 00:01:13,000
depending on the version of React Router you're using.

26
00:01:13,000 --> 00:01:16,000
Now this works and it's not bad, not wrong.

27
00:01:16,000 --> 00:01:18,000
React Router is a great package,

28
00:01:18,000 --> 00:01:21,000
but it is extra code which you have to write.

29
00:01:21,000 --> 00:01:25,000
And then often you end up storing your components

30
00:01:25,000 --> 00:01:29,000
that act as pages in a separate folder,

31
00:01:29,000 --> 00:01:33,000
which kind of replicates your route set up in code.

32
00:01:33,000 --> 00:01:37,000
So if you have three pages set up as pages and code,

33
00:01:37,000 --> 00:01:39,000
you have three page components

34
00:01:39,000 --> 00:01:41,000
in that pages component folder.

35
00:01:41,000 --> 00:01:43,000
Makes sense, I guess.

36
00:01:43,000 --> 00:01:44,000
Now since that's the case,

37
00:01:44,000 --> 00:01:49,000
NextJS gets rid of that in-code route definition.

38
00:01:49,000 --> 00:01:50,000
Instead, with NextJS,

39
00:01:50,000 --> 00:01:55,000
you would define pages and routes with files and folders.

40
00:01:55,000 --> 00:01:59,000
You have a special pages folder in NextJS apps

41
00:01:59,000 --> 00:02:02,000
which has to be named pages,

42
00:02:02,000 --> 00:02:06,000
and then you are structuring that folder,

43
00:02:06,000 --> 00:02:10,000
defines the routes and paths your page supports.

44
00:02:10,000 --> 00:02:11,000
And of course,

45
00:02:11,000 --> 00:02:15,000
we're also going to learn how that works in this course.

46
00:02:15,000 --> 00:02:18,000
Now that simply allows us to get rid of that extra code,

47
00:02:18,000 --> 00:02:20,000
and hence we have to write less code,

48
00:02:20,000 --> 00:02:24,000
we have less work, and it's a highly understandable concept

49
00:02:24,000 --> 00:02:25,000
because it's very close

50
00:02:25,000 --> 00:02:29,000
to how we all started with web development.

51
00:02:29,000 --> 00:02:32,000
When you're getting started with just HTML

52
00:02:32,000 --> 00:02:35,000
and CSS and some basic JavaScript maybe,

53
00:02:35,000 --> 00:02:37,000
then you build basic websites

54
00:02:37,000 --> 00:02:40,000
by adding multiple HTML files,

55
00:02:40,000 --> 00:02:42,000
and the names of these files

56
00:02:42,000 --> 00:02:44,000
or the folders in which they sit

57
00:02:44,000 --> 00:02:47,000
define how you can navigate between these files.

58
00:02:47,000 --> 00:02:50,000
How you can link these files together.

59
00:02:50,000 --> 00:02:53,000
And NextJS basically allows us to go back

60
00:02:53,000 --> 00:02:58,000
to this very basic, yet understandable concept of routing.

61
00:02:58,000 --> 00:03:02,000
And NextJS still supports all the features we might want,

62
00:03:02,000 --> 00:03:07,000
like nested routes or dynamic routes with dynamic parameters

63
00:03:07,000 --> 00:03:08,000
and all of that.

64
00:03:08,000 --> 00:03:11,000
And we're going to see that in this course, of course.