ファイルの整理

Nextra はまず、pages ディレクトリからすべての Markdown ファイルと設定を収集し、サイト全体の「ページマップ情報」を生成して、下記の *ナビゲーションバー* や *サイドバー* などのレンダリングを行います。

デフォルトの動作

デフォルトでは、ページマップにはすべての .md と .mdx ファイル名とディレクトリ構造が含まれ、アルファベット順にソートされます。その後、Nextra は title パッケージを使用して、ファイル名からフォーマットされたページ名を取得します。

たとえば、次の構造があるとします。

解決されたページマップは次のようになります（すべての名前はアルファベット順にソートされています）。

[
  {
    "name": "About",
    "children": [{ "name": "Index" }, { "name": "Legal" }]
  },
  { "name": "Contact" },
  { "name": "Index" }
]

そして、グローバルページマップは Nextra によって各ページにインポートされます。その後、設定されたテーマがそのページマップを使用して実際の UI をレンダリングします。

_meta.js

ファイル名だけに依存するのではなく、各ページのタイトルをカスタマイズすることは非常に一般的です。「Index」というタイトルのページは分かりにくいです。「Home」など、コンテンツを正確に表す意味のあるタイトルを付けることが望ましいです。

そこで _meta.js ファイルが登場します。各ディレクトリに _meta.js ファイルを配置でき、それを使用して各ページのデフォルト設定を上書きできます。

許可された拡張子

_meta ファイルには、.jsx、.ts、.tsx 拡張子も使用できます（例：_meta.ts）。

ページのアルファベット順ソート

ESLint の組み込みルール sort-keys を使用し、_meta ファイルの先頭に /* eslint sort-keys: error */ コメントを追加すると、順序が間違っている場合に ESLint のエラーが表示されます。

next-sitemap との使用方法

next-sitemap を使用している場合、exclude: ['*/_meta'] を next-sitemap.config.js ファイルに追加する必要があるでしょう。これは _meta ファイルをビルドから除外するのは難しい からです。

許可されたキーと値

_meta キーの型は、JavaScript オブジェクトでは数値が常に最初に順序付けられる ため、常に number ではなく string である必要があります。

以下は

export default {
  foo: '',
  1992_10_21: '',
  1: ''
}

に変換されます。

export default {
  '1': '',
  '19921021': '',
  foo: ''
}

例

pages/_meta.js ファイルにこれを配置します。

export default {
  index: 'My Homepage',
  contact: 'Contact Us',
  about: 'About Us'
}

これにより、Nextra は各ページの順序と正しいタイトルを認識します。

あるいは、title プロパティを使用して、他の設定も追加できます。

export default {
  index: 'My Homepage',
  contact: 'Contact Us',
  about: {
    title: 'About Us'
    // ... extra configurations
  }
}

追加の設定は、追加情報として**テーマ**に渡されます。詳細については、対応するページをご覧ください。