ファイルベースルーティング

はじめるで作ったトップページに、会社情報とお知らせのページを追加します。ministaではsrc/pages/のファイル名とディレクトリ構造からURLが決まります。

このガイドは、静的HTMLの出力に必須のpluginSsg()を設定した構成を前提にしています。

Table of Contents

• ページを追加する
• ディレクトリで階層を作る
• ページ間をリンクする
• 下書きを除外する
• 配置のルール

ページを追加する

src/pages/about.tsxを作り、Reactコンポーネントをdefault exportします。開発サーバーを起動して、/aboutを開いてください。

import type { Metadata, PageProps } from "minista/types"

export const metadata: Metadata = { title: "私たちについて" }

export default function About({ title }: PageProps) {
  return <h1>{title}</h1>
}

metadataはページやレイアウトへ渡すデータです。Metadataでその項目を、PagePropsでページが受け取るpropsを型チェックできます。この例では、metadataのtitleをpropsから受け取り、見出しに表示しています。titleをHTMLのheadに反映する方法はレイアウトで扱います。

ディレクトリで階層を作る

news/を作り、その中へindex.tsxとhello.tsxを追加します。どちらもトップページと同じようにコンポーネントを書けばページになります。

src/pages/
├── index.tsx
├── about.tsx
└── news/
    ├── index.tsx
    └── hello.tsx

npm run buildを実行すると、次の構成で出力されます。

dist/
├── index.html
├── about.html
└── news/
    ├── index.html
    └── hello.html

公開後に拡張子を省略したURLを使えるかは、ホスティング側の設定によります。ディレクトリのインデックスを配信する構成なら、about/index.tsxのように配置します。

ページ間をリンクする

ページ間の移動には通常のa要素を使います。専用のルーターやリンクコンポーネントは不要です。

import type { Metadata, PageProps } from "minista/types"

export const metadata: Metadata = { title: "My Site" }

export default function Page({ title }: PageProps) {
  return (
    <>
      <h1>{title}</h1>
      <nav>
        <a href="/about">私たちについて</a>
        <a href="/news/">お知らせ</a>
      </nav>
    </>
  )
}

baseを指定してサブディレクトリへ公開する場合は、ページリンクにも公開パスを付けます。詳しくはビルドとデプロイを参照してください。

下書きを除外する

制作中のページにはdraft: trueを指定できます。開発中は表示され、本番ビルドからは除外されます。

import type { Metadata, PageProps } from "minista/types"

export const metadata: Metadata = {
  title: "制作中のお知らせ",
  draft: true,
}

export default function Article({ title }: PageProps) {
  return <h1>{title}</h1>
}

配置のルール

.jsx .tsx .md .mdxがページの対象です。共通パーツやデータファイルはsrc/components/やsrc/data/など、ページの探索範囲外へ置きます。

同じURLになるファイルは作らないでください。例えばabout.tsxとabout.mdxは競合します。npx minista checkでページ構成を検査できます。

APIから取得したデータで複数ページを作る方法はAPIによるページ生成で紹介します。

次はMarkdown・MDXで、本文を記述する方法を追加します。