Overview

Bini.js uses folder-based routing - every folder inside src/app/ becomes a URL segment. Add page.tsx inside that folder to make the route accessible.

Folder names must be valid URL segments and the structure directly maps to the URL path.

Basic Folder Routing

Every folder becomes a segment. Add page.tsx to expose it. index.tsx also maps to its parent.

export default function AboutPage() {
  return <h1>About</h1>
}

Nested Routes

Nest folders to create nested URL segments. Each nested folder adds a segment and creates a URL.

export default function AuthorsPage() {
  return (
    <ul>
      <li>Alice</li>
      <li>Bob</li>
    </ul>
  )
}

Route Groups

(group) organizes folders without affecting URL. The group folder does not create a URL segment.

export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <nav>Marketing Nav</nav>
      <main>{children}</main>
    </div>
  )
}

URLs are /, /about, /pricing, /dashboard - the (marketing) and (app) folders don't create URL segments.

Private Folders (Private Routes)

Private folders are folder-based private routes - prefix a folder with _ or . to exclude it from routing. They do not create URLs.

Nearest Wins with Folders

loading.tsx, not-found.tsx, error.tsx use nearest-wins resolution for folder hierarchy. A file in a subfolder only affects that subfolder.

Resolution: route's own folder → parent folders → built-in default.

export default function DashboardLoading() {
  return <p>Loading dashboard…</p>
}

Route Priority

In folder-based routing, static folders define exact routes and create URLs. Shorter paths are matched first.

Complete Example

Complete folder-based routing example showing which folders create URLs and which don't.