MDX with Next.js

Transcript

1. MDX with Next.js MDX を本番環境に導入するまで
 2019/04/24 React LT 会
 


   KAZUHIRO HARA
 @kara_d


2. https://kansock.industries 
 KAZUHIRO HARA 原 一浩 (@kara_d)
 ビッグデータの観測・ビジュアライズ 
 および、複雑な

   UI デザインがメイン領域 


3. もくじ
 1. MDX とは何ですか ?
 2. MDX を使うには ? 


   3. Next.js における導入事例
 4. demo : KANSOCK.INDUSTRIES
 5. MDX に移行する場合ハマりそうなところ
 a. front matter を使う
 b. レイアウトの適用
 c. Syntax highlight の適用
 d. React コンポーネントをどう書く？
 6. MDX は何が変換されるのか ?


4. MDX とは何ですか ?
 • MDX
 ◦ https://mdxjs.com/ 
 ◦ Markdown

   for the component era 
 • Markdown 文書に、JSX をシームレスに記述することができるフォーマット形式
 ◦ 公開されている React コンポーネントや独自コンポーネントを使うことができる 
 ◦ グラフやリッチコンテンツなど可能性は無限 ! 
 • 拡張子は .mdx ( 設定次第で .md 形式でも使える )
 • React やるマンにとっては至福のドキュメント形式
 ◦ React やらないマンでも、コンポーネントを使うだけならそこまで専門的な知識は不要 


5. MDX を使うには ?
 • 公式サイトにて、それぞれのプロダクトへの導入方法が掲載されている
 ◦ Next.js
 ◦ Gatsby
 ◦

   Create React App
 ◦ React static
 ◦ Webpack
 ◦ Parcel
 ◦ X0
 • VS Code のプラグインもあるよ
 ◦ https://marketplace.visualstudio.com/items?itemName=silvenon.mdx 


6. Next.js における導入事例
 https://kansock.industries/ では、Next.js を Siatic Site Generator として使っていて、そ の中で

   MDX による記述を可能にしている
 --- title: "全面的に MDX に移行しました" ... --- import { MdxArticle } from '../../../components/layouts/mdxArticle' export default ({ children }) => <MdxArticle>{children}</MdxArticle> # タイトル MDX 表示テストです

7. demo
 https://kansock.industries/ 


8. MDX に移行する場合ハマりそうなところ
 • Front matter を使う
 • レイアウトの適用
 • Syntax

   highlight の適用
 • React コンポーネントをどう書く？


9. Front matter について
 Front matter は、ページ固有の情報を記載する変数
 
 
 next-mdx-frontmatter が便利


   --- title: "Example Page" ogp_url: "/ogp_url" --- module.exports = withTypescript( withMdxFm( withSass({ ... })));

10. レイアウトについて
 Front matter 的な情報を定義した上で、レイアウトを指定することもできる
 Markdown は子コンポーネントになる
 例えば title や ogp_url

    という変数を使える
 
 
 import { MdxArticle } from '../../../components/layouts/mdxArticle' export default ({ children }) => <MdxArticle title={title} date={date} ogp_url={path} ogp_image={ogpImage} ogp_description={ogpDescription} model={this.props.model}>{children}</MdxArticle>

11. Syntax highlighting について
 Bulma と Prism が相性悪いので、
 highlight.js (rehype-highlight) を使っている

    (next.config.js)
 
 
 const rehypeHighlight = require('rehype-highlight'); const withMDX = require('@next/mdx')() const withMdxFm = require('next-mdx-frontmatter')({ MDXOptions: { hastPlugins: [ rehypeHighlight ] } })

12. MDX で使えるコンポーネント形式
 いろいろなスタイルで書ける ( React パッケージは import 済み )
 


    
 export const TestComponent = function (props) { return (<h1>{props.name} COMPONENT 1</h1>) } export const TestComponent2 = (props) => <h1>{props.name} COMPONENT 2</h1> export class TestComponent3 extends React.Component { render() { return (<h1>{this.props.name} COMPONENT TEST 3</h1>) } }

13. MDX は何が変換されるのか ?
 https://mdxjs.com/advanced/ast によれば、以下が AST の Node Type になっている


    • jsx (instead of html)
 • comment (instead of html comments)
 • import
 • export


14. まとめ
 • MDX を使うと、Markdown に React コンポーネントを書いたり、
 定義したりできる
 • 柔軟なレイアウト、Front

    matter、Syntax highlighting もバッチリ
 • UI スケッチや UI ドキュメントにぜひ！


15. END 
 KAZUHIRO HARA
 @kara_d
 React / React Native /

    React 360 / Next.js / MDX でお困りの方、お気軽にご相談ください
 https://kansock.industries