Now there also are two other files
in that app directory, which I haven't covered yet.
And one is the globals.css file.
Now, in there I set up some CSS styles for you,
and this file is being imported into the layout.js file,
so that it's essentially available on every page
that's being loaded.
This is how you can import CSS files in NextJS.
It's an approach that also works
in most Vanilla React projects,
and this will then simply ensure that these styles
are made available on every loaded page.
Besides that, we also have an icon.png file here
and that's another special file name actually.
If you add an image called icon,
it will be used as a favicon by NextJS.
Because you might've noticed that in the layout.js file,
we did not set up anything regarding a favicon,
so that little icon that shows up in the tab here,
for example, and yet we have one here
if you take a close look,
and that's the case because I added this icon.png file,
which uses this special icon name,
and if you add an image called icon directly
in the app folder as I am doing it here,
this will be used as a favicon.
So as you can tell by now, the app folder is very important.
In there, you define your routes by adding folders,
and you have some reserved file names like page.js,
icon.png, or layout.js,
which then simply unlock different features, you could say.
And for example, a route layout is needed
just as you need page.js files to really set up a route,
but you're not limited to these special files in NextJS.
We can, for example,
still also add regular React components,
which are not treated as pages.
For that, let's say that we wanna put this image
into this header into a separate component,
so that we cut it from here
and we instead add it to a component.
We could do that by adding a new JavaScript file anywhere
in that project,
for example, next to the page.js file,
and we could name it header.js.
By the way, you can also use .jsx as an extension also
for those pages if you prefer that.
But here I'll stick to the default,
which was .js in this next project.
But now I added this file here.
You could also name this Header
with an uppercase starting character.
But here, since all these other default
and important NextJS file names use lowercase names,
I'll stick to a lowercase name
for my component file here as well.
But now in here we can export a function,
a component function called header,
where we return a fragment,
and then in there, this image next to the h1 element.
So that's now again, a standard React component,
but now it's actually a component
that's not automatically picked up
or handled by NextJS in any way.
It's not rendered as a layout or as a page.
Instead, it's currently ignored
because header is now not some special filename.
We can of course import it now.
We can import it here into page.js like this,
and then here we can output it just as you learned it
with Vanilla React
because we are still working with React here,
we are still working with components,
and JSX just enhanced with some extra features.
With that if you save that and you reload,
you see the same content as before,
but now with that custom component being used,
and you could really store this component anywhere,
we could also add a components folder here inside
of the app folder and move header.js in there.
In that case, we just have to update the import
and make sure that we import Header
from ./components/header.
But with that being done, everything still works.
Here, you also see the importance of page.js
because now that I added this components folder here,
you could think that we now should be able
to visit /components,
but we would get a 404 error
because this file in there is ignored
by NextJS when it comes to routing,
and we simply got no page.js file in here.
So that's how the Next App Router works.
Now, personally, I prefer to store my components outside
of that app folder,
but you can absolutely store them in there.
And indeed, in the official NextJS documentation,
you can find an entire article that discusses different ways
of structuring your NextJS projects and storing components.
Attached to this lecture, you find a link to this article
and you can simply pick the structure you personally
like the most.
I prefer to have my components outside of the app folder,
so that the app folder is just used for routing
and routing related tasks.
Now with that components folder moved out of header.js,
you, of course, also again must update your import here
and here you can take advantage of another feature
that's typically unlocked in NextJS projects,
where you can use an at symbol in your import paths
to refer to the root project.
So the root project outside of the app folder,
it's this jsconfig file that configures this alias,
and that's simply a little convenience feature,
which can simplify your import paths
because now I can simply refer to the root project folder
with at, and then they dive into the components folder,
and target the header.js file.
That's how we can use this feature.
And with all that, again, we got the same content
as before if we visit the starting page,
but now with that outsourced components folder.