---
title: "File-Based vs. Directory-Based Routing: Understanding the Difference"
author: "James 'Dante' Midzi "
published: "2024-11-24T00:00:00.000Z"
updated: "2026-08-31T23:50:00.116Z"
url: "https://zyvop.com/file-based-vs-directory-based-routing-understanding-the-difference-fnjk9"
canonical: "https://dantedecodes.vercel.app/articles/file-based-vs-directory-based-routing-understanding-the-difference-30mp"
tags: []
---

# File-Based vs. Directory-Based Routing: Understanding the Difference

![Cover image](<https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9lwr4v5e5tlctpig0s79.png>)

I don't know who did it, and why everyone is suddenly confused by this. What you are calling file-based routing is not what you claim. I will gladly explain.

I am going to use Next.js as an example:

### File Based

This is file-based routing:  

```markdown
src/
└── pages/
    ├── index.js
    ├── about.js
    └── contact.js
```

Enter fullscreen mode Exit fullscreen mode

In the folder that defines your pages, if you are able to create a file in there and it automatically becomes a page (contact, about, services etc) that is file based routing.

File-based routing is a routing where the entry point to your routes is an index file. What that mean is the same way you can have a `contact.jsx` , you could also make a `contact/index.js` and these two would do exactly the same with little to no issues.

Frameworks that employ this:

-   Astro
    
-   Eleventy
    
-   Nextjs (with pages)s
    
-   Vue
    
-   Svelte
    

* * *

### Directory Based

This is directory based routing  

```markdown
src/
└── app/
    ├── page.js
    ├── about/
    │   └── page.js
    └── contact/
        └── page.js
```

Enter fullscreen mode Exit fullscreen mode

With this way, there is a defined method of creating new pages i.e a folder with the file name and a special file within it.

When using this way, anything that does not follow this pattern is not regarded a page.

Frameworks that use this

-   Nextjs (with app)
    
-   SvleteKit
    

* * *

## A Table To Know What You Are Using

| Ask | File-Based Routing | Directory-Based Routing |
| --- | --- | --- |
| Can I make a file name as a route and it works? | Yes | No |
| Can I create a folder with an `index` file and that will become the page? | Yes | No |
| Do I have a special naming convention for pages? | No | Yes |

With this clarification at hand, can you all stop confusing this? You can? Thank you.

* * *

### Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. Let's connect on [Twitter](<https://twitter.com/Psypher1>), [Discord](<https://discord.com/users/Pharaoh#5441/>) and [LinkedIn](<https://www.linkedin.com/in/jamesmidzi/>)