All language subtitles for 005 Adding Layout & Navigation_Downloadly.ir_en

So we got our hero component here.

It's looking good, hopefully,

and now we also need featured posts for this starting page.

Now, what we'll also need besides featured posts, though,

is a navigation bar at the top

because at the moment we only have one working page

with not too much content on it, arguably,

but later we will have other pages as well,

the All Posts page and the Contact page.

So therefore to be able to reach that,

we wanna add some navigation,

and hence that is something I'll do first

before we then come back to the featured posts.

I wanna add a navigation bar, or to be precise,

I wanna add a general layout because the navigation bar,

which should be shown at the top,

will not only be needed on the homepage.

Instead, we will need it on all pages,

and that can be solved with a layout,

as you'll learn throughout the course.

We can utilize this _app JS file here

to wrap the component which is rendered there

which is actually just the page content

that was loaded for the different URLs

with a general layout.

That is what we can do,

and what we typically wanna do in Next.js applications,

and therefore let's build such a layout component.

For that, in the components folder,

we can create a new subfolder called layout,

and in there, I wanna add a couple

of components that help us create layouts.

The first one will be the layout component itself,

a layout JS file, but then I'll add two other files as well,

since I wanna split my layout

into multiple sub-components.

For example, I want it to have a separate component

that holds the actual navigation bar,

so I'll name this main-navigation.

This will be my navigation component,

and that navigation component should also render

some logo for my blog,

and therefore I'll create a separate logo component,

and of course you can split, and mix, and match,

and compose your components just as you need to.

This is just some example split

which I came up with which works for me.

If it doesn't work for you,

if you wanna split it in a more granular way

or have bigger components,

so less splits, that's of course also fine.

You just need to adjust the styles then.

Now with that, let's start with the layout component.

In there, we can, again, create a function

and export that function, Layout,

and in that function, we then return a fragment

because I wanna have two adjacent JSX elements,

and the first one will be the MainNavigation,

so this separate component

which we'll store in the main-navigation file.

The second JSX element will be the regular main HTML element

in which I wanna output properties,

whoops, props.children,

and for this, of course, we need to make sure

that we accept props here,

props.children, because we will wrap

this Layout component around this component here

in the _app JS file.

We can actually already do that here.

In this file, we can already import Layout from,

and then go up one level,

dive into the components folder,

into the layout folder and the layout file,

and then just wrap component with Layout,

so create Layout here and wrap it around this component.

Now it's this component which will be used as children,

or as a child, inside of the Layout component, so here.

So that's step number one.

Now I'm using the main navigation here,

and hence I also already wanna import MainNavigation

from that main-navigation JavaScript file.

That file, however, is completely empty right now,

and that needs to change therefore.

So if we go to the main-navigation file here,

we, of course, again,

wanna create a MainNavigation function,

and then export that as a default,

as we always do it.

And now inside that MainNavigation component,

I wanna return a header element,

and then there as a first element, my logo,

and side by side to that, a nav bar

with a list of nav items.

So here I'll add a unordered list with my list items

where in the list items, I have my links.

Now, for the links we will not use the standard anchor tag

because that would be handled by the browser only,

and when we click it, we would load a brand-new page

and send a brand-new request.

Instead, we want to use Next's Link component

to take advantage of automatic data prefetching

which it does for us,

and to take advantage of the fact

that we stay in a single-page application

once the page was loaded initially.

So therefore we wanna import Link from next/link,

like this, like we did it many times before in this course,

and to then just output Link here,

so create a link here.

Now the link needs a ref attribute

where we point at /posts, for example,

and load the Posts page,

and it has to be /posts because of our page structure.

We have the posts folder with the index JS file

which should be loaded when we wanna load all posts,

and you learned before in this course that this structure

in the pages folder leads to a /posts route

which is inferred by Next.js,

so we wanna link to that route here.

Now, that's not the only link though.

I also wanna have a link to my Contact page

because we also have this contact JS file,

and that file will be translated

to a /contact route, as you learned,

so we also wanna have a /contact route here.

So now we've got that.

I actually also wanna make the logo clickable

so that when we click the logo

we're taken back to the starting page.

That's a quite common pattern on websites,

and therefore we also wrap the logo with a link, like this,

and give this a ref of just slash

to go back to the starting page.

Now you might remember

that there was this special behavior of Link

when the child you passed to it was not plain text.

If you pass your own component,

or any other HTML content to a link,

Link will not render an anchor tag by default.

It only does that if you just pass plain text to it.

If you pass anything else than plain text,

the link will not render an anchor tag for you,

so in order to get that,

you should then bring your own anchor tag, like this.

You don't need to add ref on that anchor tag.

Link will do that for you.

It will pass the ref set on Link

to the direct child of Link, which is an anchor tag now.

So it will do that for you,

but you have to add the anchor tag element

to tell Link that it should render an anchor tag.

This is not a bug or some inconsistency, but this exists.

This feature exists to make sure

that you can turn any element into a link,

a div, a button, whatever you want,

but here we want an anchor tag still,

so I will add my own anchor tag wrapped around my logo,

and speaking of the logo,

that's, of course, still missing.

I just added this dummy JSX code here,

but we are not importing it,

and the logo JS file is also empty,

and therefore as a next step, we'll work on that,

and we're then also going to add some styling.