Next.jsでMDXを使うの簡単すぎ
いや,まじ,簡単すぎて,1時間かかったよ.開始2分で設定が完了しているなんて誰が予測できるよ？
初心者にはちょっとつらいこの公式のDoc通りにやろうと思ったのです.
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最高！
Author And Source
この問題について(Next.jsでMDXを使うの簡単すぎ), 我々は、より多くの情報をここで見つけました https://zenn.dev/nbr41to/articles/3329572bbefba361ee3f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol