To create a page, we need to create routes and components, and write some import lines in a few files. Fortunately, Next.js provides commands to automate this task. In this guide, we will see how to use them.

First, navigate to the src/app folder and create a suitable folder name for your page. For example, if you are creating an authentication page, you might name it auth.

Next.js App Router relies on file-system based routing. This means you do not need any special CLI commands or separate route files to create a page.

Simply create a file named page.tsx inside your newly created folder.

This file will automatically serve as the entry point for that route (e.g., /auth). You can export a default React component from this file:

export default function AuthPage() {
  return (
    <div>
      <h1>Auth Page</h1>
    </div>
  )
}

---

Info: If you want to add a layout that only applies to this route, you can also create a layout.tsx file in the same folder.