1
00:00:03,000 --> 00:00:05,716
We wrote a custom Heading component,

2
00:00:05,716 --> 00:00:09,093
that allows us to apply the same CSS styles

3
00:00:09,093 --> 00:00:11,741
to all the headings in all the pages.

4
00:00:11,741 --> 00:00:14,513
Now, note how, in the HomePage

5
00:00:14,513 --> 00:00:18,600
we import the Heading from "../components/",

6
00:00:18,600 --> 00:00:22,329
because the HomePage is inside the "app" folder,

7
00:00:22,329 --> 00:00:24,643
so we need to go up one level, and

8
00:00:24,643 --> 00:00:26,956
then into the "components" folder.

9
00:00:27,024 --> 00:00:29,223
If we look at the ReviewsPage,

10
00:00:29,223 --> 00:00:34,132
here we import it from "../../components",

11
00:00:34,132 --> 00:00:37,721
because this page is inside the "reviews" folder,

12
00:00:37,721 --> 00:00:40,127
so we need to go up two levels to

13
00:00:40,127 --> 00:00:42,241
reach the top of the project.

14
00:00:42,314 --> 00:00:45,136
And if we look at an individual review page,

15
00:00:45,136 --> 00:00:48,468
this file is inside three nested folders,

16
00:00:48,468 --> 00:00:51,484
so the relative path gets even longer.

17
00:00:51,484 --> 00:00:55,515
Now, Visual Studio Code can add imports automatically,

18
00:00:55,515 --> 00:00:56,411
which helps.

19
00:00:56,486 --> 00:00:58,744
But still, these relative paths

20
00:00:58,744 --> 00:01:00,202
can get a bit messy,

21
00:01:00,275 --> 00:01:03,846
especially if you start moving files around.

22
00:01:03,846 --> 00:01:07,698
A common way to avoid this in a Next.js project

23
00:01:07,698 --> 00:01:10,728
is to configure an "import alias".

24
00:01:10,728 --> 00:01:14,196
We can do that by creating a file at the top level

25
00:01:14,196 --> 00:01:17,171
called "jsconfig.json".

26
00:01:17,171 --> 00:01:20,971
Now, if you use TypeScript instead of JavaScript,

27
00:01:20,971 --> 00:01:23,516
you need to configure this in

28
00:01:23,516 --> 00:01:25,973
the "tsconfig.json" instead,

29
00:01:26,061 --> 00:01:28,000
without creating a new file.

30
00:01:28,000 --> 00:01:31,953
Anyway, in "jsconfig" we can write a JSON object,

31
00:01:31,953 --> 00:01:34,745
with a "compilerOptions" property,

32
00:01:34,745 --> 00:01:37,172
where we can set options used

33
00:01:37,172 --> 00:01:39,348
by both Visual Studio Code

34
00:01:39,431 --> 00:01:42,048
and the Next.js build system.

35
00:01:42,048 --> 00:01:44,412
One such option is "paths".

36
00:01:44,828 --> 00:01:46,815
This is an object where we

37
00:01:46,815 --> 00:01:48,649
can define path aliases.

38
00:01:48,725 --> 00:01:52,322
For example, we can map "@/*"

39
00:01:52,322 --> 00:01:56,315
to an array containing "./*".

40
00:01:56,315 --> 00:01:58,445
So, what this means is that

41
00:01:58,445 --> 00:02:01,843
if we write "@/" something in our code

42
00:02:01,843 --> 00:02:04,012
the compiler will translate

43
00:02:04,012 --> 00:02:05,861
it into "./" something,

44
00:02:05,941 --> 00:02:08,529
where "./" means it's relative

45
00:02:08,529 --> 00:02:10,858
to the root of our project.

46
00:02:10,943 --> 00:02:13,610
Let's save, and I'll show you this in action,

47
00:02:13,610 --> 00:02:16,194
which is probably easier to understand.

48
00:02:16,194 --> 00:02:18,532
Now, I think this should work even

49
00:02:18,532 --> 00:02:20,595
without restarting the server.

50
00:02:20,663 --> 00:02:23,267
So, what we'll do is use "@" to

51
00:02:23,267 --> 00:02:25,619
mean the top of our project.

52
00:02:25,703 --> 00:02:28,458
For example, in the HomePage component,

53
00:02:28,458 --> 00:02:31,258
we can replace ".." with "@",

54
00:02:31,258 --> 00:02:33,260
and this should import Heading

55
00:02:33,260 --> 00:02:35,129
from the "components" folder

56
00:02:35,196 --> 00:02:37,895
that's inside the root of our project.

57
00:02:37,895 --> 00:02:41,079
If we reload, everything should still work.

58
00:02:41,079 --> 00:02:43,124
Now, in the ReviewsPage

59
00:02:43,124 --> 00:02:46,841
we can do the same, and write "@/components".

60
00:02:46,841 --> 00:02:50,629
This way we can get rid of all the ".." segments.

61
00:02:50,629 --> 00:02:52,683
And the benefit will be even

62
00:02:52,683 --> 00:02:54,736
clearer in each review page,

63
00:02:54,809 --> 00:02:57,016
where we had to go up 3 levels

64
00:02:57,016 --> 00:02:59,076
to go into the right folder.

65
00:02:59,150 --> 00:03:02,141
Let's do the same for the "Hollow Knight" page.

66
00:03:02,590 --> 00:03:05,673
We just need to go through this process once;

67
00:03:05,673 --> 00:03:07,809
from now on we'll always use

68
00:03:07,809 --> 00:03:09,945
"@" in front of our imports.

69
00:03:10,021 --> 00:03:13,484
Ok, the About page was the last one.

70
00:03:13,484 --> 00:03:16,403
Note that, by using the "@" in front,

71
00:03:16,403 --> 00:03:18,331
the import path is now the

72
00:03:18,331 --> 00:03:20,110
same in all the modules,

73
00:03:20,184 --> 00:03:22,265
no matter where each file is

74
00:03:22,265 --> 00:03:24,272
located inside the project.

75
00:03:24,347 --> 00:03:26,974
This will also make it easier to copy

76
00:03:26,974 --> 00:03:29,317
imports from one file to another,

77
00:03:29,388 --> 00:03:32,647
besides just making our code look cleaner.

78
00:03:32,647 --> 00:03:36,268
All we need to do is configure a module

79
00:03:36,268 --> 00:03:39,054
path alias in "jsconfig.json",

80
00:03:39,147 --> 00:03:42,881
or "tsconfig.json" for TypeScript.

81
00:03:42,881 --> 00:03:45,786
If you use the Create Next App tool

82
00:03:45,786 --> 00:03:48,609
to initialize your Next.js project

83
00:03:48,692 --> 00:03:50,952
it will automatically configure

84
00:03:50,952 --> 00:03:52,629
the path alias for you.

85
00:03:52,702 --> 00:03:54,643
But by going through this step

86
00:03:54,643 --> 00:03:56,067
manually in this video

87
00:03:56,132 --> 00:03:59,058
at least now you understand how it works,

88
00:03:59,058 --> 00:04:00,485
and why it's useful.