File System Based Routing

One of the most powerful and intuitive features of Next.js, especially with the App Router, is its file-system based routing. This means you don't need to manually configure routes in a separate file; instead, Next.js automatically creates routes for your application based on the structure of your files and folders within the app directory. This convention simplifies routing significantly and helps keep your project organized.

How Folders Define Routes in the app Directory

In the App Router, each folder inside the app directory represents a route segment. When you nest folders, you create nested routes, directly mirroring the URL paths of your application.

For a folder to become a public route that a user can visit, it must contain a special file called page.tsx (or page.js if you were using JavaScript). Without a page.tsx file, a folder is just a logical grouping and does not correspond to a navigable URL.

Let's look at some examples to clarify this:

app/
├── page.tsx          // -> Corresponds to the root route: /
├── about/
│   └── page.tsx      // -> Corresponds to the /about route
├── dashboard/
│   └── page.tsx      // -> Corresponds to the /dashboard route
├── settings/
│   ├── page.tsx      // -> Corresponds to the /settings route
│   └── profile/
│       └── page.tsx  // -> Corresponds to the /settings/profile route
└── tasks/
    └── page.tsx      // -> Corresponds to the /tasks route

In the structure above:

• app/page.tsx is the homepage.
• app/about/page.tsx makes the /about URL accessible.
• app/dashboard/page.tsx makes the /dashboard URL accessible.
• app/settings/profile/page.tsx makes the /settings/profile URL accessible, demonstrating nested routes.

Any component exported as the default from a page.tsx file will be rendered when that route is accessed.

Creating page.tsx Files

As you saw, page.tsx files are essential for defining accessible routes. They contain the UI components specific to that route segment.

Let's apply this to our Task Management App. We already have app/page.tsx for the homepage. Now, let's create a new route for our dashboard, which will eventually list all our tasks.

1. Create a new folder named dashboard inside your app directory:

   my-task-app/
   └── app/
       ├── layout.tsx
       ├── page.tsx
       ├── dashboard/      <-- NEW DIRECTORY
       │   └── page.tsx    <-- NEW FILE
       └── globals.css
   

2. Create the page.tsx file inside the app/dashboard/ folder and add the following content:

   app/dashboard/page.tsx

   // app/dashboard/page.tsx
   // This file defines the content for the /dashboard route.
   // It is a Server Component by default, rendered on the server.
   
   export default function DashboardPage() {
     return (
       <div className="flex flex-col items-center justify-center p-4">
         <h2 className="text-3xl font-bold text-gray-800 mb-6">Your Dashboard</h2>
         <p className="text-lg text-gray-600">
           This is where your tasks will appear. Stay tuned for task listing functionality!
         </p>
         {/* We will later add task list components here */}
       </div>
     );
   }
   

What we've done:

• We've created a new folder dashboard inside app.
• Inside dashboard, we added a page.tsx file. This action automatically makes the /dashboard URL accessible in our Next.js application.
• The DashboardPage component is a simple placeholder for now, which will eventually be populated with our task list.

To see your new route:

1. Ensure your development server is still running (npm run dev).
2. Open your browser and navigate to http://localhost:3000/dashboard.

You should now see the content of your DashboardPage.tsx component, complete with the header and footer from your root layout! This demonstrates the power of file-system based routing and how easily you can add new pages to your Next.js application.

In the next section, we'll dive deeper into how layout.tsx files can be nested to create more complex UI structures and share components across different parts of your application.