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
370
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
170
Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
semigura
0
350
Other Decks in Programming
See All in Programming
Comparing decimals in Swift Testing
417_72ki
0
140
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
290
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
760
AI Ramen Fight
yusukebe
0
120
GPUを計算資源として使おう!
primenumber
1
300
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
380
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
390
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
310
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
10k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
680
Reactの歴史を振り返る
tutinoko
1
150
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Scaling GitHub
holman
461
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fireside Chat
paigeccino
37
3.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Building an army of robots
kneath
306
45k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Writing Fast Ruby
sferik
628
62k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
770
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