Creating the first page
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)