Architecture – Pages

Understanding how pages work in Next.js and the App Router

What Are Pages?

Pages are the things people see when they visit your website. Each page corresponds to a URL that users can navigate to.

In Next.js App Router, every page must be named page.tsx and placed inside a folder that represents the URL path.

Page Structure

[folder-name]/page.tsx

For example, if you want to have a page called 'settings', you would create a folder in your 'app' folder called 'settings' and inside that folder make a file called page.tsx.

File structure example:

app/
├── page.tsx              // Home page (website.com/)
├── settings/
│   └── page.tsx         // Settings page (website.com/settings)
└── dashboard/
    └── page.tsx         // Dashboard page (website.com/dashboard)

URL Mapping

Each page is accessible via website URLs by placing a / followed by the folder name.

Folder Structure

app/settings/page.tsx

URL

website.com/settings

Folder Structure

app/dashboard/page.tsx

URL

website.com/dashboard

Home Page

If your site only has one page (your main page or your home page), it would just be website.com/ which is represented in the URL as /.

For the home page, you DO NOT need a folder — just use the page.tsx file that exists directly under your app folder.

app/page.tsx → website.com/

Nested Routes

You can create nested routes by creating folders within folders:

Nested structure example:

app/
├── blog/
│   ├── page.tsx                    // website.com/blog
│   └── post-1/
│       └── page.tsx               // website.com/blog/post-1
└── settings/
    ├── page.tsx                   // website.com/settings
    ├── profile/
    │   └── page.tsx              // website.com/settings/profile
    └── billing/
        └── page.tsx              // website.com/settings/billing

Dynamic Routes

Sometimes you need pages that respond to dynamic content, like user profiles or blog posts. You can create these using square brackets [parameter]:

Dynamic routes example:

app/
├── user/
│   └── [id]/
│       └── page.tsx              // website.com/user/123
└── blog/
    └── [slug]/
        └── page.tsx              // website.com/blog/my-post

The value inside the brackets (like id or slug) becomes available in your page component as a parameter.

Creating Dynamic User Profiles

Let's say you want to create user profile pages where each user has their own unique page. Here's how you'd set it up:

User profile structure:

app/
└── profile/
    └── [username]/
        └── page.tsx              // Dynamic user profile page

This structure allows URLs like:

website.com/profile/john → shows John's profile

website.com/profile/sarah → shows Sarah's profile

website.com/profile/alex123 → shows Alex123's profile

How it works:

The [username] folder captures whatever comes after /profile/
Your page component receives this value as a parameter
You can use this parameter to fetch that specific user's data
Display their profile info, posts, photos, etc.

💡 Real-world example:

When someone visits website.com/profile/john, your page component gets "john" as a parameter. You can then use this to query your database for John's information and display his profile page with his bio, posts, followers, etc.

Other common dynamic route uses:

Product Pages

app/product/[id]/page.tsx → website.com/product/shoe-123

Blog Posts

app/blog/[slug]/page.tsx → website.com/blog/how-to-code

Page Best Practices

✅ Do This

Use descriptive folder names that match your URLs
Use a hyphen instead of a space like this-and-that
Keep page components focused on layout and data fetching
Extract reusable UI into separate components
Use consistent naming conventions

❌ Avoid This

Don't rename page.tsx files
Don't put all your logic directly in page files
Don't create deeply nested routes unless necessary
Don't use spaces or special characters in folder names