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.