Next.js에서 MDX를 사용해보십시오.

MDX란?

markdown과 jsx를 동시에 쓸 수 있습니다

markdown는 jsx를 import 할 수 있다

MDX는 런타임이없는 빌드로 해결됩니다.

같은 특징이있는 것 같습니다.

예

# Hello, *world*!

Below is an example of JSX embedded in Markdown. <br /> **Try and change
the background color!**

<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
  <h3>This is JSX</h3>
</div>

(MDX는 유석에 구문 강조되지 않습니다 ...)

문서와 블로그를 작성할 때 유용합니다.

Next.js에서 MDX를 사용한 블로그 만들기

htps // mdxjs. 코 m / 곁치 g-s r d / 네 xt 공식대로 설정을 넣으면, 나머지는 pages 이하에 좋아하는 대로 mdx 파일을 작성하면 됩니다. 다음 dev하자.

markdown이 내뿜는 태그 변경

MDX에 작성된 markdown의 구문은 jsx로 변환되지만 변환할 컴포넌트를 설정할 수 있습니다.
htps // mdxjs. 코 m / 갓찐 g-s r d / # mdxp 로즈 r
공식 사이트에서 볼 수 있듯이 MDXProvider를 사용합니다. 이번에는 Next.js이므로 _app.js에 씁니다.
예를 들어 markdown의 코드 블록에 구문 강조 표시를 적용합니다.
htps // mdxjs. 코 m / 구이데 s / sy
(최근에 있었던 next/image 뭔가를 여기에서 사용하면 좋을 것 같네요)

_app.js

import { MDXProvider } from "@mdx-js/react"
import { CodeBlock } from "../components/layouts/CodeBlock"

const mdComponents = {
  code: CodeBlock
}

const MyApp = ({ Component, pageProps }) => {
  return (
    <MDXProvider components={mdComponents}>
      <Component { ...pageProps } />
    </MDXProvider>
  )
}

export default MyApp

이것으로 MDX에 쓴 code block는 신택스 하이라이트가 효과가 있을 것 같네요.

레이아웃을 정의해보기

MDX를 사용하면 특정 페이지에 레이아웃을 적용하는 것이 매우 쉽습니다.
이번에는 예제로 제목 태그를 설정하는 레이아웃을 만듭니다.

components/layout/BaseLayout.jsx

import Head from "next/head"

export const BaseLayout = ({ meta, children }) => (
  <>
    <Head>
      <title>{meta.title}</title>
    </Head>
    { children }
  </>
)

mdx에서 Layout을 적용합니다.

.mdx

import { BaseLayout } from "../components/layouts/BaseLayout"

export const meta = {
  title: "ホーム"
}

# レイアウトを適用したいMDX

export default ({ children }) => (
  <BaseLayout meta={meta}>
    {children}
  </BaseLayout>
)

MDX 내에서 default export할 수 있고, children에는 이 MDX의 JSX가 건너옵니다.

MDX의 구문을 여러 가지 시도해보십시오.

index.mdx

import { Counter } from "../components/Counter"
import AboutContent, { meta as aboutMeta } from "./about.mdx"

# サンプルです

<div>
  { ["hoge", "fuga"].map(word => (
    <p>{word}</p>
  )) }
  # これはh1にならない
</div>

<!-- コメントアウト -->

<div>
  {/* コメントアウト */}
</div>

(qiitaのmarkdownとバッティングするのでいったん回避)
\```tsx
// コードブロックが書ける
type Props = { name: string }
export const Component: FC<Props> = ({ name }) => <>{name}</>
\```

- exportのない変数宣言はできない

export const hoge = "hoge"

- 文章とexportの間に空行がない場合は文章として扱われる
- constであればちゃんとMDX内でも再定義できない
export const hoge = "hoge"

<!--
export あああ
これはexport構文と解釈されてエラーとなる
-->

もちろんコンポーネントも使える
<Counter />

別のMDXをimportすることもできる(jsxなら当たり前ではある)
<AboutContent />
<div>
  title: { aboutMeta.title }
</div>

定義済みの変数があったりする
import MDXContent from "./about.mdx" // MDXContentはjsxで宣言される関数名ぽい

about.mdx

export const meta = {
  title: "about"
}

# aboutページです

vercel에 ↑의 mdx를 배포했으므로 관심이있는 분은 실제로 어떻게 표시되는지 확인해보십시오.
ぇtps://이케아-dぇっ s-mdx-사 mpぇ.ゔ ㄱ l. 아 p/

소감

Next.js + MDX는 문서와 블로그에서 상당히 사용할 수 있지 않을까 생각합니다. 실제로 fs로 괴롭히는 부분이 있거나, 검색 기능을 넣으려고 하면 일근줄에서는 어떠한 것 같다고 생각합니다만...
gatsbyjs와의 비교는 하고 있지 않기 때문에, 어느 쪽이 좋은가는 모릅니다만, vercel도 포함으로 생각하면 이 근처의 에코시스템은 Next.js 강하다고 생각합니다.

여담

htps : //s와 ry 보오 k. js. 오 rg / cs / rea ct / w Richin godo cs / mdx
이전에 시험적으로 도입했지만, storybook도 MDX에 대응하고 있어, 이것이 상당히 컴퍼넌트의 문서를 쓰는데 적합하다고 생각하고 있습니다. 사양과 실제 구성 요소를 동시에 확인할 수 있으며 매우 좋습니다.
게다가 MDX에서도 storyshots로 문서화한 컴포넌트는 누출 없이 snapshot 테스트 대상으로 할 수 있습니다.