1
00:00:02,000 --> 00:00:04,000
In traditional React apps,

2
00:00:04,000 --> 00:00:09,000
so in a React apps where you are not using Next.js,

3
00:00:09,000 --> 00:00:12,000
you set up routing like this.

4
00:00:12,000 --> 00:00:16,000
You have some code in one of your React components,

5
00:00:16,000 --> 00:00:20,000
where you do add various route related components

6
00:00:20,000 --> 00:00:24,000
from react-router-dom, which is a great library.

7
00:00:24,000 --> 00:00:28,000
And there of course isn't necessarily anything wrong

8
00:00:28,000 --> 00:00:32,000
with this setup, but this is not how we'll do it

9
00:00:32,000 --> 00:00:34,000
with Next.js.

10
00:00:34,000 --> 00:00:37,000
There, we don't install React router,

11
00:00:37,000 --> 00:00:40,000
and we won't write any JSX code

12
00:00:40,000 --> 00:00:43,000
or any JavaScript code at all,

13
00:00:43,000 --> 00:00:48,000
when it comes to defining our routes and our page structure.

14
00:00:48,000 --> 00:00:53,000
Instead with Next.js, we create React component files.

15
00:00:53,000 --> 00:00:57,000
So regular React component files

16
00:00:57,000 --> 00:00:59,000
in a special folder, as you will see,

17
00:00:59,000 --> 00:01:04,000
and we will then let Next.js infer our routes

18
00:01:04,000 --> 00:01:09,000
in our project from that folder structure we set up there.

19
00:01:09,000 --> 00:01:12,000
We use the special pages folder for that

20
00:01:12,000 --> 00:01:15,000
because Next.js will automatically look

21
00:01:15,000 --> 00:01:20,000
into that pages folder to infer our route structure.

22
00:01:22,000 --> 00:01:23,000
Now, how does this work?

23
00:01:23,000 --> 00:01:26,000
Well, let's consider this example.

24
00:01:26,000 --> 00:01:29,000
This example pages folder.

25
00:01:29,000 --> 00:01:31,000
Here in this pages folder,

26
00:01:31,000 --> 00:01:33,000
we would have an index.js file

27
00:01:33,000 --> 00:01:36,000
and then as a sibling to that file,

28
00:01:36,000 --> 00:01:38,000
we have the about.js file.

29
00:01:38,000 --> 00:01:40,000
And then we have the products folder

30
00:01:40,000 --> 00:01:43,000
as a sibling to the index and about JS files,

31
00:01:43,000 --> 00:01:46,000
so as a sub folder in pages

32
00:01:46,000 --> 00:01:51,000
and in products, we have two additional JavaScript files,

33
00:01:51,000 --> 00:01:52,000
the index.js file again,

34
00:01:52,000 --> 00:01:55,000
but now in products instead of just pages

35
00:01:55,000 --> 00:01:59,000
and then a file with a rather strange file name,

36
00:01:59,000 --> 00:02:01,000
square brackets

37
00:02:01,000 --> 00:02:05,000
and then id inside of those square brackets dot JS.

38
00:02:06,000 --> 00:02:09,000
Now we'll come back to this strange looking file name

39
00:02:09,000 --> 00:02:10,000
in a second.

40
00:02:10,000 --> 00:02:14,000
Let's first of all, have a look at what Next.js would do.

41
00:02:14,000 --> 00:02:17,000
It would look at the pages folder,

42
00:02:17,000 --> 00:02:21,000
and now infer a couple of routes we wanna support.

43
00:02:21,000 --> 00:02:24,000
For example, based on index.js,

44
00:02:24,000 --> 00:02:27,000
it would infer that this should be our main starting page

45
00:02:27,000 --> 00:02:32,000
for requests to our domain slash nothing.

46
00:02:32,000 --> 00:02:34,000
So for an empty path.

47
00:02:35,000 --> 00:02:39,000
For about.js, it would infer that we, for example,

48
00:02:39,000 --> 00:02:41,000
wanna load an about page here,

49
00:02:41,000 --> 00:02:45,000
so it would in the end just render the component returned

