MDX 2は次です.JSと埋め込みコンポーネント( ESM版)

動機と導入

我々は今とかなりの数のウェブサイトを作りましたNext.js and
我々は本当に経験と結果を愛する.ありがとう
Opstrace 我々はソースを巨大なコンポーネントを開くことができた
次の製品のドキュメントをレンダリングするには.JSページ
Next Product Docs .
しかし、全体のMarkdown生態系は進化しています
MDX 2のリリースでは、次のような設定ができます.

📝 改良された構文を使用すると、JSX

🧑‍💻 式のターン{2 \* Math.PI} into 6.283185307179586

🔌 新しいesbuild、rolulup、およびノード.JS統合

そして、ずっと.あなたはread the announcement here .

生態系にあるので、一部の部品は他のものより速く動いたり遅くなったりしています
MDX 2に移動するにはいくつかのフープジャンプすることはありません.
我々は統合しようとしている
unified/remark/rehype
のような有用な機能を使用してMarkdownの処理と拡張性の改善
Github風味のマークダウン、外部リンクのハンドリングなど、我々も統合している
埋め込むなどのサードパーティ製プラットフォームであなたの仕事を披露する
rehypeはプラグインを使ってHTMLを変換するツールです
マークダウン.
この記事では2種類の埋め込み機構を使用しています.

remark-embedder

mdx-embed

remark-embedder それはembedにベースの単純なリンクを変換するので、素晴らしいです
oembed形式で.すべてがビルド/レンダリング時間中に行われるので、embed
コードは直接コンパイルされますhtml 任意のクライアント側なしで
ジャバスクリプト.あなたは
list of supported oEmbed providers here .mdx-embed 別のアプローチを取り、
インポートmdx . 彼らは、コンポーネント/embedの異なるセットを持っています.
良いニュース:あなたが望むならば、あなたは同じファイルで両方のアプローチを使うことができます.
以下に例を示しますremark-embedder :
https://twitter.com/PatrickHeneise/status/1508503730295037954
ボーナス:それはESMで動作します.

始める

どちらでも構いませんstart from scratch またはアップグレード
次に存在する.MDXプロジェクト.参考として
created a repository on GitHub と
実施例

セットアップ

必要なパッケージをリストアップし、優先パッケージマネージャを
インストールします.

基本( next . jsのmdx loader )

    @mdx-js/loader @next/mdx

プラグイン/ rehypeプラグイン

    rehype-external-links remark-gfm remark-frontmatter

発言プラグインの一覧
https://github.com/remarkjs/remark/blob/main/doc/plugins.md#listプラグインの

プラグインのリスト
https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#listプラグインの

発言埋め込み

ビルド時にOembedを含める場合は

    @remark-embedder/core @remark-embedder/transformer-oembed

MDX埋め込み

最後には、少なくとも「MDX埋め込み」コンポーネントを埋め込む

    mdx-embed

次。JS設定

我々は、Webpackとを介してMDXの処理を統合している
@mdx-js/loader . を追加する必要がありますpageExtensions とWebpackの設定.お気軽に追加/削除/rehypeを削除する
ここのプラグイン.

import remarkFrontmatter from 'remark-frontmatter'
import remarkGfm from 'remark-gfm'
import rehypeExternalLinks from 'rehype-external-links'

import fauxRemarkEmbedder from '@remark-embedder/core'
import fauxOembedTransformer from '@remark-embedder/transformer-oembed'
const remarkEmbedder = fauxRemarkEmbedder.default
const oembedTransformer = fauxOembedTransformer.default

const nextConfig = {
  reactStrictMode: true,
  experimental: { esmExternals: true },
  pageExtensions: ['md', 'mdx', 'jsx', 'js'],
  webpack: function (config) {
    config.module.rules.push({
      test: /\.mdx?$/,
      use: [
        {
          loader: '@mdx-js/loader',
          options: {
            rehypePlugins: [rehypeExternalLinks],
            remarkPlugins: [
              remarkGfm,
              remarkFrontmatter,
              [remarkEmbedder, { transformers: [oembedTransformer] }]
            ]
          }
        }
      ]
    })
    return config
  }
}

export default nextConfig

JSXページ

新しいページを作成できます[post].jsx ). 我々はダイナミックなインポートを使用することができます
MDXファイルの内容を通常のコンポーネントとして読み込む.我々も
動的インポートmdx-embed , モジュールはまだESM互換ではありません.

import dynamic from 'next/dynamic'
import { getSlugs, getMeta } from 'utils/posts.js'
import { MDXProvider } from '@mdx-js/react'

export default function Post({ post, meta }) {
  // import mdx
  const Post = dynamic(import(`content/posts/${post}.mdx`))

  // dynamic import because not ESM compatible
  const embeds = dynamic(() => import('mdx-embed'))
  const { CodePen, Gist } = embeds

  const components = {
    CodePen,
    Gist
  }

  return (
    <div>
      <main>
        <h1>{meta.title}</h1>
        <article className="prose">
          <MDXProvider components={components}>
            <Post />
          </MDXProvider>
        </article>
      </main>
    </div>
  )
}

MDXコンテンツ

これはレンダリングされるファイルです.これは、正規表現を使用して簡単なMDXファイルです
Markdown YLL FrontMatter、輸出よりむしろ.あなたは、あなたにそれを変えることができます
好き.コンポーネントを再度インポートする必要があります.
あなたはフルを見つけることができます
list of supported components on the mdx-embed page .

---
title: hello world
date: '2022-04-01'
preview: showing off twitter embeds
---

import { CodePen, Gist } from 'mdx-embed'

This is a demo post.

### Twitter Embed

https://twitter.com/PatrickHeneise/status/1508503730295037954

### The Gist ...

<Gist gistLink="PatrickHeneise/bbca1a8c4816f92aa3796db41a4a6203" />

### And the Pen

<CodePen codePenId="PNaGbb" />

これらの埋め込みコンポーネントに加えて、独自のJSXコンポーネントを追加することもできます.
メイプルとして、我々は小さな<Gallery> コンポーネント
グリッドでのイメージと表示

これは非常に簡単です

### Component

<Gallery images={['cyprus1.jpeg', 'cyprus2.jpeg', 'cyprus3.jpeg']} caption="This
is a caption" />

それはMarkdownに来る可能性の全く新しい世界を開きます
コンテンツ.

概要とフィードバック

この記事ではMDX 2の基礎を調べ、アップグレードします.我々も学んだ
どのようにrehype/remarkプラグインを追加するには
レンダリング/ビルド時間とどのようにMDXのembedを使用して
サードパーティ製プラットフォームでの経験.あなたは
minimal example blog on GitHub .
私たちはあなたがこの記事を楽しんで、それは次のあなたの旅に役立つでしょう願っています.js
とmdx 2あなたがフィードバック、コメント、この記事についてのアイデアを持っているならば
share them here または
ノットオン.私たちはあなたから聞いてみたい.