ファイルベース（ファイルベース）

概要

ファイルベース（File-based）は、ルーティング・コンテンツ管理・設定をファイルやディレクトリ構造そのもので表現する設計手法を指す。設定ファイル（routes.json / pages.config.js 等）を排除し、ディレクトリツリーが規約により役割を担う「Convention over Configuration」の体現として、Next.js / Astro / SvelteKit / Remix 等のモダン Web フレームワークで標準採用されている。2026 年現在、Markdown / MDX による記事管理（jisaku.com を含む多くのコンテンツサイト）の標準的アプローチとなっている。

主要なファイルベース実装

主な特徴・仕組み

• 動的ルート: [slug].tsx / [id]/[name].tsx で URL パラメータをファイル名で表現
• ネストレイアウト: ディレクトリ階層で UI のネストを表現
• コロケーション: コンポーネント / テスト / スタイルをページと同じディレクトリに配置
• コンテンツコレクション: content/posts/*.md 配下の Markdown を型安全に列挙
• Catch-all: [...slug].tsx で複数階層を吸収（404 ページ等）

ディレクトリ命名規約の例

自作 PC / 開発環境での恩恵

• VS Code エクスプローラ: ディレクトリ構造がそのままサイト構造として可視化
• Git diff: ファイル単位でコンテンツ変更が追跡しやすい
• CI/CD: 変更ファイルから影響ページを自動判定（Turborepo / Nx の依存追跡）
• ローカル開発: Hot Module Replacement の対象が明確

関連用語との違い

よくある質問

Q1: ファイルベースは大規模サイトでも破綻しない？ A: 破綻しない。Vercel 自身のサイト（数千ページ）、Stripe Docs、Apple Developer 等が大規模ファイルベース運用している。

Q2: Next.js Pages Router と App Router、ファイルベースとして何が違う？ A: App Router は React Server Components / 並列レイアウト / Streaming 対応。Pages は SSR / SSG のみ。新規開発は App Router 一択。

Q3: Astro Content Collection と Contentlayer 2、どちらを選ぶ？ A: Astro 5 では Content Layer API（公式組み込み）。Next.js では Contentlayer 2（OSS）か Velite（後継）。jisaku.com は MDX 直処理を採用。

まとめ

• ディレクトリ構造でルーティング/コンテンツを表現 する設計手法
• 2026 年は Next.js App Router / Astro 5 / SvelteKit が主流
• Convention over Configuration で設定の複雑さを排除する思想