We have our initial Next.js project set up,
and we started the local development
server with the "next dev" command.
Now, if we try opening our website in the browser,
at the moment we just get a "not found" message,
because we don't have any pages in our app yet.
Let's stop the server for the time being,
and see how to define a page.
We can add a home page simply by creating
a new file inside the "app" folder,
called "page.jsx".
Just like the "layout" file,
the "page" file must export a React component,
let's call it "HomePage".
And here we can return some JSX elements.
Let's start with a simple "h1" heading,
saying "My first Next.js page".
So this will be the content of our home page.
Let's save this file, and go and start
the server in the terminal.
Now, since we'll be using the "next
dev" command all the time,
it's better if we add a "script"
to our package.json file.
We can define a "dev" script, that
runs the "next dev" command.
This way, in the terminal
we can type "npm run dev" instead,
and this will execute "next dev",
starting the server on port 3000.
By listing all our scripts in the package.json
it's also easier to see which commands
are available in our project.
Anyway, if we go back to the browser,
and reload the page,
you can see that it's now showing
the heading we wrote in our code.
So our home page is being displayed correctly.
Now, while working on our pages I will
always use the Chrome Developer Tools,
that you can open from this menu,
or with a keyboard shortcut.
This way we can see any log messages
printed to the Console.
For most videos, I will also keep the browser
in a smaller window on the right side,
and the Visual Studio Code window
on the rest of the screen,
so you can see both the code in the editor,
and at the same timeÂ what the page
looks like in the browser.
The dev server will automatically update
the page whenever we modify our code.
Let's change this heading for example,
and set it to "Indie Gamer", that
will be the name of our website.
As soon as we save this change, the page
will update and show the new text.
Most of the time we can leave
the terminal panel closed.
The dev server will still be running anyway.
We could add a paragraph to this page,
with a tagline, saying "Only
the best indie games,"
"reviewed for you".
Now, in JSX we must have a single root element,
so I'll wrap everything in a React fragment,
that is this special element
written as an empty tag.
This way the page will render both
the heading and the paragraph.
So, this page works pretty much
like any other React component.
What's special about Next.js,
and the App Router, is that
what's in the page will be inserted into
the document defined by the RootLayout.
Right now this layout simply displays
the children inside the "body".
But we could add other elements here.
For example, in most apps we'll want
a common "header" for all the pages.
I'll just write some placeholder text for now.
Then the page contents will be the central part.
In fact we could wrap it in a "main" element,
which is a good practice, and will
also be useful for styling.
We'll typically want a "footer" as well,
showing some other content.
And if we save the updated layout,
you can see that our page now
has a header and a footer.
By the way, I put the text in square brackets
just to indicate that they're placeholders,
it's not a special syntax or anything like that.
The point is that the elements we
return in the page component
are rendered inside those from
the layout component.
So in this sense you can think
of the layout as a template,
that will apply to all the pages.