SlideShare a Scribd company logo
1 of 14
Download to read offline
MDX and Next.js
新進気鋭のドキュメントフォーマット MDX をためす
2019/03/29 Okachi.js vol.24
Freeman
KAZUHIRO HARA
@kara_d
MDX
https://mdxjs.com/
もくじ
1. MDX とは何ですか ?
2. MDX を使うには ?
3. Next.js における導入事例
4. demo : サンプルアプリケーション
5. レイアウトについて
6. Frontmatter について
7. MDX のメリットについて考えてみる
8. 現状の課題
MDX とは何ですか ?
● Markdown for the component era
● Markdown 文書に、JSX をシームレスに記述することができるフォーマット形式
○ 公開されている React コンポーネントや独自コンポーネントを使うことができる
○ グラフやリッチコンテンツなど可能性は無限 !
● 拡張子は .mdx ( 設定次第で .md 形式でも使える )
● React やるマンにとっては至福のドキュメント形式
○ React やらないマンでも、コンポーネントを使うだけならそこまで専門的な知識は不要
MDX を使うには ?
● 公式サイトにて、それぞれのプロダクトへの導入方法が掲載されている
○ Next.js
○ Gatsby
○ Create React App
○ React static
○ Webpack
○ Parcel
○ X0
● VS Code のプラグインもあるよ
○ https://marketplace.visualstudio.com/items?itemName=silvenon.mdx
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 表示テストです
demo : サンプルアプリケーション
Frontmatter について
Frontmatter は、ページ固有の情報を記載する変数
いくつか方法があるが、てっとりばやいのは export しちゃうこと
他にも、frontmatter を使うサンプルなどが GitHub で散見される
---
title: "Example Page"
ogp_url: "/ogp_url"
---
export const title = 'Example Page'
export const ogp_url = '/ogp_url'
レイアウトについて
frontmatter 的な情報を定義した上で、レイアウトを指定することもできる
mdx-blocks ( https://github.com/jxnblk/mdx-blocks ) を使うと、もう少し簡略化できる
export default ({ children }) => <MdxDefault title={title}
ogp_url={ogp_url} >{children}</MdxDefault>
MDX は何が変換されるのか ?
https://mdxjs.com/advanced/ast によれば、以下が AST の Node Type になっている
● jsx (instead of html)
● comment (instead of html comments)
● import
● export
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>)
}
}
現状の課題
● MDX で作られたページの一覧ページを作るためのプロダクトがない
○ GitHub にはサンプルコードなどを見つけることはできる
● MDX で作られたページの frontmatter をうまく処理する方法が煩雑
○ こちらも GitHub 上で確認できる
● MDX とレイアウトの整合性が弱い
○ わざわざ HTML で書いていたページとかは楽できるかも
END
Freeman
KAZUHIRO HARA
@kara_d

More Related Content

Similar to MDX and Next.js

Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)NTT DATA Technology & Innovation
 
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅schoowebcampus
 
Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門Naoki Kanazawa
 
20151029 ヒカラボ講演資料
20151029 ヒカラボ講演資料20151029 ヒカラボ講演資料
20151029 ヒカラボ講演資料Daisuke Ando
 
株式会社waja 安藤様 登壇資料
株式会社waja 安藤様 登壇資料株式会社waja 安藤様 登壇資料
株式会社waja 安藤様 登壇資料leverages_event
 
マトリックス型モデルによるテキストエディターと作文過程の可視化
マトリックス型モデルによるテキストエディターと作文過程の可視化マトリックス型モデルによるテキストエディターと作文過程の可視化
マトリックス型モデルによるテキストエディターと作文過程の可視化yamahige
 

Similar to MDX and Next.js (6)

Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
 
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
 
Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門
 
20151029 ヒカラボ講演資料
20151029 ヒカラボ講演資料20151029 ヒカラボ講演資料
20151029 ヒカラボ講演資料
 
株式会社waja 安藤様 登壇資料
株式会社waja 安藤様 登壇資料株式会社waja 安藤様 登壇資料
株式会社waja 安藤様 登壇資料
 
