gatsby md(remark) 에서 mdx 컨버팅하기

MDX?

MDX = Markdown + JSX

왜 MDX?

gatsby 에서는 포스트 작성시 md 보다는 mdx 를 사용하면 더 좋다(?).

• mdx 에서는 컴포넌트 사용이 가능

• 기존 remark plugin들도 사용할수 있음

컨버팅하자

어떻게??

기존 markdown을 mdx 로 바꾸자!

allMarkdownRemark -> allMdx

markdownRemark ->mdx

// blog-post-template.js
import { MDXRenderer } from "gatsby-plugin-mdx" //highlight-line

html -> body 

<section dangerouslySetInnerHTML={{ __html: post.html }} />
-> <MDXRenderer>{post.body}</MDXRenderer> 

install & uninstall

npm install --save gatsby-plugin-mdx gatsby-plugin-feed-mdx @mdx-js/mdx @mdx-js/react

npm uninstall --save gatsby-transformer-remark gatsby-plugin-feed

gatsby-config.js

{
-  resolve: `gatsby-transformer-remark`,
+  resolve: `gatsby-plugin-mdx`, #highlight-line
   options: {
+    extensions: [`.mdx`, `.md`], #highlight-line
-    plugins: [
+    gatsbyRemarkPlugins: [ #highlight-line
       {
         resolve: `gatsby-remark-images`,
         options: {
           maxWidth: 590,
         },
       },
       {
         resolve: `gatsby-remark-responsive-iframe`,
         options: {
           wrapperStyle: `margin-bottom: 1.0725rem`,
         },
       },
       `gatsby-remark-prismjs`,
       `gatsby-remark-copy-linked-files`,
       `gatsby-remark-smartypants`,
     ],
   },
  },

gatsby-node.js

- allMarkdownRemark(
+ allMdx( //highlight-line

- const posts = result.data.allMarkdownRemark.edges
+ const posts = result.data.allMdx.edges //highlight-line

- if (node.internal.type === `MarkdownRemark`) {
+ if (node.internal.type === `Mdx`) { //highlight-line

index.js

- const posts = data.allMarkdownRemark.edges
+ const posts = data.allMdx.edges //highlight-line

- allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+ allMdx(sort: { fields: [frontmatter___date], order: DESC }) { //highlight-line

blogTemplate

- const post = this.props.data.markdownRemark
+ const post = this.props.data.mdx  //highlight-line

# line 93
- markdownRemark(fields: { slug: { eq: $slug } }) {
+ mdx(fields: { slug: { eq: $slug } }) { //highlight-line

+ import { MDXRenderer } from "gatsby-plugin-mdx" //highlight-line

- html
+ body //highlight-line

- <section dangerouslySetInnerHTML={{ __html: post.html }} />
+ <MDXRenderer>{post.body}</MDXRenderer> //highlight-line

참고

• mdxjs

• gatsbyjs mdx

• How to convert an existing Gatsby blog to use MDX