アセット配置

Nextra は、ページごとに使い分けられる（少なくとも）2つのアセット配置方式を サポートしており、両方を組み合わせて使うこともできる。

• public/ に置き、安定したルート相対URLを得る。 public/ に配置した ファイルは、どのページから参照されてもサイトルートから配信される。本 プロジェクトの public/nextra-demo.png がこれに当たる。next/image に 文字列で src="/nextra-demo.png" を渡しても basePath は自動付与されず （Next.js公式ドキュメント参照 ）、 デプロイ後（/docfw-cmp/nextra 配下）は404になってしまう。そのため本 プロジェクトでは import nextraDemo from '../../../public/nextra-demo.png' のようにモジュールとして import しており、この場合は Next.js のビルド パイプラインが開発・本番の両方で自動的に basePath を解決してくれる。
• コンテンツと画像を同じ場所にまとめる近接配置。 画像を _assets フォルダなどに置き、MDXファイルと同じ場所に配置したうえで相対Markdownパス で参照する方式。本プロジェクトの content/ja/criteria/_assets/diagram.png がこれに当たり、./_assets/diagram.png として参照されている。

両者のトレードオフは、主に共有のしやすさと局所性のバランスにある。public/ のアセットは、どのページからも同じルート相対パスで到達できるため、多数の ページやロケール間で使い回しやすい。一方、近接配置のアセットはページと画像が ソースツリー上でひとまとまりになるため、ページ名の変更や別フォルダへの移動が あっても画像が一緒についてくる、という管理のしやすさがある。プロジェクト 全体でどちらか一方に統一する規約はなく、著者がページやアセットごとに選択する。

両方の画像が実際に描画される実例は 画像の自動最適化 を参照。