マトリックス型モデルによるテキストエディターと作文過程の可視化
マトリックス型モデルによるテキストエディターと作文過程の可視化マトリックス型モデルによるテキストエディターと作文過程の可視化
マトリックス型モデルによるテキストエディターと作文過程の可視化
 

More from Kazuhiro Hara

About Plone Conference Tokyo 2018 Frontend Day
About Plone Conference Tokyo 2018 Frontend DayAbout Plone Conference Tokyo 2018 Frontend Day
About Plone Conference Tokyo 2018 Frontend DayKazuhiro Hara
 
Gatsby & React Static
Gatsby & React StaticGatsby & React Static
Gatsby & React StaticKazuhiro Hara
 
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話Kazuhiro Hara
 
Clojure.tokyo.descjop
Clojure.tokyo.descjopClojure.tokyo.descjop
Clojure.tokyo.descjopKazuhiro Hara
 
SwaggerとAPIのデザイン
SwaggerとAPIのデザインSwaggerとAPIのデザイン
SwaggerとAPIのデザインKazuhiro Hara
 
React VR ことはじめ
React VR ことはじめReact VR ことはじめ
React VR ことはじめKazuhiro Hara
 
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようReact系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようKazuhiro Hara
 
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状についてClojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状についてKazuhiro Hara
 
Re-frame and A-Frame
Re-frame and A-FrameRe-frame and A-Frame
Re-frame and A-FrameKazuhiro Hara
 
ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介Kazuhiro Hara
 
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境についてKazuhiro Hara
 
Cryogenでサイトつくろーじぇん
CryogenでサイトつくろーじぇんCryogenでサイトつくろーじぇん
CryogenでサイトつくろーじぇんKazuhiro Hara
 
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうKazuhiro Hara
 
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 JavaWebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 JavaKazuhiro Hara
 
第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会Kazuhiro Hara
 
-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会Kazuhiro Hara
 
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードPlay framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードKazuhiro Hara
 
sbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころsbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころKazuhiro Hara
 
Playbay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイPlaybay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイKazuhiro Hara
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションKazuhiro Hara
 

More from Kazuhiro Hara (20)

About Plone Conference Tokyo 2018 Frontend Day
About Plone Conference Tokyo 2018 Frontend DayAbout Plone Conference Tokyo 2018 Frontend Day
About Plone Conference Tokyo 2018 Frontend Day
 
Gatsby & React Static
Gatsby & React StaticGatsby & React Static
Gatsby & React Static
 
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
 
Clojure.tokyo.descjop
Clojure.tokyo.descjopClojure.tokyo.descjop
Clojure.tokyo.descjop
 
SwaggerとAPIのデザイン
SwaggerとAPIのデザインSwaggerとAPIのデザイン
SwaggerとAPIのデザイン
 
React VR ことはじめ
React VR ことはじめReact VR ことはじめ
React VR ことはじめ
 
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えようReact系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
 
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状についてClojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
 
Re-frame and A-Frame
Re-frame and A-FrameRe-frame and A-Frame
Re-frame and A-Frame
 
ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介ひとりアドベントカレンダーのご紹介
ひとりアドベントカレンダーのご紹介
 
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
 
Cryogenでサイトつくろーじぇん
CryogenでサイトつくろーじぇんCryogenでサイトつくろーじぇん
Cryogenでサイトつくろーじぇん
 
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろう
 
WebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 JavaWebSocket+Akka(Remote)+Play 2.1 Java
WebSocket+Akka(Remote)+Play 2.1 Java
 
第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会第2回 -Play部屋- Play 2.0はじめて&もくもく会
第2回 -Play部屋- Play 2.0はじめて&もくもく会
 
-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会-Play部屋- Play 2.0はじめて&もくもく会
-Play部屋- Play 2.0はじめて&もくもく会
 
Play framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレードPlay framework 2.0のおすすめと1.2からのアップグレード
Play framework 2.0のおすすめと1.2からのアップグレード
 
sbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころsbtマルチプロジェクトビルドの使いどころ
sbtマルチプロジェクトビルドの使いどころ
 
Playbay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイPlaybay Play 2.0 plugin イロハのイ
Playbay Play 2.0 plugin イロハのイ
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
 

MDX and Next.js