DatoCMS + Next.js でプレビュー機能付きブログを作る

2021.12.9 ジャムジャム！！Jamstack_3【初心者歓迎LT大会】
https://twitter.com/semigura

Transcript

1. DatoCMS + Next.js Ͱ ϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ ੴ֞঵ଠ࿠ @semigura 2021.12.9 δϟϜδϟϜʂʂJamstack_3ʲॳ৺ऀ׻ܴLTେձʳ
2. ੴ֞ɹ঵ଠ࿠ 
 twitter: @semigura • גࣜձࣾGaji-Laboʹ2018೥͔Βॴଐ • React, TypeScript, Next.js Λۀ຿Ͱѻ͍ͬͯ·͢ • Netlify CMS + GatsbyJS ߏ੒ͷ 
 ίʔϙϨʔταΠτͷ࣮૷पΓ΋୲౰ • Headless CMSΛ৮Δͷ͕झຯ • ೣͱԻָ͕޷͖ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
3. ࠓճͷςʔϚͱ΍ͬͨ͜ͱ 1. DatoCMS ͷ؅ཧը໘͔Β Next.js ͷϒϩάςϯϓϨʔτΛબ୒͠ 
 αΠτΛ deploy 2. ࡞੒͞Εͨ Repository Λ clone ͠ɺ 
 Next.js ଆͰϓϨϏϡʔػೳΛ࣮૷ 3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛ௥Ճ DatoCMS + Next.js Ͱ ϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
4. ࠓճ৮ͬͯΈͨߏ੒ͷ͝঺հ DatoCMS • API ϕʔε (GraphQL) ͷ Headless CMS • ؅ཧը໘͔Β๛෋ͳαϯϓϧϓϩδΣΫτΛબ୒Ͱ͖ɺσϓϩΠ·Ͱ Ͱ͖Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
5. ࠓճ৮ͬͯΈͨߏ੒ͷ͝঺հ Next.js • ReactΛϕʔεʹͨ͠ϑϩϯτΤϯυϑϨʔϜϫʔΫ • CSR/SSR/SSG/ISRͳͲɺϖʔδ͝ͱʹద੾ͳϨϯμϦϯάํ๏Λબ୒ ͢Δ͜ͱ͕Ͱ͖Δ • ࠓճ͸DatoCMSͱ࿈ܞ͠ɺSSGͱͯ͠੩తϖʔδΛϏϧυ͢Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
6. 1. DatoCMS ͷઃఆը໘͔Β Next.js ͷϒϩάςϯϓϨʔτΛબ୒͠αΠτΛ deploy GitHub Repository: https://github.com/datocms/nextjs-demo/tree/master DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
7. ςϯϓϨʔτΛબ୒ˠCreate project ͚ͩͰαΠτΛσϓϩΠͰ͖Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ 1. DatoCMS ͷઃఆը໘͔Β Next.js ͷϒϩάςϯϓϨʔτΛબ୒͠αΠτΛ deploy
8. 2. ࡞੒͞Εͨ Repository Λ clone ͠ɺNext.js ଆͰϓϨϏϡʔػೳΛ࣮૷ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
9. γʔΫϨοττʔΫϯΛ௨ͯ͠ ϓϨϏϡʔ؀ڥͷ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 ଆͰϓϨϏϡʔػೳΛ࣮૷
10. ϓϨϏϡʔϞʔυͷ 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 ଆͰϓϨϏϡʔػೳΛ࣮૷
11. ʹΞΫηε͢Δ͜ͱͰϓϨϏϡʔϞʔυΛonʹͯ͠Լॻ͖Λ֬ೝͰ͖Δ https://<your-site>/api/preview?secret=<token>&slug=<path> DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ 2. ࡞੒͞Εͨ Repository Λ clone ͠ɺNext.js ଆͰϓϨϏϡʔػೳΛ࣮૷
12. 3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛ௥Ճ • ϓϨϏϡʔURLΛखಈͰୟ͖ͨ͘ͳ͍ • CMS্ͰϓϨϏϡʔ͕֬ೝͰ͖ΔΑ͏ʹͳ͍͍ͬͯͨ ͷͰ… Next.js Preview Links Λ௥Ճ https://www.datocms.com/marketplace/plugins/i/datocms-plugin- nextjs-preview DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
13. 3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛ௥Ճ • αΠτURL • ઃఆͨ͠γʔΫϨοττʔΫϯ Λઃఆ͢Δ͜ͱͰϓϨϏϡʔϘλϯ͕CMSͷ౤ߘը໘͔Β֬ೝՄೳʹ ͳΔ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
14. 3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛ௥Ճ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
15. ײ૝ • DatoCMS ͸ Headless CMS Λબఆ͢Δ࣌ͷީิʹͳΓ͏Δ • ϝϦοτɿςϯϓϨʔτ͔ΒσϓϩΠ͕؆୯ʹͰ͖Δ • σϝϦοτɿ೔ຊޠͷ৘ใ͕͋·Γͳ͍ • Next.js ʹϓϨϏϡʔػೳ͕ϏϧτΠϯͰೖ͍ͬͯΔͷ͕ศར • Next.js ͕SSGͱͯ͠΋࢖͑Δͷ͕͏Ε͍͠ • ϓϨϏϡʔػೳ࣮૷͸υΩϡϝϯτΛ͋ͨΕ͹ͦΕ΄Ͳ೉͘͠͸ͳ͍ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ
16. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
17. גࣜձࣾGaji-LaboͰ͸ݱࡏϑϩϯτΤϯυΤϯδχΞΛืू͍ͯ͠·͢ʂʂ React, TypeScript, Next.js ౳ɺϞμϯͳϑϩϯτΤϯυٕज़Ͱࣄۀձࣾʹߩݙͯ͠Έ͍ͨํɺΧ δϡΞϧʹҰ౓͓࿩ͯ͠Έ·ͤΜ͔ʁ Website: https://www.gaji.jp/ Twitter: @gaji_labo Wantedly: https://www.wantedly.com/companies/gaji