All language subtitles for 004 Adding A First Page_Downloadly.ir_en

So, now that we had a first glimpse

at this file-based routing system in theory,

let's apply it in practice

to this demo project we set up here,

so that we really understand it.

This pages folder is important as you learned.

And in this pages folder, we can add a new file.

We can add a new file

and we can, for example, name it, index.js.

You'll learn that index.js is a special file name,

such that Next.js will not use the file name as a path then,

but instead will load the index.js component

as the main component for slash nothing.

So, here in this case, we have index.js

and this file would be loaded if we just visit our domain

and then we have no other path after our domain.

So, just our domain slash nothing.

But what goes into this index.js file?

Well, as mentioned before, just a regular React component.

There is nothing special to that.

You don't need any special code in here.

You just add our normal React component,

you export this component

and then, with that, Next.js will render that component

when a request reaches this file

through next.js routing system.

So therefore, in this file, we can add a component

and we can add a class-based component

or a function-based component.

And I will stick to function-based components only

in this course.

So therefore, we can add a new component,

a new function here,

and name this, HomePage, for example.

Now, the name is totally up to you.

This doesn't have to be named HomePage,

any name is okay.

I'm just using HomePage as a name here

because it will be the root page loaded.

And whilst it is a regular component, technically,

we will treat it as a page.

It will occupy the entire page.

And that's why I add page in the component name.

But you can name this component however you want.

Now, in this component, we then wanna return

our JSX code just as we know it.

So, here I will return,

let's say, a div and end that div,

a simple H1 tag where I say, The Home Page.

Definitely not too inspiring yet, but we'll get there.

Now we need to export this function as the file default.

So, either like this

or what I like to do,

but it's up to you,

like this.

We need to export this function, this component,

so that Next.js knows

which components should be rendered as a page

because in theory,

you could of course define multiple components

and have multiple functions in that file.

Now, with all of that, once you've saved that file,

we can see it in action.

For this, in your terminal here,

simply run, npm run dev,

to bring up the development server

for this Next.js application.

It will open up on localhost 3000 by default.

And therefore, once you visit that in the browser,

you should see this.

And it's just a bit big here for me,

because I zoomed in quite a lot so that you can see this.

So, that's what you should see on the screen.

And of course, that's the content returned

by this component in our index.js file.

And we do see this on the screen

because we're visiting our domain slash nothing.

There's nothing after that slash.

If I would enter about here, it would crash,

and we would get this default 404 page,

which we get here during development,

because we didn't define a component for that yet.

Well, that's what we're going to do next though.