File-Based Routing
Flat files in src/app directly create URL routes without needing a folder.
Overview
Bini.js supports file-based routing - a file directly inside src/app/ becomes a route. No folder needed. For example about.tsx creates /about.
This is different from folder-based routing where you need about/page.tsx. File-based is faster for single pages.
| File Path | URL | Creates URL? |
|---|---|---|
| app/about.tsx | /about | Yes - flat file creates URL |
| app/contact.tsx | /contact | Yes - flat file creates URL |
| app/blog.tsx | /blog | Yes - flat file creates URL |
| app/page.tsx | / | Yes - root file creates URL |
Basic File Routing
A file in src/app directly maps to a URL. The file must export a default React component.
app
page.tsx
about.tsx
contact.tsx
pricing.tsx
blog.tsx
/Routable
/aboutRoutable
/contactRoutable
/pricingRoutable
/blogRoutable
app/about.tsx
export default function AboutPage() {
return <h1>About Us</h1>
}app/contact.tsx
export default function ContactPage() {
return <h1>Contact Us</h1>
}File-based routing creates a URL directly from the file name. No folder with
page.tsx needed.Flat Files vs Folders
Both achieve the same URL, but file-based is shorter for simple pages.
| Approach | File Path | URL | Creates URL? |
|---|---|---|---|
| File-based | app/about.tsx | /about | Yes - file creates URL |
| Folder-based | app/about/page.tsx | /about | Yes - folder + page creates URL |
| File-based | app/dashboard.tsx | /dashboard | Yes - file creates URL |
| Folder-based | app/dashboard/page.tsx | /dashboard | Yes - folder + page creates URL |
File-based
app
about.tsx
contact.tsx
/aboutRoutable
/contactRoutable
Folder-based
app
about
page.tsx
contact
page.tsx
/aboutRoutable
/contactRoutable
Use file-based for simple single pages. Use folder-based when you need co-located layouts, loading, or private folders like
_components inside the route.Index Files
index.tsx inside a folder maps to that folder's URL. This is file-based routing inside a folder.
app
dashboard
index.tsx
settings
index.tsx
blog
index.tsx
authors
index.tsx
page.tsx
/dashboardRoutable
/dashboard/settingsRoutable
/blogRoutable
/blog/authorsRoutable
/Routable
| File Path | URL | Creates URL? |
|---|---|---|
| app/dashboard/index.tsx | /dashboard | Yes - index creates URL |
| app/blog/index.tsx | /blog | Yes - index creates URL |
| app/blog/authors/index.tsx | /blog/authors | Yes - nested index creates URL |
index.tsx is equivalent to page.tsx inside that folder - both create the same URL. Choose one pattern and stick to it.File Extensions & Priority
Supported extensions for file-based routes and their priority when the same name exists.
.tsx > .jsx > .ts > .js > .mdx > .md
app
about.tsx
about.jsx
about.mdx
blog.tsx
contact.md
/aboutRoutable
(ignored)Not Routable
(ignored)Not Routable
/blogRoutable
/contactRoutable
| Extension | Creates URL? | Description |
|---|---|---|
| .tsx | Yes | Highest priority - creates URL |
| .jsx | Yes | Second priority - creates URL if no .tsx |
| .ts | Yes | Third priority |
| .js | Yes | Fourth priority |
| .mdx | Yes | MDX page - creates URL |
| .md | Yes | Markdown page - creates URL |
Reserved Names
These file names are never treated as flat file routes - they are special files for structure, not routes.
| File Name | Creates URL? | Reason |
|---|---|---|
| page.tsx | Yes - but via folder | Special - defines folder route |
| layout.tsx | No | Special file - layout, not route |
| loading.tsx | No | Special file - loading UI |
| error.tsx | No | Special file - error UI |
| not-found.tsx | No | Special file - 404 UI |
| template.tsx | No | Special file - template |
| default.tsx | No | Special file - parallel route fallback |
| global-error.tsx | No | Special file - global error |
app
about.tsx
contact.tsx
layout.tsx
loading.tsx
page.tsx
dashboard.tsx
/aboutRoutable
/contactRoutable
-Not Routable
-Not Routable
/Routable
/dashboardRoutable
Only regular file names like
about.tsx, contact.tsx create URLs. Reserved names like layout.tsx, loading.tsx, error.tsx do not create URLs - they are special files.Complete Example
File-based routing only - flat files that create URLs without folders.
app
page.tsx
about.tsx
contact.tsx
pricing.tsx
blog.tsx
dashboard.tsx
faq.tsx
dashboard
index.tsx
settings.tsx
blog
index.tsx
layout.tsx
/Routable
/aboutRoutable
/contactRoutable
/pricingRoutable
/blogRoutable
/dashboardRoutable
/faqRoutable
/dashboardRoutable
/dashboard/settingsRoutable
/blogRoutable
-Not Routable
| File Path | URL | Creates URL? |
|---|---|---|
| app/page.tsx | / | Yes - creates URL |
| app/about.tsx | /about | Yes - file based creates URL |
| app/contact.tsx | /contact | Yes - file based creates URL |
| app/blog.tsx | /blog | Yes - file based creates URL |
| app/dashboard/index.tsx | /dashboard | Yes - index file creates URL |
| app/dashboard/settings.tsx | /dashboard/settings | Yes - nested file creates URL |
| app/layout.tsx | - | No - reserved name, no URL |
| app/_components/Header.tsx | - | No - private folder, no URL |
File-based routing: flat files like
about.tsx create URLs directly. Folder + page.tsx also creates URLs but is folder-based. Reserved names like layout.tsx never create URLs. Each valid file creates a URL.Was this helpful?