With that, we're almost done
with this challenge, but there is one last task
that needs to be solved.
You should also add a main header component
to the page that contains links to the homepage
and this newly added news page.
So a separate component should be added here
and I did already mention in the essentials section
that there will be different ways
of structuring your NextJS project
and that it's up to you
where you wanna store component files for example
that you could add a components folder in the app folder
and have your components in there,
but that you could for example
also add that components folder outside of the app folder,
so as a sibling to the app folder right inside your project.
And all these strategies have different advantages
and it ultimately comes down to your personal preference.
Now, I will actually store my components
in a folder outside of the app folder.
So I added this components folder as a sibling to app
and it's in there where I will add
this main-header.js file where I will export
this MainHeader component function like this.
Well and in there, I will now return a header
and the goal was to have these links in there
and of course, it's therefor pretty much up to you
which mark up you used
for rendering these two links in the header.
I will add my header like this
and then simply add an unordered list
with two list items and every list item
will hold a link using the link component from NextJS,
and on the first link, I'll say home
and I'll navigate to /nothing,
because that's the homepage
and the second link will say News and navigate to /news.
And now we just have to use this MainHeader component
and we could now manually add it to every page component
so that it's displayed above the content of that page,
but that's of course not how you would do it,
as you learned it in the essentials section.
Instead, in NextJS, you have concept
of working with layouts and pages
and we already saw the idea behind pages.
The idea behind layouts is simply
that you create shells around page content
so that you can have some shared content
that's the same across multiple pages.
And where you create pages with a page.js file,
you create layouts with a layout.js file.
That's the idea here.
And therefor, we could create a new layout
if we wanted to have a news specific layout,
because you can have nested layouts in NextJS,
but here I actually wanna have a layout
that spans all my pages,
including the root page, the home page
and hence, I'll go to the root layout.js file
which exists already, because every NextJS application
must have such a root layout file.
And in that root layout file,
I will now go to the body,
which wraps this children output here,
which in the end will be the page content
and above that, I will output
my MainHeader component like this
and of course, for that to work,
it must be imported from the MainHeader file
from the components folder.
And here my IDE added to this import automatically
and it automatically took advantage
of this import path alias
that's supported by NextJS projects
where you can use an at symbol in your file import paths
to point at the project root folder
and then dive into the different sub-folders from there,
for example, into the components folder
which holds that MainHeader component file.
And with that, the MainHeader will be output here
and hence, if we save this, we'll see it up there.
Again, not styled yet, but we'll change this soon,
but I can click these links
to be taken to the homepage, to the news page
and then we can dive into those detail pages.
And that's now all working the way it should
and we therefor now successfully solved
this first challenge and applied the knowledge
we already had and of course,
we're also now going to dive into new things
throughout the rest of the section.