Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MDX with Next.js

388 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

MDX with Next.js

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

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

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

  5. 5. MDX を使うには ?
 ● 公式サイトにて、それぞれのプロダクトへの導入方法が掲載されている
 ○ Next.js
 ○ Gatsby
 ○ Create React App
 ○ React static
 ○ Webpack
 ○ Parcel
 ○ X0
 ● VS Code のプラグインもあるよ
 ○ https://marketplace.visualstudio.com/items?itemName=silvenon.mdx 

  6. 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. 7. demo
 https://kansock.industries/ 

  8. 8. MDX に移行する場合ハマりそうなところ
 ● Front matter を使う
 ● レイアウトの適用
 ● Syntax highlight の適用
 ● React コンポーネントをどう書く?

  9. 9. Front matter について
 Front matter は、ページ固有の情報を記載する変数
 
 
 next-mdx-frontmatter が便利
 --- title: "Example Page" ogp_url: "/ogp_url" --- module.exports = withTypescript( withMdxFm( withSass({ ... })));
  10. 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. 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. 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. 13. MDX は何が変換されるのか ?
 https://mdxjs.com/advanced/ast によれば、以下が AST の Node Type になっている
 ● jsx (instead of html)
 ● comment (instead of html comments)
 ● import
 ● export

  14. 14. まとめ
 ● MDX を使うと、Markdown に React コンポーネントを書いたり、
 定義したりできる
 ● 柔軟なレイアウト、Front matter、Syntax highlighting もバッチリ
 ● UI スケッチや UI ドキュメントにぜひ!

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


×