File Based Routing in Next.js

In traditional React applications, routing is something you configure manually using a library. You define paths, connect them to components, and maintain that configuration as your app grows.

In Next.js, routing works differently.

Next.js uses file-based routing, which means your folder and file structure automatically defines your application routes. You do not need to set up a router or write route configuration.

This approach makes routing simpler, more predictable, and easier to scale.

Example - Basic Routing Structure

Inside the app/ folder, each folder represents a route segment:

app/
  page.tsx
  about/
    page.tsx
  contact/
    page.tsx

What URLs These Create

• app/page.tsx → /;
• app/about/page.tsx → /about;
• app/contact/page.tsx → /contact.

Each page.tsx file defines what is displayed for that route.

Why File-Based Routing Is Useful

• You do not need to configure routes manually;
• The structure is easy to understand by looking at folders;
• Adding new pages is fast and predictable;
• It reduces boilerplate code compared to traditional routing setups.

How It Scales

As your app grows, you simply add more folders and pages:

app/
  blog/
    page.tsx
    post/
      page.tsx

This creates routes like:

• /blog
• /blog/post

The structure remains consistent even in larger applications.