All language subtitles for 003 Home Page_en

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.