マークダウン

ファイルシステムベースのルーターは、すぐに使用できるMarkdownをサポートしています。標準のMarkdownファイルだけでなく、MDXやRemarkとRehypeの両方のプラグインもサポートします。

MarkdownまたはMDXを使用するには、.mdまたは.mdx拡張子のページを作成するだけです。ファイルの内容は、React Server Componentとしてレンダリングされます。

ページのルートディレクトリに、以下のようなreadme.mdxという名前のページを作成します。

# Hello MDX!

This is an MDX page.

このルートは/readmeですぐに利用できるようになります。

Markdown/MDXドキュメントはReact Server Componentとしてレンダリングされるため、クライアントコンポーネント、フォールバックの読み込み、エラーバウンダリなどのすべてのReact機能もサポートされます。すべての標準ページと同様です。

親レイアウトはMarkdown/MDXページにも適用されます。

豆知識: このドキュメントWebサイトも、ファイルシステムベースのルーターとMDXを使用して作成されました。

ファイルシステムベースのルーターでは、任意のRemarkまたはRehypeプラグインを使用できます。プラグインをインストールして、react-server.config.mjsファイルに追加するだけです。以下の例では、remark-gfmとrehype-highlightを使用しています。

import rehypeHighlight from "rehype-highlight";
import rehypeMdxCodeProps from "rehype-mdx-code-props";
import remarkGfm from "remark-gfm";

export default {
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeHighlight, rehypeMdxCodeProps],
  },
};

カスタムコンポーネントを使用するには、プロジェクトルートにmdx-components.jsxまたはmdx-components.tsxファイルを作成する必要があります。このファイルは、カスタムコンポーネントを含むオブジェクトを返すuseMDXComponents関数をエクスポートする必要があります。

export default function useMDXComponents() {
  return {
    h1: (props) => <h1 style={{ color: "red" }} {...props} />,
  };
}

useMDXComponents関数をエクスポートするファイルのデフォルトの場所をreact-server.config.mjsファイル内のどこに配置するかを指定することもできます。

export default {
  mdx: {
    components: "./src/mdx-components.jsx",
  },
};