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:

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

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

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

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

Thank you for reading, let’s connect!

Thank you for visiting this little corner of mine. Let’s connect on Twitter, Discord and LinkedIn