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
DatoCMS + Next.js でプレビュー機能付きブログを作る
Search
semigura
December 09, 2021
Programming
0
72
DatoCMS + Next.js でプレビュー機能付きブログを作る
2021.12.9 ジャムジャム!!Jamstack_3【初心者歓迎LT大会】
https://twitter.com/semigura
semigura
December 09, 2021
Tweet
Share
More Decks by semigura
See All by semigura
MUI v6, v7 が2024年にリリースされるので新機能を調べてみた
semigura
4
4.8k
JavaScript & TypeScript 用のオールインワンツールキット「Bun」
semigura
0
260
OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する
semigura
2
2k
JavaScript パッケージマネージャー pnpm を使ってみる
semigura
0
63
MUIのオススメコンポーネント5選
semigura
0
220
react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する
semigura
0
160
Material-UI から MUI へ 〜Material-UI v4 から v5への移行手引き〜
semigura
0
380
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
170
Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
semigura
0
360
Other Decks in Programming
See All in Programming
Langfuseと歩む生成AI活用推進
licux
3
250
パスタの技術
yusukebe
1
390
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
240
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Understanding Ruby Grammar Through Conflicts
yui_knk
1
110
The State of Fluid (2025)
s2b
0
170
Flutterと Vibe Coding で個人開発!
hyshu
1
250
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
620
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
110
State of CSS 2025
benjaminkott
1
110
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
140
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
480
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Language of Interfaces
destraynor
160
25k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
KATA
mclloyd
32
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Producing Creativity
orderedlist
PRO
347
40k
The Invisible Side of Design
smashingmag
301
51k
Balancing Empowerment & Direction
lara
2
570
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
GitHub's CSS Performance
jonrohan
1031
460k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Transcript
DatoCMS + Next.js Ͱ ϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ ੴ֞ଠ @semigura 2021.12.9 δϟϜδϟϜʂʂJamstack_3ʲॳ৺ऀܴLTେձʳ
ੴ֞ɹଠ twitter: @semigura • גࣜձࣾGaji-Laboʹ2018͔Βॴଐ • React, TypeScript, Next.js
ΛۀͰѻ͍ͬͯ·͢ • Netlify CMS + GatsbyJS ߏͷ ίʔϙϨʔταΠτͷ࣮पΓ୲ • Headless CMSΛ৮Δͷ͕झຯ • ೣͱԻָ͕͖ DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
ࠓճͷςʔϚͱͬͨ͜ͱ 1. DatoCMS ͷཧը໘͔Β Next.js ͷϒϩάςϯϓϨʔτΛબ͠ αΠτΛ deploy 2.
࡞͞Εͨ Repository Λ clone ͠ɺ Next.js ଆͰϓϨϏϡʔػೳΛ࣮ 3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛՃ DatoCMS + Next.js Ͱ ϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
ࠓճ৮ͬͯΈͨߏͷ͝հ DatoCMS • API ϕʔε (GraphQL) ͷ Headless CMS •
ཧը໘͔Β๛ͳαϯϓϧϓϩδΣΫτΛબͰ͖ɺσϓϩΠ·Ͱ Ͱ͖Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
ࠓճ৮ͬͯΈͨߏͷ͝հ Next.js • ReactΛϕʔεʹͨ͠ϑϩϯτΤϯυϑϨʔϜϫʔΫ • CSR/SSR/SSG/ISRͳͲɺϖʔδ͝ͱʹదͳϨϯμϦϯάํ๏Λબ ͢Δ͜ͱ͕Ͱ͖Δ • ࠓճDatoCMSͱ࿈ܞ͠ɺSSGͱͯ͠੩తϖʔδΛϏϧυ͢Δ DatoCMS
+ Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
1. DatoCMS ͷઃఆը໘͔Β Next.js ͷϒϩάςϯϓϨʔτΛબ͠αΠτΛ deploy GitHub Repository: https://github.com/datocms/nextjs-demo/tree/master DatoCMS
+ Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
ςϯϓϨʔτΛબˠCreate project ͚ͩͰαΠτΛσϓϩΠͰ͖Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ 1. DatoCMS ͷઃఆը໘͔Β
Next.js ͷϒϩάςϯϓϨʔτΛબ͠αΠτΛ deploy
2. ࡞͞Εͨ Repository Λ clone ͠ɺNext.js ଆͰϓϨϏϡʔػೳΛ࣮ DatoCMS + Next.js
ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
γʔΫϨοττʔΫϯΛ௨ͯ͠ ϓϨϏϡʔڥͷURLʹ ΞΫηεͨ͠ࡍʹɺ Next.jsͷػೳͷҰͭͰ͋Δ ϓϨϏϡʔϞʔυΛ༗ޮʹ͢Δ pages/api/preview.js // ϓϨϏϡʔAPI ϧʔτΛ࡞͢Δ export
default async (req, res) => { // ϓϨϏϡʔڥʹΞΫηε͢ΔͨΊͷγʔΫϨοττʔΫϯ // APIͱCMS͚͕͍ͩͬͯΔඞཁ͕͋Δ const secret = process.env.NEXT_CMS_DATOCMS_PREVIEW_SECRET; // γʔΫϨοττʔΫϯ͕ؒҧ͍ͬͯΔͳΒ Invalid token Λฦ͢ if (secret && req.query.secret !== secret) { return res.status(401).json({ message: "Invalid token" }); } // ϒϥβʹϓϨϏϡʔϞʔυ༻ͷ Cookie Λઃఆ͢Δ // `res.setPreviewData` Λ͏͜ͱͰϓϨϏϡʔϞʔυʹઃఆͰ͖Δ res.setPreviewData({}); // ϓϨϏϡʔϞʔυ͕༗ޮͷঢ়ଶͰϧʔτʹભҠ͢Δ res.writeHead(307, { Location: "/" }); res.end(); }; DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ 2. ࡞͞Εͨ Repository Λ clone ͠ɺNext.js ଆͰϓϨϏϡʔػೳΛ࣮
ϓϨϏϡʔϞʔυͷ Cookie ͕ઃఆ ͞Ε͍ͯΔ getStaticProps ΛؚΉ ϖʔδΛϦΫΤετ͢Δ ͱɺ getStaticProps ͕(Ϗϧυ࣌Ͱ
ͳ͘)ϦΫΤετ࣌ʹݺͼग़͞ΕΔɻ context.preview context.previewData ʹج͍ͮͯҟͳ ΔσʔλΛऔಘ͢ΔΑ͏ʹ getStaticProps Λߋ৽͢Δ͜ͱ͕Ͱ ͖Δɻ pages/posts/[slug].js export async function getStaticProps(context) { // ϓϨϏϡʔϞʔυͰϖʔδʹΞΫηεͨ͠߹ɺcontext.preview true ʹͳΔ // context.preview͕trueͷ߹ɺ"/preview" ΛAPIΤϯυϙΠϯτʹՃ ͢Δ // ެ։͞ΕͨσʔλͷΘΓʹԼॻ͖σʔλΛϦΫΤετ͢Δ let endpoint = "https://graphql.datocms.com"; if (preview) { endpoint += `/preview`; } } DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ 2. ࡞͞Εͨ Repository Λ clone ͠ɺNext.js ଆͰϓϨϏϡʔػೳΛ࣮
ʹΞΫηε͢Δ͜ͱͰϓϨϏϡʔϞʔυΛonʹͯ͠Լॻ͖Λ֬ೝͰ͖Δ https://<your-site>/api/preview?secret=<token>&slug=<path> DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ 2. ࡞͞Εͨ Repository Λ
clone ͠ɺNext.js ଆͰϓϨϏϡʔػೳΛ࣮
3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛՃ • ϓϨϏϡʔURLΛखಈͰୟ͖ͨ͘ͳ͍ • CMS্ͰϓϨϏϡʔ͕֬ೝͰ͖ΔΑ͏ʹͳ͍͍ͬͯͨ ͷͰ… Next.js Preview
Links ΛՃ https://www.datocms.com/marketplace/plugins/i/datocms-plugin- nextjs-preview DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛՃ • αΠτURL • ઃఆͨ͠γʔΫϨοττʔΫϯ Λઃఆ͢Δ͜ͱͰϓϨϏϡʔϘλϯ͕CMSͷߘը໘͔Β֬ೝՄೳʹ ͳΔ DatoCMS
+ Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛՃ DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
ײ • DatoCMS Headless CMS Λબఆ͢Δ࣌ͷީิʹͳΓ͏Δ • ϝϦοτɿςϯϓϨʔτ͔ΒσϓϩΠ͕؆୯ʹͰ͖Δ •
σϝϦοτɿຊޠͷใ͕͋·Γͳ͍ • Next.js ʹϓϨϏϡʔػೳ͕ϏϧτΠϯͰೖ͍ͬͯΔͷ͕ศར • Next.js ͕SSGͱͯ͑͠Δͷ͕͏Ε͍͠ • ϓϨϏϡʔػೳ࣮υΩϡϝϯτΛ͋ͨΕͦΕ΄Ͳ͘͠ͳ͍ DatoCMS + Next.js ͰϓϨϏϡʔػೳ͖ϒϩάΛ࡞Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
גࣜձࣾGaji-LaboͰݱࡏϑϩϯτΤϯυΤϯδχΞΛืू͍ͯ͠·͢ʂʂ React, TypeScript, Next.js ɺϞμϯͳϑϩϯτΤϯυٕज़Ͱࣄۀձࣾʹߩݙͯ͠Έ͍ͨํɺΧ δϡΞϧʹҰ͓ͯ͠Έ·ͤΜ͔ʁ Website: https://www.gaji.jp/ Twitter: @gaji_labo
Wantedly: https://www.wantedly.com/companies/gaji