Next.js - Pages

When working with Next.js, it’s important to understand the concept of pages. In Next.js, a page refers to a user interface (UI) that is specific and unique to a particular route. This means that each page in your web application will have its own UI that is tailored to the content and functionality of that particular route.

To create a page in Next.js, you can define it by exporting a component from a page.tsx file. This component will contain the code that defines the layout and content of the page, including any functional components and styling.

By exporting the component from a page.tsx file, you are telling Next.js that this component is a page and should be rendered as such.

To make a route publicly accessible and associated with a specific page, you can use nested folders. By organizing your pages in nested folders, you can define the hierarchy of your web application and make it easier to navigate.

The page.tsx file should be located in the appropriate nested folder to correspond with the desired route. This way, when a user navigates to that route, they will be presented with the corresponding page UI.

You can create a new Next.js project by using the command npx create-next-app or update the project that you created in the Installation chapter.

To create your initial page, you can add a page.tsx file to the app directory with the following content:

  // The UI for the `/` URL
export default function Page() {
  return <h1>This is home page!</h1>;
}

  // The UI for the `/` URL
export default function Page() {
  return <h1>This is home page!</h1>;
}

After that, please create an admin folder inside the app directory and create a new page.tsx file inside the admin folder with the following content:

  // The UI for the `/admin` URL
export default function Page() {
  return <h1>This is admin page!</h1>;
}

  // The UI for the `/admin` URL
export default function Page() {
  return <h1>This is admin page!</h1>;
}

In that case, the directory structure will look like this:

Before checking the results, make sure to start the Next.js server by running the command npm run dev. Then, access localhost:3000 and localhost:3000/admin on your web browser. You will be able to see the corresponding greetings with the content of each page you have created.