1
00:00:00,000 --> 00:00:03,000
So let's work on styling this header.

2
00:00:03,000 --> 00:00:07,000
And when it comes to styling NextJS projects,

3
00:00:07,000 --> 00:00:10,000
you got a couple of different options

4
00:00:10,000 --> 00:00:13,000
as is the case for React projects as well.

5
00:00:14,000 --> 00:00:18,000
Now you can already see one option in this project here,

6
00:00:18,000 --> 00:00:22,000
and that is such a global CSS file as I have it here.

7
00:00:22,000 --> 00:00:25,000
And you could add multiple global CSS files.

8
00:00:25,000 --> 00:00:27,000
The names are up to you.

9
00:00:27,000 --> 00:00:30,000
They are global because they're getting imported like this

10
00:00:30,000 --> 00:00:34,000
in the layout JSS file in the RootLayout JS file.

11
00:00:34,000 --> 00:00:38,000
And therefore any CSS file that's being imported like this

12
00:00:38,000 --> 00:00:40,000
into this RootLayout JSS file

13
00:00:40,000 --> 00:00:43,000
will be available on every page.

14
00:00:43,000 --> 00:00:47,000
And the styles set up here will be available on every page.

15
00:00:47,000 --> 00:00:48,000
That's the great thing.

16
00:00:49,000 --> 00:00:54,000
But this is not the only way of styling NextJS projects.

17
00:00:54,000 --> 00:00:58,000
Another popular option for styling NextJS projects is

18
00:00:58,000 --> 00:01:00,000
to use Tailwind CSS

19
00:01:00,000 --> 00:01:04,000
because Tailwind in general is pretty popular.

20
00:01:04,000 --> 00:01:07,000
It's a CSS library that allows you to style elements

21
00:01:07,000 --> 00:01:11,000
by adding small utility classes to those elements.

22
00:01:11,000 --> 00:01:14,000
And indeed, on the Tailwind website,

23
00:01:14,000 --> 00:01:18,000
you also find instructions on how you could add Tailwind

24
00:01:18,000 --> 00:01:21,000
to a NextJS project.

25
00:01:21,000 --> 00:01:24,000
And in addition, when creating a new NextJS project,

26
00:01:24,000 --> 00:01:29,000
you are also asked whether you want to add Tailwind CSS,

27
00:01:29,000 --> 00:01:32,000
at least at the point of time where I recorded this.

28
00:01:32,000 --> 00:01:35,000
So getting started with Tailwind in Next project

29
00:01:35,000 --> 00:01:38,000
is pretty easy and Tailwind as mentioned,

30
00:01:38,000 --> 00:01:42,000
indeed is also a popular solution for styling those apps.

31
00:01:43,000 --> 00:01:46,000
But we're not going to use it in this project, simply

32
00:01:46,000 --> 00:01:49,000
because I don't wanna bore you by adding a bunch

33
00:01:49,000 --> 00:01:53,000
of CSS classes to my JSX code.

34
00:01:53,000 --> 00:01:57,000
And that is what we would have to do when using Tailwind.

35
00:01:57,000 --> 00:02:00,000
So it's amazing but not great for a course like this

36
00:02:00,000 --> 00:02:04,000
where I want to focus on the main topic, which is NextJS

37
00:02:04,000 --> 00:02:09,000
and React, not Tailwind, therefore I'll not use it here,

38
00:02:09,000 --> 00:02:10,000
but you could use it.

39
00:02:10,000 --> 00:02:14,000
Instead, here in this section we'll use another solution

40
00:02:14,000 --> 00:02:17,000
that's supported by NextJS

41
00:02:17,000 --> 00:02:20,000
and that would be CSS modules,

42
00:02:20,000 --> 00:02:24,000
which is in general standard CSS code,

43
00:02:24,000 --> 00:02:28,000
but scoped to specific components

44
00:02:28,000 --> 00:02:32,000
by assigning special names to your CSS files.

45
00:02:32,000 --> 00:02:36,000
And that's supported by NextJS out of the box.

46
00:02:36,000 --> 00:02:40,000
And the idea simply is that you add CSS files that end

47
00:02:40,000 --> 00:02:43,000
with dot module dot css

48
00:02:43,000 --> 00:02:47,000
and you can then import an object from those files,

49
00:02:47,000 --> 00:02:49,000
which will be generated automatically

50
00:02:49,000 --> 00:02:51,000
by the underlying build process

