Successfully reported this slideshow.
Your SlideShare is downloading. ×

MDX and Next.js

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
MDX with Next.js
MDX with Next.js
Loading in …3
×

Check these out next

1 of 14 Ad
Advertisement

More Related Content

More from Kazuhiro Hara (20)

Advertisement

Recently uploaded (20)

MDX and Next.js

  1. 1. MDX and Next.js 新進気鋭のドキュメントフォーマット MDX をためす 2019/03/29 Okachi.js vol.24 Freeman KAZUHIRO HARA @kara_d
  2. 2. MDX https://mdxjs.com/
  3. 3. もくじ 1. MDX とは何ですか ? 2. MDX を使うには ? 3. Next.js における導入事例 4. demo : サンプルアプリケーション 5. レイアウトについて 6. Frontmatter について 7. MDX のメリットについて考えてみる 8. 現状の課題
  4. 4. MDX とは何ですか ? ● 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 による記述を可能にしている import { MdxDefault } from '../../components/layouts/mdxDefault' export const title = 'Example Page' export const ogp_url = '/ogp_url' export default ({ children }) => <MdxDefault title={title} ogp_url={ogp_url} >{children}</MdxDefault> # タイトル MDX 表示テストです
  7. 7. demo : サンプルアプリケーション
  8. 8. Frontmatter について Frontmatter は、ページ固有の情報を記載する変数 いくつか方法があるが、てっとりばやいのは export しちゃうこと 他にも、frontmatter を使うサンプルなどが GitHub で散見される --- title: "Example Page" ogp_url: "/ogp_url" --- export const title = 'Example Page' export const ogp_url = '/ogp_url'
  9. 9. レイアウトについて frontmatter 的な情報を定義した上で、レイアウトを指定することもできる mdx-blocks ( https://github.com/jxnblk/mdx-blocks ) を使うと、もう少し簡略化できる export default ({ children }) => <MdxDefault title={title} ogp_url={ogp_url} >{children}</MdxDefault>
  10. 10. MDX は何が変換されるのか ? https://mdxjs.com/advanced/ast によれば、以下が AST の Node Type になっている ● jsx (instead of html) ● comment (instead of html comments) ● import ● export
  11. 11. 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>) } }
  12. 12. 現状の課題 ● MDX で作られたページの一覧ページを作るためのプロダクトがない ○ GitHub にはサンプルコードなどを見つけることはできる ● MDX で作られたページの frontmatter をうまく処理する方法が煩雑 ○ こちらも GitHub 上で確認できる ● MDX とレイアウトの整合性が弱い ○ わざわざ HTML で書いていたページとかは楽できるかも
  13. 13. END Freeman KAZUHIRO HARA @kara_d

×