DEV Community

Cover image for File-Based vs. Directory-Based Routing: Understanding the Difference
James 'Dante' Midzi
James 'Dante' Midzi

Posted on • Updated on • Originally published at

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

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:

└── 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

└── 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, Discord and LinkedIn

Top comments (0)