Next.jsでMDXを使うの簡単すぎ

いや,まじ,簡単すぎて,1時間かかったよ.開始2分で設定が完了しているなんて誰が予測できるよ？

初心者にはちょっとつらいこの公式のDoc通りにやろうと思ったのです.

Next.js | MDX

CRAのときみたいに変換するコンポーネントを作成する必要があると思い,どんなコンポーネントファイルを作成すればできるんだろう🤔と30分くらい調べてしまった.

実際は

インストールして

npm install --save @next/mdx @mdx-js/loader

next.config.jsってファイルをpackage.jsonとかと同じところに作ったら

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx', "ts", "tsx"]
})

拡張子が.mdxのファイルが自動でコンポーネントに変換されるという超絶楽チン仕様でした👍

pages/hello.mdxって感じにファイル作って

import Sample from "../src/sampleComp.jsx"

# MDX登場！

このページはMDXで書かれています😎
<div style={{ padding: "10px 30px", backgroundColor: "tomato" }}>
    <h2>Try making this heading have the color tomato</h2>
</div>

<Sample/>

とMDX形式で書いてあげると,http://localhost:3000/helloでこのmdxファイルがページになっていました.他のコンポーネントもimportできてました！

こんな簡単なはずでは😭

Next.js最高！