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 and Next.js

新進気鋭のドキュメントフォーマット MDX をためす

  • Login to see the comments

  • Be the first to like this

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

×