So let's work on styling this header.
And when it comes to styling NextJS projects,
you got a couple of different options
as is the case for React projects as well.
Now you can already see one option in this project here,
and that is such a global CSS file as I have it here.
And you could add multiple global CSS files.
The names are up to you.
They are global because they're getting imported like this
in the layout JSS file in the RootLayout JS file.
And therefore any CSS file that's being imported like this
into this RootLayout JSS file
will be available on every page.
And the styles set up here will be available on every page.
That's the great thing.
But this is not the only way of styling NextJS projects.
Another popular option for styling NextJS projects is
to use Tailwind CSS
because Tailwind in general is pretty popular.
It's a CSS library that allows you to style elements
by adding small utility classes to those elements.
And indeed, on the Tailwind website,
you also find instructions on how you could add Tailwind
to a NextJS project.
And in addition, when creating a new NextJS project,
you are also asked whether you want to add Tailwind CSS,
at least at the point of time where I recorded this.
So getting started with Tailwind in Next project
is pretty easy and Tailwind as mentioned,
indeed is also a popular solution for styling those apps.
But we're not going to use it in this project, simply
because I don't wanna bore you by adding a bunch
of CSS classes to my JSX code.
And that is what we would have to do when using Tailwind.
So it's amazing but not great for a course like this
where I want to focus on the main topic, which is NextJS
and React, not Tailwind, therefore I'll not use it here,
but you could use it.
Instead, here in this section we'll use another solution
that's supported by NextJS
and that would be CSS modules,
which is in general standard CSS code,
but scoped to specific components
by assigning special names to your CSS files.
And that's supported by NextJS out of the box.
And the idea simply is that you add CSS files that end
with dot module dot css
and you can then import an object from those files,
which will be generated automatically
by the underlying build process
and development server, which gives you access
to all the CSS classes defined in those files as properties.
And that's what I'll do here.
And therefore I prepared a CSS file
for you, a main header CSS file, which you can add next
to that main header JS file.
And in that main header CSS file,
I'm simply setting up a bunch of CSS classes and styles.
You can of course tweak them as you want,
but it should also work like this.
Now we just have to import them
or import this file into this main header JSS file to
activate it and to make those classes available in this file
and scope those classes to this component.
And for that, we need a special way of importing this, not
as we imported CSS in the layout JSS file like this.
That would simply add the CSS classes as global classes
that affect all pages and all components,
but instead by using import
and then any name of your choice like classes from,
and then main header module CSS, in this case,
a relative path to that file.
And with that added, you can now use this classes object,
which it is to access certain properties.
And every class defined here
in this main header module CSS file will simply be available
as a property on this imported object.
So for example, here on this logo,
we can assign a class to this link.
And we now don't do this as a string like some class,
but instead as a dynamic value
where we access this class's object.
And then here it's the logo class.
And this will apply this class here
and all the other related styles to this link
and the nested elements.
But it's doing that such that the styles are scoped
to this component and can't affect any other component
on the page, even if you would
use a similar class name there.
So that's the first step here.
In addition, I also want to add a class name
to the header itself, and that would be classes.header.
And then on the navigation, I want to add a class
to this nav element here with classes.nav.
With all that done, if you save that
and you go back to your page,
this now looks much better.
Now we got a properly styled header, a properly styled logo,
and these navigation links here, which also look better
and which of course also still work.
But now all styled in a beautiful way with help
of CSS modules.