Why Page.tsx as route definition in NextJS? - Purpose & Use Cases

The Big Idea

What if your website could create routes by itself just from your files?

The Scenario

Imagine building a website where you have to manually link each URL to a specific file or function in your code.

Every time you add a new page, you must update a big list of routes by hand.

The Problem

Manually managing routes is slow and error-prone.

You might forget to update the list, causing broken links or confusing navigation.

It's hard to keep track of which file matches which URL, especially as your site grows.

The Solution

With Next.js, each Page.tsx file automatically becomes a route.

You just create a file in the right folder, and Next.js handles the URL for you.

This means no manual route lists and fewer mistakes.

Before vs After

✗ Before

const routes = { '/home': HomePage, '/about': AboutPage };

✓ After

export default function Home() { return <h1>Home</h1>; }

What It Enables

This lets you focus on building pages, while Next.js manages the URLs automatically.

Real Life Example

When you add a new blog post page, just create pages/blog/post1.tsx and it's instantly available at /blog/post1.

Key Takeaways

Manual route lists are hard to maintain and error-prone.

Next.js uses Page.tsx files as routes automatically.

This simplifies development and reduces bugs.