1
00:00:00,000 --> 00:00:02,000
Now there also are two other files

2
00:00:02,000 --> 00:00:05,000
in that app directory, which I haven't covered yet.

3
00:00:05,000 --> 00:00:08,000
And one is the globals.css file.

4
00:00:08,000 --> 00:00:12,000
Now, in there I set up some CSS styles for you,

5
00:00:12,000 --> 00:00:16,000
and this file is being imported into the layout.js file,

6
00:00:16,000 --> 00:00:19,000
so that it's essentially available on every page

7
00:00:19,000 --> 00:00:20,000
that's being loaded.

8
00:00:21,000 --> 00:00:24,000
This is how you can import CSS files in NextJS.

9
00:00:24,000 --> 00:00:26,000
It's an approach that also works

10
00:00:26,000 --> 00:00:29,000
in most Vanilla React projects,

11
00:00:29,000 --> 00:00:31,000
and this will then simply ensure that these styles

12
00:00:31,000 --> 00:00:34,000
are made available on every loaded page.

13
00:00:35,000 --> 00:00:38,000
Besides that, we also have an icon.png file here

14
00:00:38,000 --> 00:00:41,000
and that's another special file name actually.

15
00:00:41,000 --> 00:00:44,000
If you add an image called icon,

16
00:00:44,000 --> 00:00:48,000
it will be used as a favicon by NextJS.

17
00:00:48,000 --> 00:00:51,000
Because you might've noticed that in the layout.js file,

18
00:00:51,000 --> 00:00:56,000
we did not set up anything regarding a favicon,

19
00:00:56,000 --> 00:00:59,000
so that little icon that shows up in the tab here,

20
00:00:59,000 --> 00:01:02,000
for example, and yet we have one here

21
00:01:02,000 --> 00:01:03,000
if you take a close look,

22
00:01:03,000 --> 00:01:08,000
and that's the case because I added this icon.png file,

23
00:01:08,000 --> 00:01:10,000
which uses this special icon name,

24
00:01:10,000 --> 00:01:13,000
and if you add an image called icon directly

25
00:01:13,000 --> 00:01:15,000
in the app folder as I am doing it here,

26
00:01:15,000 --> 00:01:18,000
this will be used as a favicon.

27
00:01:18,000 --> 00:01:23,000
So as you can tell by now, the app folder is very important.

28
00:01:23,000 --> 00:01:27,000
In there, you define your routes by adding folders,

29
00:01:27,000 --> 00:01:30,000
and you have some reserved file names like page.js,

30
00:01:30,000 --> 00:01:33,000
icon.png, or layout.js,

31
00:01:33,000 --> 00:01:37,000
which then simply unlock different features, you could say.

32
00:01:37,000 --> 00:01:39,000
And for example, a route layout is needed

33
00:01:39,000 --> 00:01:43,000
just as you need page.js files to really set up a route,

34
00:01:45,000 --> 00:01:49,000
but you're not limited to these special files in NextJS.

35
00:01:49,000 --> 00:01:51,000
We can, for example,

36
00:01:51,000 --> 00:01:54,000
still also add regular React components,

37
00:01:54,000 --> 00:01:57,000
which are not treated as pages.

38
00:01:57,000 --> 00:01:59,000
For that, let's say that we wanna put this image

39
00:01:59,000 --> 00:02:02,000
into this header into a separate component,

40
00:02:02,000 --> 00:02:04,000
so that we cut it from here

41
00:02:04,000 --> 00:02:06,000
and we instead add it to a component.

42
00:02:07,000 --> 00:02:10,000
We could do that by adding a new JavaScript file anywhere

43
00:02:10,000 --> 00:02:12,000
in that project,

44
00:02:12,000 --> 00:02:15,000
for example, next to the page.js file,

45
00:02:15,000 --> 00:02:17,000
and we could name it header.js.

46
00:02:19,000 --> 00:02:23,000
By the way, you can also use .jsx as an extension also

47
00:02:23,000 --> 00:02:26,000
for those pages if you prefer that.

48
00:02:26,000 --> 00:02:27,000
But here I'll stick to the default,

49
00:02:27,000 --> 00:02:30,000
which was .js in this next project.

50
00:02:31,000 --> 00:02:33,000
But now I added this file here.

51
00:02:33,000 --> 00:02:35,000
You could also name this Header

52
00:02:35,000 --> 00:02:37,000
with an uppercase starting character.

53
00:02:37,000 --> 00:02:40,000
But here, since all these other default

54
00:02:40,000 --> 00:02:44,000
and important NextJS file names use lowercase names,

55
00:02:44,000 --> 00:02:46,000
I'll stick to a lowercase name

56
00:02:46,000 --> 00:02:48,000
for my component file here as well.

57
00:02:49,000 --> 00:02:52,000
But now in here we can export a function,

58
00:02:52,000 --> 00:02:54,000
a component function called header,

59
00:02:55,000 --> 00:02:57,000
where we return a fragment,

60
00:02:57,000 --> 00:03:00,000
and then in there, this image next to the h1 element.

61
00:03:02,000 --> 00:03:06,000
So that's now again, a standard React component,

