Create New Pages in Next.js and Navigate Them Using Link

Lazar Nikolov: [0:00] In the previous lesson, we learned what Next.js is and how to create an empty Next.js project. In this lesson, we're going to learn how to create pages and build the navigation. Let's open exercise number 2. This is the default file structure for every Next.js project. Let's go through it.

[0:19] We have the .Next folder, the Node_modules, the Pages directory, the ESLint configuration, gitignore, the Next environment typings, package.json, README, and TypeScriptConfig. If we open the Pages directory, we will see the index.tsx. This is basically the home page.

[0:38] In Next.js, every page is a React component that lives inside of the Pages directory. Every other React component that lives outside of the Pages directory is not being considered as a page. That's how the built-in router can generate our routes automatically.

[0:52] For example, the index.tsx file is being mapped to the home page or the /route. If we were to create an about.tsx file, that would be mapped out to the /about route. Let's try that. Let's do right click on the Pages directory, new file, and call it about.tsx. As we mentioned earlier, every page is a React Component. Let's create one.

[1:12] Let's name it about, and export it. Every page needs to be exported using the default keywords. We're going to return a heading called about. Let's execute npm run dev and open localhost:3000. Here's the home page.

[1:35] If we go to the about or /about, we can see the about page right here. That's how we can create new pages. In order to link between the pages, we can use the link component from the next/link package.

[1:48] Let's put our link back to the home page in the about page. First, we're going to import the link component from next/link. Let's rub the about pages in an empty React fragment, and put a link to the home page below the heading.

[2:05] The link component needs an href prop to function. Let's check it out. We can see we have the link to the home page. If we click it, we're taken back to the home page.

[2:15] It's important to use the link component instead of the ordinary anchor tag because the link component performs a client-side navigation, while the anchor tag performs a full-page reload. Let's demonstrate that.

[2:26] We're going to go to the home page, and instead of using the link component, we're going to use an ordinary anchor tag. Let's name it about and set the href to be /about. There we go. Now we have the link here. If we click this, a full-page reload will happen. Pay attention to the favicon. If we use the link component, the transition happens immediately.

[2:55] Let's recap. In Next.js, every page is a React component that lives in the Pages directory. That's how the router knows how to generate our routes for us. The index page gets mapped to the / and the About page gets mapped to the /about. To link between the pages or to build a navigation between the pages, we need to use the link component that's exported from the next/link package.