React LT会で話したスライドです。MDX めちゃくちゃお勧めなので使いましょう

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