Next.js AppRouterの動的ページでmdxを表示させる方法（SSG)

はじめに
1. インストールまでの手順
2. 動的ページに直で記すとエラーが発生
手順
参考文献
おわりに

はじめに

インストールまでの手順

プロジェクト内で使えるように、インストールまでの手順は以下をご参照ください。

Next.jsでmdxを使ってみた。@next/mdxのインストールから表示までの手順。

はじめにマークダウンのライブラリの選択肢は、今回紹介するNext/MDXの他にもあります。 Reactで、react-markdownを使用したことがありますが、個人的には好みではなく、完全なマークダウンではなく、何かしら変数を組み合わ...

動的ページに直で記すとエラーが発生

TypeError: createContext only works in Client Components. Add the “use client” directive at the top of the file to use it.

AppRouterなので、すべてサーバコンポーネントです。明示的に”use client”と記すことでクライアントコンポーネントとして利用できます。

そのため、一般にはファイルの先頭にuse clientと記せばエラーは消えますが、
レンダリングをSSGとする場合、うまくいきません。

SSGで動的ページを作成する場合、AppRouterではgenerateStaticParamsを使用しますが、これはサーバコンポーネントであるため、use clientと記すことはできません。

以下のように記すことで、動的ページにmdxを表示することができます。

手順

src/md/md.mdxを作成する

以下のように記します。

# Welcome to my MDX page!

src/component/mdRelay.tsxを作成する

importの識別子は、特に指定はありません。私はMdxとしました。
ここは、mdxを中継するためのファイルです。

本ファイルは、クライアントコンポーネントを利用するため”use client”を追加します。

"use client"
import Mdx from '@/md/md.mdx'
const MdRelay = () => {
 return (
  <>
   <Mdx />
  </>
 );
}
export default MdRelay;

src/app/[page]/page.tsxを作成する

先ほど作成した中継用ファイルをインポートし、その中に追加します。

import { NextPage } from 'next';
import MdRelay from '@/component/mdRelay';

type Props = {//省略}
const Page: NextPage<Props> = (props) => {
   //省略
   return (
     <>
       <MdRelay />
     </>
  );
};
export default Page;

export const generateStaticParams = async () => {
     //省略 (1,2ページが存在すると仮定）
     return {{ page: '1' }, { page: '2' }}
}

これで問題なく動的ページでもmdxを利用できます。

参考文献

nextjs.org GenerateStaticParams

[NEXT-1049] use client with generateStaticParams will opt out of static generation #46735

おわりに

一筋縄ではいかないですね。
私は、静的サイトを生成しているだけなので、正直AppRouterである必要があまりないです。
AppRouterが推奨されているのは、SSRファーストだからでしょうか。