Next.js turbopackでmdxを使う方法について

TurbopackでMDXを使う方法について

Next.jsでは、最近になってコンパイラーをwebpackから、turbopackに移行しつつある。
webpackがJavascriptで書かれているのに対して、turbopackはRustで書かれており、ビルドが高速化されることが期待されている。

基本的に公式ドキュメントなどではまだwebpackを利用する場合の内容が書かれていることが多い気がしている。
今回はMDXをNext.jsで表示するためのドキュメントがwebpack用で書かれていたので、それのturbopack用の内容について考えてみようと思う。

Next.jsでMDXを使う方法についてのドキュメント

https://nextjs.org/docs/app/guides/mdx

詳細はこのドキュメントの内容を読めばある程度わかるので、省略します。
重要なのはnext.config.tsの設定です。

以下のように設定します。

next.config.ts

import type { NextConfig } from 'next';
import createMDX from '@next/mdx'

const nextConfig: NextConfig = {
  experimental: {
    mdxRs: true,
  },
};

const withMDX = createMDX({
  // Add markdown plugins here, as desired
})

export default withMDX(nextConfig)

experimentalのoptionでmdxRs: trueを設定することが重要です。
これを設定しないとMDXファイルを読み込もうとしてもunknown module errorがでます。

なんでこれで解決するのか？

mdxRs: trueはmdxファイルをRustでコンパイルするオプションです。turbopackもRustでコンパイルするので、そこを合わせることで、コンパイルエラーを防ぐことができるのではないかと思います。

どうでもいいこと

turbopackはRust製で高速と言われているが、Next.jsの開発環境で使っていてもそこまで高速とは感じません。
それよりもむしろRemixやViteで使われているGo製のesbuildの方が早いように感じてしまいます。使い方が悪いかもしれませんが、今後の改善に期待です。

https://esbuild.github.io/