Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MDX with Next.js
Search
kazuhiro hara
April 24, 2019
Programming
1
400
MDX with Next.js
新進気鋭のドキュメントフォーマット MDX をためす
kazuhiro hara
April 24, 2019
Tweet
Share
More Decks by kazuhiro hara
See All by kazuhiro hara
Vapor を使って VisionPro とWebSocket 通信をしてみる
karad
0
190
slow types ってなんだろう?
karad
1
670
ほぼ日のハッカソン Team 1 発表資料
karad
0
400
Dist.43.英語仕事で地味につかうChatGPT 配布版
karad
0
740
VisionOS 向けアプリをつくってみる - よりひろいフロントエンド
karad
0
140
スマートコントラクト入門
karad
0
120
Servo Embed 入門
karad
1
1.1k
PWA checklist app
karad
0
310
Design Trends of Japanese Local Government Websites
karad
0
190
Other Decks in Programming
See All in Programming
Porting a visionOS App to Android XR
akkeylab
0
670
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
230
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
290
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
340
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
460
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.6k
What's new in AppKit on macOS 26
1024jp
0
150
NPOでのDevinの活用
codeforeveryone
0
900
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
610
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
740
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
KATA
mclloyd
30
14k
Practical Orchestrator
shlominoach
189
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Code Reviewing Like a Champion
maltzj
524
40k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
MDX with Next.js MDX を本番環境に導入するまで 2019/04/24 React LT 会
KAZUHIRO HARA @kara_d
https://kansock.industries KAZUHIRO HARA 原 一浩 (@kara_d) ビッグデータの観測・ビジュアライズ および、複雑な
UI デザインがメイン領域
もくじ 1. MDX とは何ですか ? 2. MDX を使うには ?
3. Next.js における導入事例 4. demo : KANSOCK.INDUSTRIES 5. MDX に移行する場合ハマりそうなところ a. front matter を使う b. レイアウトの適用 c. Syntax highlight の適用 d. React コンポーネントをどう書く? 6. MDX は何が変換されるのか ?
MDX とは何ですか ? • MDX ◦ https://mdxjs.com/ ◦ 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 による記述を可能にしている --- title: "全面的に MDX に移行しました" ... --- import { MdxArticle } from '../../../components/layouts/mdxArticle' export default ({ children }) => <MdxArticle>{children}</MdxArticle> # タイトル MDX 表示テストです
demo https://kansock.industries/
MDX に移行する場合ハマりそうなところ • Front matter を使う • レイアウトの適用 • Syntax
highlight の適用 • React コンポーネントをどう書く?
Front matter について Front matter は、ページ固有の情報を記載する変数 next-mdx-frontmatter が便利
--- title: "Example Page" ogp_url: "/ogp_url" --- module.exports = withTypescript( withMdxFm( withSass({ ... })));
レイアウトについて 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>
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 ] } })
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 は何が変換されるのか ? https://mdxjs.com/advanced/ast によれば、以下が AST の Node Type になっている
• jsx (instead of html) • comment (instead of html comments) • import • export
まとめ • MDX を使うと、Markdown に React コンポーネントを書いたり、 定義したりできる • 柔軟なレイアウト、Front
matter、Syntax highlighting もバッチリ • UI スケッチや UI ドキュメントにぜひ!
END KAZUHIRO HARA @kara_d React / React Native /
React 360 / Next.js / MDX でお困りの方、お気軽にご相談ください https://kansock.industries