ファイルベース（ファイルベース）
ルーティング・コンテンツ管理・設定をファイル/ディレクトリ構造で表現する設計手法。Next.js の App Router、Astro Content Collection、SvelteKit、Hugo 等で採用。
概要
ファイルベース（File-based）は、ルーティング・コンテンツ管理・設定をファイルやディレクトリ構造そのもので表現する設計手法を指す。設定ファイル（routes.json / pages.config.js 等）を排除し、ディレクトリツリーが規約により役割を担う「Convention over Configuration」の体現として、Next.js / Astro / SvelteKit / Remix 等のモダン Web フレームワークで標準採用されている。2026 年現在、Markdown / MDX による記事管理（jisaku.com を含む多くのコンテンツサイト）の標準的アプローチとなっている。
主要なファイルベース実装
| フレームワーク | ルーティング | コンテンツ | 特徴 |
|---|---|---|---|
| Next.js 16 | App Router (app/**/page.tsx) | 任意 (MDX / Contentlayer) | React Server Components 完全統合 |
| Astro 5 | src/pages/**/*.astro | Content Layer API | Islands Architecture、ゼロ JS デフォルト |
| SvelteKit | src/routes/**/+page.svelte | 任意 | Svelte 5 Runes 統合 |
| Remix | app/routes/**/route.tsx | 任意 | フラットルート v3、ネスト UI |
| Hugo | content/**/*.md | Markdown SSOT | 静的サイト生成最速、Go ベース |
| Eleventy 11ty | _data/ + *.md / *.njk | Markdown / Nunjucks | シンプル静的サイト |
| Nuxt 3 | pages/**/*.vue | Content Module | Vue 3.5 Composition API |
| Docusaurus | docs/**/*.md | Markdown | Meta 由来、技術ドキュメント特化 |
主な特徴・仕組み
- 動的ルート:
[slug].tsx/[id]/[name].tsxで URL パラメータをファイル名で表現 - ネストレイアウト: ディレクトリ階層で UI のネストを表現
- コロケーション: コンポーネント / テスト / スタイルをページと同じディレクトリに配置
- コンテンツコレクション:
content/posts/*.md配下の Markdown を型安全に列挙 - Catch-all:
[...slug].tsxで複数階層を吸収（404 ページ等）
ディレクトリ命名規約の例
| パターン | 役割 | 例（Next.js App Router） |
|---|---|---|
page.tsx | ページコンポーネント | app/about/page.tsx |
layout.tsx | レイアウト | app/blog/layout.tsx |
loading.tsx | ローディング UI | app/loading.tsx |
error.tsx | エラー境界 | app/error.tsx |
[id]/page.tsx | 動的セグメント | app/posts/[slug]/page.tsx |
(group)/page.tsx | ルートグループ | app/(marketing)/about/page.tsx |
route.ts | API ルート | app/api/users/route.ts |
自作 PC / 開発環境での恩恵
- VS Code エクスプローラ: ディレクトリ構造がそのままサイト構造として可視化
- Git diff: ファイル単位でコンテンツ変更が追跡しやすい
- CI/CD: 変更ファイルから影響ページを自動判定（Turborepo / Nx の依存追跡）
- ローカル開発: Hot Module Replacement の対象が明確
関連用語との違い
| 用語 | 違い |
|---|---|
| ヘッドレス CMS | DB バックエンド型、ファイルベースは Git バックエンド型 |
| 設定ベース（Config-based） | routes.json 等で明示。ファイルベースはディレクトリ自体が設定 |
| MPA / SPA | アーキテクチャ。ファイルベースはどちらにも適用可 |
よくある質問
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 で設定の複雑さを排除する思想