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
230
slow types ってなんだろう?
karad
1
700
ほぼ日のハッカソン Team 1 発表資料
karad
0
430
Dist.43.英語仕事で地味につかうChatGPT 配布版
karad
0
750
VisionOS 向けアプリをつくってみる - よりひろいフロントエンド
karad
0
150
スマートコントラクト入門
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
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
CSC305 Lecture 02
javiergs
PRO
1
260
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
490
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
680
XP, Testing and ninja testing ZOZ5
m_seki
3
320
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
CSC509 Lecture 05
javiergs
PRO
0
300
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Visualization
eitanlees
148
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GitHub's CSS Performance
jonrohan
1032
460k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Practical Orchestrator
shlominoach
190
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
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