Tweet
Tweet

Slide 1

Slide 1 text

DatoCMS + Next.js Ͱ ϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ ੴ֞঵ଠ࿠ @semigura 2021.12.9 δϟϜδϟϜʂʂJamstack_3ʲॳ৺ऀ׻ܴLTେձʳ

Slide 2

Slide 2 text

ੴ֞ɹ঵ଠ࿠ 
 twitter: @semigura • גࣜձࣾGaji-Laboʹ2018೥͔Βॴଐ • React, TypeScript, Next.js Λۀ຿Ͱѻ͍ͬͯ·͢ • Netlify CMS + GatsbyJS ߏ੒ͷ 
 ίʔϙϨʔταΠτͷ࣮૷पΓ΋୲౰ • Headless CMSΛ৮Δͷ͕झຯ • ೣͱԻָ͕޷͖ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 3

Slide 3 text

ࠓճͷςʔϚͱ΍ͬͨ͜ͱ 1. DatoCMS ͷ؅ཧը໘͔Β Next.js ͷϒϩάςϯϓϨʔτΛબ୒͠ 
 αΠτΛ deploy 2. ࡞੒͞Εͨ Repository Λ clone ͠ɺ 
 Next.js ଆͰϓϨϏϡʔػೳΛ࣮૷ 3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛ௥Ճ DatoCMS + Next.js Ͱ ϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 4

Slide 4 text

ࠓճ৮ͬͯΈͨߏ੒ͷ͝঺հ DatoCMS • API ϕʔε (GraphQL) ͷ Headless CMS • ؅ཧը໘͔Β๛෋ͳαϯϓϧϓϩδΣΫτΛબ୒Ͱ͖ɺσϓϩΠ·Ͱ Ͱ͖Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 5

Slide 5 text

ࠓճ৮ͬͯΈͨߏ੒ͷ͝঺հ Next.js • ReactΛϕʔεʹͨ͠ϑϩϯτΤϯυϑϨʔϜϫʔΫ • CSR/SSR/SSG/ISRͳͲɺϖʔδ͝ͱʹద੾ͳϨϯμϦϯάํ๏Λબ୒ ͢Δ͜ͱ͕Ͱ͖Δ • ࠓճ͸DatoCMSͱ࿈ܞ͠ɺSSGͱͯ͠੩తϖʔδΛϏϧυ͢Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 6

Slide 6 text

1. DatoCMS ͷઃఆը໘͔Β Next.js ͷϒϩάςϯϓϨʔτΛબ୒͠αΠτΛ deploy GitHub Repository: https://github.com/datocms/nextjs-demo/tree/master DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 7

Slide 7 text

ςϯϓϨʔτΛબ୒ˠCreate project ͚ͩͰαΠτΛσϓϩΠͰ͖Δ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ 1. DatoCMS ͷઃఆը໘͔Β Next.js ͷϒϩάςϯϓϨʔτΛબ୒͠αΠτΛ deploy

Slide 8

Slide 8 text

2. ࡞੒͞Εͨ Repository Λ clone ͠ɺNext.js ଆͰϓϨϏϡʔػೳΛ࣮૷ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 9

Slide 9 text

γʔΫϨοττʔΫϯΛ௨ͯ͠ ϓϨϏϡʔ؀ڥͷ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 ଆͰϓϨϏϡʔػೳΛ࣮૷

Slide 10

Slide 10 text

ϓϨϏϡʔϞʔυͷ 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 ଆͰϓϨϏϡʔػೳΛ࣮૷

Slide 11

Slide 11 text

ʹΞΫηε͢Δ͜ͱͰϓϨϏϡʔϞʔυΛonʹͯ͠Լॻ͖Λ֬ೝͰ͖Δ https:///api/preview?secret=&slug= DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ 2. ࡞੒͞Εͨ Repository Λ clone ͠ɺNext.js ଆͰϓϨϏϡʔػೳΛ࣮૷

Slide 12

Slide 12 text

3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛ௥Ճ • ϓϨϏϡʔURLΛखಈͰୟ͖ͨ͘ͳ͍ • CMS্ͰϓϨϏϡʔ͕֬ೝͰ͖ΔΑ͏ʹͳ͍͍ͬͯͨ ͷͰ… Next.js Preview Links Λ௥Ճ https://www.datocms.com/marketplace/plugins/i/datocms-plugin- nextjs-preview DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 13

Slide 13 text

3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛ௥Ճ • αΠτURL • ઃఆͨ͠γʔΫϨοττʔΫϯ Λઃఆ͢Δ͜ͱͰϓϨϏϡʔϘλϯ͕CMSͷ౤ߘը໘͔Β֬ೝՄೳʹ ͳΔ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 14

Slide 14 text

3. DatoCMS ଆͰϓϨϏϡʔΛ֬ೝͰ͖ΔϓϥάΠϯΛ௥Ճ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 15

Slide 15 text

ײ૝ • DatoCMS ͸ Headless CMS Λબఆ͢Δ࣌ͷީิʹͳΓ͏Δ • ϝϦοτɿςϯϓϨʔτ͔ΒσϓϩΠ͕؆୯ʹͰ͖Δ • σϝϦοτɿ೔ຊޠͷ৘ใ͕͋·Γͳ͍ • Next.js ʹϓϨϏϡʔػೳ͕ϏϧτΠϯͰೖ͍ͬͯΔͷ͕ศར • Next.js ͕SSGͱͯ͠΋࢖͑Δͷ͕͏Ε͍͠ • ϓϨϏϡʔػೳ࣮૷͸υΩϡϝϯτΛ͋ͨΕ͹ͦΕ΄Ͳ೉͘͠͸ͳ͍ DatoCMS + Next.js ͰϓϨϏϡʔػೳ෇͖ϒϩάΛ࡞Δ

Slide 16

Slide 16 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

Slide 17

Slide 17 text

גࣜձࣾGaji-LaboͰ͸ݱࡏϑϩϯτΤϯυΤϯδχΞΛืू͍ͯ͠·͢ʂʂ React, TypeScript, Next.js ౳ɺϞμϯͳϑϩϯτΤϯυٕज़Ͱࣄۀձࣾʹߩݙͯ͠Έ͍ͨํɺΧ δϡΞϧʹҰ౓͓࿩ͯ͠Έ·ͤΜ͔ʁ Website: https://www.gaji.jp/ Twitter: @gaji_labo Wantedly: https://www.wantedly.com/companies/gaji