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
53
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
2
1.8k
JavaScript & TypeScript 用のオールインワンツールキット「Bun」
semigura
0
180
OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する
semigura
2
1.6k
JavaScript パッケージマネージャー pnpm を使ってみる
semigura
0
36
MUIのオススメコンポーネント5選
semigura
0
110
react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する
semigura
0
98
Material-UI から MUI へ 〜Material-UI v4 から v5への移行手引き〜
semigura
0
210
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
100
Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
semigura
0
200
Other Decks in Programming
See All in Programming
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
370
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
120
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.5k
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
180
健康第一!MetricKitで始めるアプリの健康診断 / App Health Checkups Starting with MetricKit
nekowen
4
790
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
340
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
590
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
940
プログラマのための音楽入門
cheebow
4
540
めざせ!WKWebViewマスター! / WKWebView Master
marcy731
3
480
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
390
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
380
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Design by the Numbers
sachag
277
19k
Embracing the Ebb and Flow
colly
83
4.4k
Debugging Ruby Performance
tmm1
72
12k
A Philosophy of Restraint
colly
202
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
34
1.9k
A Modern Web Designer's Workflow
chriscoyier
690
190k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
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