Creating the first page

[00:00 - 00:10] Creating the first page. Right now our application renders 4 or 4 error on the root page. This is fine. We see this because we haven't created any pages yet.

[00:11 - 00:22] Time to fix this. A page in Next is a React component exported from a JS, JSX, TS or TSX file in the pages directory. That's exactly why we've created that directory, to populate it with page components.

[00:23 - 00:33] We can think of them as of containers that are associated with specific URLs. In Next, routing is based on the file structure inside of the pages directory.

[00:34 - 00:59] For example, Pages, Index, TSX will be rendered when the user requests the main page of the site or the root page, and then the page Contacts, TSX will be associated with the /contact_url. For now let's remove it. To create our first page, create a file index, TSX, inside of the pages folder, and make a default export with the page component.

[01:00 - 01:16] Export, default, function, front, inside with will return a fragment that will render the head element. Here we'll define a title that will say front, page of the internet, and the main block below the head.

[01:17 - 01:25] That will say hello, world from Next. We must use the default export here because Next requires it for the page component.

[01:26 - 01:37] Another interesting thing here is the head element that we used from the head/ next head module. This component injects everything we pass as children to it to the head element of the HTML page.

[01:38 - 01:47] In our case, it's going to pass in the title element with the page title. We can also put the meta, link, and script tags there if necessary.

[01:48 - 01:57] As soon as this page is created, Next should automatically refresh the browser and show the new page that says hello, world from Next. Congrats, you just created your first next page.