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
63
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
3
3.7k
JavaScript & TypeScript 用のオールインワンツールキット「Bun」
semigura
0
230
OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する
semigura
2
1.8k
JavaScript パッケージマネージャー pnpm を使ってみる
semigura
0
52
MUIのオススメコンポーネント5選
semigura
0
160
react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する
semigura
0
130
Material-UI から MUI へ 〜Material-UI v4 から v5への移行手引き〜
semigura
0
320
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
140
Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
semigura
0
280
Other Decks in Programming
See All in Programming
sappoRo.R #12 初心者セッション
kosugitti
0
270
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.1k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
510
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
190
Rails アプリ地図考 Flush Cut
makicamel
1
130
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
170
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Become a Pro
speakerdeck
PRO
26
5.2k
Code Review Best Practice
trishagee
67
18k
Docker and Python
trallard
44
3.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Side Projects
sachag
452
42k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Faster Mobile Websites
deanohume
306
31k
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