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.8k
JavaScript & TypeScript 用のオールインワンツールキット「Bun」
semigura
0
230
OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する
semigura
2
1.8k
JavaScript パッケージマネージャー pnpm を使ってみる
semigura
0
54
MUIのオススメコンポーネント5選
semigura
0
170
react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する
semigura
0
130
Material-UI から MUI へ 〜Material-UI v4 から v5への移行手引き〜
semigura
0
320
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
150
Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
semigura
0
280
Other Decks in Programming
See All in Programming
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
390
楽しく向き合う例外対応
okutsu
0
700
CloudNativePGを布教したい
nnaka2992
0
120
color-scheme: light dark; を完全に理解する
uhyo
7
490
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
160
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.7k
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
710
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
270
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
160
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.5k
A Philosophy of Restraint
colly
203
16k
Thoughts on Productivity
jonyablonski
69
4.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Adaptive Systems
keathley
40
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Writing Fast Ruby
sferik
628
61k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Faster Mobile Websites
deanohume
306
31k
Optimizing for Happiness
mojombo
376
70k
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