62
00:03:06,000 --> 00:03:08,000
but now it's actually a component

63
00:03:08,000 --> 00:03:10,000
that's not automatically picked up

64
00:03:10,000 --> 00:03:13,000
or handled by NextJS in any way.

65
00:03:13,000 --> 00:03:16,000
It's not rendered as a layout or as a page.

66
00:03:16,000 --> 00:03:19,000
Instead, it's currently ignored

67
00:03:19,000 --> 00:03:22,000
because header is now not some special filename.

68
00:03:23,000 --> 00:03:26,000
We can of course import it now.

69
00:03:26,000 --> 00:03:31,000
We can import it here into page.js like this,

70
00:03:33,000 --> 00:03:36,000
and then here we can output it just as you learned it

71
00:03:36,000 --> 00:03:38,000
with Vanilla React

72
00:03:38,000 --> 00:03:41,000
because we are still working with React here,

73
00:03:41,000 --> 00:03:44,000
we are still working with components,

74
00:03:44,000 --> 00:03:48,000
and JSX just enhanced with some extra features.

75
00:03:49,000 --> 00:03:52,000
With that if you save that and you reload,

76
00:03:52,000 --> 00:03:54,000
you see the same content as before,

77
00:03:54,000 --> 00:03:58,000
but now with that custom component being used,

78
00:03:59,000 --> 00:04:01,000
and you could really store this component anywhere,

79
00:04:01,000 --> 00:04:04,000
we could also add a components folder here inside

80
00:04:04,000 --> 00:04:08,000
of the app folder and move header.js in there.

81
00:04:09,000 --> 00:04:11,000
In that case, we just have to update the import

82
00:04:11,000 --> 00:04:14,000
and make sure that we import Header

83
00:04:14,000 --> 00:04:16,000
from ./components/header.

84
00:04:17,000 --> 00:04:21,000
But with that being done, everything still works.

85
00:04:22,000 --> 00:04:26,000
Here, you also see the importance of page.js

86
00:04:26,000 --> 00:04:29,000
because now that I added this components folder here,

87
00:04:29,000 --> 00:04:32,000
you could think that we now should be able

88
00:04:32,000 --> 00:04:36,000
to visit /components,

89
00:04:36,000 --> 00:04:38,000
but we would get a 404 error

90
00:04:38,000 --> 00:04:41,000
because this file in there is ignored

91
00:04:41,000 --> 00:04:44,000
by NextJS when it comes to routing,

92
00:04:44,000 --> 00:04:48,000
and we simply got no page.js file in here.

93
00:04:48,000 --> 00:04:51,000
So that's how the Next App Router works.

94
00:04:52,000 --> 00:04:57,000
Now, personally, I prefer to store my components outside

95
00:04:57,000 --> 00:04:58,000
of that app folder,

96
00:04:58,000 --> 00:05:00,000
but you can absolutely store them in there.

97
00:05:00,000 --> 00:05:04,000
And indeed, in the official NextJS documentation,

98
00:05:04,000 --> 00:05:09,000
you can find an entire article that discusses different ways

99
00:05:09,000 --> 00:05:13,000
of structuring your NextJS projects and storing components.

100
00:05:13,000 --> 00:05:16,000
Attached to this lecture, you find a link to this article

101
00:05:16,000 --> 00:05:19,000
and you can simply pick the structure you personally

102
00:05:19,000 --> 00:05:20,000
like the most.

103
00:05:21,000 --> 00:05:25,000
I prefer to have my components outside of the app folder,

104
00:05:25,000 --> 00:05:28,000
so that the app folder is just used for routing

105
00:05:28,000 --> 00:05:30,000
and routing related tasks.

106
00:05:31,000 --> 00:05:35,000
Now with that components folder moved out of header.js,

107
00:05:35,000 --> 00:05:39,000
you, of course, also again must update your import here

108
00:05:39,000 --> 00:05:42,000
and here you can take advantage of another feature

109
00:05:42,000 --> 00:05:46,000
that's typically unlocked in NextJS projects,

110
00:05:46,000 --> 00:05:51,000
where you can use an at symbol in your import paths

111
00:05:51,000 --> 00:05:54,000
to refer to the root project.

112
00:05:54,000 --> 00:05:57,000
So the root project outside of the app folder,

113
00:05:58,000 --> 00:06:02,000
it's this jsconfig file that configures this alias,

114
00:06:02,000 --> 00:06:04,000
and that's simply a little convenience feature,

115
00:06:04,000 --> 00:06:08,000
which can simplify your import paths

116
00:06:08,000 --> 00:06:11,000
because now I can simply refer to the root project folder

117
00:06:11,000 --> 00:06:14,000
with at, and then they dive into the components folder,

118
00:06:14,000 --> 00:06:16,000
and target the header.js file.

119
00:06:17,000 --> 00:06:20,000
That's how we can use this feature.

120
00:06:20,000 --> 00:06:23,000
And with all that, again, we got the same content

121
00:06:23,000 --> 00:06:26,000
as before if we visit the starting page,

122
00:06:26,000 --> 00:06:29,000
but now with that outsourced components folder.