51
00:02:51,000 --> 00:02:54,000
and development server, which gives you access

52
00:02:54,000 --> 00:02:59,000
to all the CSS classes defined in those files as properties.

53
00:03:00,000 --> 00:03:02,000
And that's what I'll do here.

54
00:03:02,000 --> 00:03:04,000
And therefore I prepared a CSS file

55
00:03:04,000 --> 00:03:09,000
for you, a main header CSS file, which you can add next

56
00:03:10,000 --> 00:03:12,000
to that main header JS file.

57
00:03:14,000 --> 00:03:16,000
And in that main header CSS file,

58
00:03:16,000 --> 00:03:21,000
I'm simply setting up a bunch of CSS classes and styles.

59
00:03:21,000 --> 00:03:24,000
You can of course tweak them as you want,

60
00:03:24,000 --> 00:03:26,000
but it should also work like this.

61
00:03:27,000 --> 00:03:29,000
Now we just have to import them

62
00:03:29,000 --> 00:03:33,000
or import this file into this main header JSS file to

63
00:03:33,000 --> 00:03:38,000
activate it and to make those classes available in this file

64
00:03:38,000 --> 00:03:41,000
and scope those classes to this component.

65
00:03:42,000 --> 00:03:45,000
And for that, we need a special way of importing this, not

66
00:03:45,000 --> 00:03:50,000
as we imported CSS in the layout JSS file like this.

67
00:03:50,000 --> 00:03:54,000
That would simply add the CSS classes as global classes

68
00:03:54,000 --> 00:03:57,000
that affect all pages and all components,

69
00:03:58,000 --> 00:04:02,000
but instead by using import

70
00:04:02,000 --> 00:04:06,000
and then any name of your choice like classes from,

71
00:04:07,000 --> 00:04:10,000
and then main header module CSS, in this case,

72
00:04:10,000 --> 00:04:13,000
a relative path to that file.

73
00:04:15,000 --> 00:04:20,000
And with that added, you can now use this classes object,

74
00:04:20,000 --> 00:04:23,000
which it is to access certain properties.

75
00:04:23,000 --> 00:04:26,000
And every class defined here

76
00:04:26,000 --> 00:04:30,000
in this main header module CSS file will simply be available

77
00:04:30,000 --> 00:04:33,000
as a property on this imported object.

78
00:04:34,000 --> 00:04:37,000
So for example, here on this logo,

79
00:04:37,000 --> 00:04:41,000
we can assign a class to this link.

80
00:04:41,000 --> 00:04:45,000
And we now don't do this as a string like some class,

81
00:04:45,000 --> 00:04:48,000
but instead as a dynamic value

82
00:04:48,000 --> 00:04:51,000
where we access this class's object.

83
00:04:51,000 --> 00:04:54,000
And then here it's the logo class.

84
00:04:55,000 --> 00:04:58,000
And this will apply this class here

85
00:04:58,000 --> 00:05:02,000
and all the other related styles to this link

86
00:05:02,000 --> 00:05:04,000
and the nested elements.

87
00:05:04,000 --> 00:05:07,000
But it's doing that such that the styles are scoped

88
00:05:07,000 --> 00:05:10,000
to this component and can't affect any other component

89
00:05:10,000 --> 00:05:12,000
on the page, even if you would

90
00:05:12,000 --> 00:05:14,000
use a similar class name there.

91
00:05:16,000 --> 00:05:18,000
So that's the first step here.

92
00:05:18,000 --> 00:05:21,000
In addition, I also want to add a class name

93
00:05:21,000 --> 00:05:25,000
to the header itself, and that would be classes.header.

94
00:05:25,000 --> 00:05:29,000
And then on the navigation, I want to add a class

95
00:05:29,000 --> 00:05:34,000
to this nav element here with classes.nav.

96
00:05:35,000 --> 00:05:38,000
With all that done, if you save that

97
00:05:39,000 --> 00:05:41,000
and you go back to your page,

98
00:05:41,000 --> 00:05:43,000
this now looks much better.

99
00:05:43,000 --> 00:05:47,000
Now we got a properly styled header, a properly styled logo,

100
00:05:47,000 --> 00:05:50,000
and these navigation links here, which also look better

101
00:05:50,000 --> 00:05:53,000
and which of course also still work.

102
00:05:53,000 --> 00:05:56,000
But now all styled in a beautiful way with help

103
00:05:56,000 --> 00:05:58,000
of CSS modules.