Slide 1
Slide 1 text
MDX with Next.js
MDX を本番環境に導入するまで
2019/04/24 React LT 会
KAZUHIRO HARA
@kara_d
Slide 2
Slide 2 text
https://kansock.industries
KAZUHIRO HARA 原 一浩 (@kara_d)
ビッグデータの観測・ビジュアライズ
および、複雑な UI デザインがメイン領域
Slide 3
Slide 3 text
もくじ
1. MDX とは何ですか ?
2. MDX を使うには ?
3. Next.js における導入事例
4. demo : KANSOCK.INDUSTRIES
5. MDX に移行する場合ハマりそうなところ
a. front matter を使う
b. レイアウトの適用
c. Syntax highlight の適用
d. React コンポーネントをどう書く？
6. MDX は何が変換されるのか ?
Slide 4
Slide 4 text
MDX とは何ですか ?
● MDX
○ https://mdxjs.com/
○ Markdown for the component era
● Markdown 文書に、JSX をシームレスに記述することができるフォーマット形式
○ 公開されている React コンポーネントや独自コンポーネントを使うことができる
○ グラフやリッチコンテンツなど可能性は無限 !
● 拡張子は .mdx ( 設定次第で .md 形式でも使える )
● React やるマンにとっては至福のドキュメント形式
○ React やらないマンでも、コンポーネントを使うだけならそこまで専門的な知識は不要
Slide 5
Slide 5 text
MDX を使うには ?
● 公式サイトにて、それぞれのプロダクトへの導入方法が掲載されている
○ Next.js
○ Gatsby
○ Create React App
○ React static
○ Webpack
○ Parcel
○ X0
● VS Code のプラグインもあるよ
○ https://marketplace.visualstudio.com/items?itemName=silvenon.mdx
Slide 6
Slide 6 text
Next.js における導入事例
https://kansock.industries/ では、Next.js を Siatic Site Generator として使っていて、そ
の中で MDX による記述を可能にしている
---
title: "全面的に MDX に移行しました"
...
---
import { MdxArticle } from '../../../components/layouts/mdxArticle'
export default ({ children }) => {children}
# タイトル
MDX 表示テストです
Slide 7
Slide 7 text
demo
https://kansock.industries/
Slide 8
Slide 8 text
MDX に移行する場合ハマりそうなところ
● Front matter を使う
● レイアウトの適用
● Syntax highlight の適用
● React コンポーネントをどう書く？
Slide 9
Slide 9 text
Front matter について
Front matter は、ページ固有の情報を記載する変数
next-mdx-frontmatter が便利
---
title: "Example Page"
ogp_url: "/ogp_url"
---
module.exports = withTypescript(
withMdxFm(
withSass({
...
})));
Slide 10
Slide 10 text
レイアウトについて
Front matter 的な情報を定義した上で、レイアウトを指定することもできる
Markdown は子コンポーネントになる
例えば title や ogp_url という変数を使える
import { MdxArticle } from '../../../components/layouts/mdxArticle'
export default ({ children }) => {children}
Slide 11
Slide 11 text
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
]
}
})
Slide 12
Slide 12 text
MDX で使えるコンポーネント形式
いろいろなスタイルで書ける ( React パッケージは import 済み )
export const TestComponent = function (props) {
return (
{props.name} COMPONENT 1
) } export const TestComponent2 = (props) =>{props.name} COMPONENT 2
export class TestComponent3 extends React.Component { render() { return ({this.props.name} COMPONENT TEST 3
) } }Slide 13
Slide 13 text
MDX は何が変換されるのか ?
https://mdxjs.com/advanced/ast によれば、以下が AST の Node Type になっている
● jsx (instead of html)
● comment (instead of html comments)
● import
● export
Slide 14
Slide 14 text
まとめ
● MDX を使うと、Markdown に React コンポーネントを書いたり、
定義したりできる
● 柔軟なレイアウト、Front matter、Syntax highlighting もバッチリ
● UI スケッチや UI ドキュメントにぜひ！
Slide 15
Slide 15 text
END
KAZUHIRO HARA
@kara_d
React / React Native / React 360 / Next.js / MDX でお困りの方、お気軽にご相談ください
https://kansock.industries