50
00:02:45,000 --> 00:02:47,000
in the about.js file

51
00:02:47,000 --> 00:02:52,000
and it would load that component for our domain.com/about.

52
00:02:53,000 --> 00:02:57,000
So it takes the file name as a path, as you can tell

53
00:02:57,000 --> 00:03:02,000
with the exception of index.js, that's a special file name,

54
00:03:02,000 --> 00:03:07,000
which will be assume as the route path for the given folder

55
00:03:07,000 --> 00:03:08,000
in which you are.

56
00:03:08,000 --> 00:03:10,000
So directly in the pages folder,

57
00:03:10,000 --> 00:03:12,000
index.js would be our route path

58
00:03:12,000 --> 00:03:15,000
and empty slash after the domain.

59
00:03:15,000 --> 00:03:17,000
Inside of products, for example,

60
00:03:17,000 --> 00:03:22,000
index.js would be loaded from my domain.com/products.

61
00:03:22,000 --> 00:03:25,000
So not slash products slash index,

62
00:03:25,000 --> 00:03:28,000
but just slash products slash nothing,

63
00:03:28,000 --> 00:03:32,000
loads index just as just my domain slash nothing

64
00:03:32,000 --> 00:03:35,000
loads index in the pages folder.

65
00:03:35,000 --> 00:03:37,000
If we have a file named differently,

66
00:03:37,000 --> 00:03:39,000
like about.js here,

67
00:03:39,000 --> 00:03:43,000
then this file name is used as a path segment.

68
00:03:43,000 --> 00:03:46,000
And alternative to naming a file about.js,

69
00:03:46,000 --> 00:03:51,000
therefore, would also be to create a sub folder named about

70
00:03:51,000 --> 00:03:54,000
with an index.js file inside of it,

71
00:03:54,000 --> 00:03:56,000
that would lead to the same result,

72
00:03:56,000 --> 00:04:00,000
because index.js files are treated in that special way,

73
00:04:00,000 --> 00:04:01,000
I just explained.

74
00:04:01,000 --> 00:04:03,000
And of course, we're going to see

75
00:04:03,000 --> 00:04:05,000
all of that in action soon.

76
00:04:05,000 --> 00:04:09,000
Now, what about this strange square bracket file name here?

77
00:04:09,000 --> 00:04:14,000
This is a special notation we can use to add dynamic path.

78
00:04:14,000 --> 00:04:18,000
So for example, if we have the product detail page here,

79
00:04:18,000 --> 00:04:21,000
so if we show some content for a selected product,

80
00:04:21,000 --> 00:04:24,000
then of course we wanna show that same page

81
00:04:24,000 --> 00:04:26,000
for different products.

82
00:04:26,000 --> 00:04:29,000
So our URL would look something like this,

83
00:04:29,000 --> 00:04:34,000
our domain.com/products/and then the ID of a given product.

84
00:04:35,000 --> 00:04:38,000
And of course we can have multiple products

85
00:04:38,000 --> 00:04:39,000
and therefore multiple IDs.

86
00:04:39,000 --> 00:04:42,000
And that's why this is dynamic.

87
00:04:42,000 --> 00:04:45,000
The ID isn't always the same.

88
00:04:45,000 --> 00:04:46,000
And as a developer,

89
00:04:46,000 --> 00:04:50,000
we can't predefine our different detailed pages

90
00:04:50,000 --> 00:04:52,000
for the different products,

91
00:04:52,000 --> 00:04:55,000
because a, we might not know in advance

92
00:04:55,000 --> 00:04:57,000
how many products we'll have,

93
00:04:57,000 --> 00:05:01,000
and b, even if we knew, it's always the same page.

94
00:05:01,000 --> 00:05:04,000
Just the data on the page will be different.

95
00:05:04,000 --> 00:05:09,000
And that's why Next.js supports such dynamic paths as well,

96
00:05:10,000 --> 00:05:13,000
with that special file name.

97
00:05:13,000 --> 00:05:15,000
So that is the equivalent

98
00:05:15,000 --> 00:05:20,000
to defining such a dynamic path with React router like this.