Upgrade to Pro — share decks privately, control downloads, hide ads and more …

個人ブログを Next.js + Headless WordPressに 切り替えた話 / shifter-meetup-202011

個人ブログを Next.js + Headless WordPressに 切り替えた話 / shifter-meetup-202011

Hidetaka Okamoto

November 04, 2020
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

Transcript

  1. Agenda • Why do I make my blog using Headless

    WP with Next.js • How did I made it • Why do we make a website using Headless WP
  2. Agenda • Why do I make my blog using Headless

    WP with Next.js • How did I made it • Why do we make a website using Headless WP
  3. Generic WordPress is 1 or 2 Tier application • View

    / AppϨΠϠʔ + DBϨΠϠʔ • AppͰো֐͕ى͖ΔͱɺView΋ר͖ࠐ·ΕΔ • ʮϓϥάΠϯߋ৽ͨ͠Βਅͬനʹͳͬͨʂʯ • ؾܰʹ࣮ݧ͢ΔαΠτͰো֐ΛڪΕΔͷ͸ຊ຤స౗
  4. Headless WordPress is 3 Tier application • View ϨΠϠʔ +

    AppϨΠϠʔ + DBϨΠϠʔ • Appʹґଘ͠ͳ͍ViewΛ࡞Ε͹ɺޙํͷো֐ʹר͖ࠐ·Εͳ͍ • SSGͳΒ͹Ϗϧυ࣌ + AjaxͰ͔͠Appʹͭͳ͕ͳ͍ • ʮߋ৽Ͱ͖ͳͯ͘΋ɺݱঢ়ҡ࣋͸Ͱ͖Δঢ়ଶʯͷ׬੒
  5. Run SSG in Netlify with webhook • JAMstack DeploymentϓϥάΠϯͰهࣄߋ৽࣌ʹWebhook࣮ߦ •

    Netlify͕GitHubʹ͋Διʔεʢmain branch)Λऔಘͯ͠Ϗϧυ • git push origin main / PR merge࣌ʹ΋Ϗϧυ͕࣮ߦ͞ΕΔ • WP ThemeΛGit؅ཧ͍ͯ͠Δ࣌ͱ͋·ΓมΘΒͳ͍ • ൓ө·Ͱϥά͋ΔͷͰɺͦ͜͸ׂΓ੾Δ
  6. Run SSG in Netlify with webhook is better? • هࣄߋ৽ͷ౓ʹϏϧυ͕૸ΔͷͰɺ࿈ଓߋ৽࣌ʹͪΐͬͱ͏͍͟

    • Netlify΍Circle CIͳͲ͸Ϗϧυ࣌ؒʹ੍ݶ͕͋Δ • ෆඞཁͳϏϧυ͕ଟ͍ͳΒɺWebhook࣮ߦΛखಈԽ͢΂͖͔΋ • ·ͨ͸Netlify / Circle CI / AWS / GCPͳͲΛࡳଋͰԥΖ͏
  7. Agenda • Why do I make my blog using Headless

    WP with Next.js • How did I made it • Why do we make a website using Headless WP
  8. Next.js or Gatsby (Similar to Nuxt.js or Gridsome) • Gatsby(Gridsome)͸੩తαΠτੜ੒͕ϝΠϯ

    • Next.js(Nuxt.js)͸ϑϧελοΫͰɺSSR΍API࡞੒΋Մೳ • σʔλऔಘॲཧ / ϧʔςΟϯά / ϓϥάΠϯʹେ͖Ίͷ͕ࠩ͋Δ • WPͩͱɺςʔϚ࡞੒_s͔SageͲ͔ͬͪͭ͏ʁʹ͍͔ۙ΋
  9. WordPress for Headless WP • ͍Ζ͍ΖׂΓ੾ͬͨӡ༻ʹͳΔ • ύʔϚϦϯΫ / ϓϨϏϡʔ

    / ςʔϚػೳ͸์غ • WP API / Block Editor / Build / ଟݴޠԽͷͨΊͷϓϥάΠϯબఆ • ϑϧϚωʔδυϗεςΟϯάΛ࢖ͬͯAPI as a Serviceʹ͠Α͏
  10. How to make a Headless WordPress site • WordPress͸ʮ؅ཧը໘෇͖APIαʔόʔʯͩͱׂΓ੾Δ •

    React or VueɺGatsby(Gridsome) or Next.js(Nuxt.js)͸޷Έ -> σʔλιʔε͕ෳ਺ͳΒGraphQL͕࢖͑ΔGatsbyͷํ͕Α͍͔΋ • WP ThemeΛϑϧεΫϥονͰ࡞Δʹ͍ۙײ֮ • ޙʑ͠ΜͲ͍ͷͰɺؤுͬͯTypeScript΍Ζ͏
  11. Agenda • Why do I make my blog using Headless

    WP with Next.js • How did I made it • Why do we make a website using Headless WP
  12. Case: Bootstrap with WordPress … <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body

    <?php body_class(); ?> <div class="jumbotron"> <h1>Hello, world!</h1> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div>
  13. Case: Bootstrap with React import React from 'react'; import {

    Jumbotron, Button, Row, Col } from 'reactstrap'; export const App: FC = () => ( <> <Jumbotron> <h1>Hello, world!</h1> <p className="lead"><Button color="primary">Learn More</Button></p> </Jumbotron> <Row> <Col md={1}>.col</Col> </Row> </> )
  14. Case: Bootstrap with WordPress … <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body

    <?php body_class(); ?> <div class="jumbotron"> <h1>Hello, world!</h1> <p> <a class="btn btn-primary btn-lg” role="button">Learn more</a> </p> </div> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> import React from 'react'; import { Jumbotron, Button, Row, Col } from 'reactstrap'; export const App: FC = () => ( <> <Jumbotron> <h1>Hello, world!</h1> <p className=“lead”> <Button color="primary">Learn More</Button> </p> </Jumbotron> <Row> <Col md={1}>.col</Col> </Row> </> )
  15. JS Frontend framework can IMPORT components • WordPress ThemeͰ͸ɺϚʔΫΞοϓͷίϐϖ͕ඞཁͩͬͨ •

    ReactͳͲͰ͸ɺComponentͷImportͰར༻Ͱ͖Δ • ࣗࣾͷUIίϯϙʔωϯτूΛϥΠϒϥϦԽ͢Δ͜ͱͰɺ ෳ਺ͷϓϩδΣΫτͰϚʔΫΞοϓ / CSSΛ࠶ར༻Ͱ͖Δ
  16. D e s i g n s y s t

    e m s f o r c o m p a n y o r S a a S • Google: Material Design • Twitter: Bootstarp • Alibaba: Ant Design • AWS: NorthStar • Digitalcube: Galaxy
  17. W P T h e m e • HTML /

    JS / CSS / PHP / SQL • Component͸εχϖοτͷίϐϖ • σϓϩΠࣗಈԽ͕ͪΐͬͱखؒ • طଘͷςʔϚΛར༻Ͱ͖Δ • ͦ΋ͦ΋ຖճ࡞Δඞཁ΋ͳ͍ J A M s t a c k F ro n t e n d • HTML / CSS / JavaScript / JS and JS • Component͸importͰ࠶ར༻ • ਺ΫϦοΫͰࣗಈσϓϩΠઃఆՄ • طଘͷςʔϚ͕ͦ΋ͦ΋ͳ͍ʹ͍ۙ • جຊతʹຖճεΫϥον
  18. Headless WordPress͕޲͍͍ͯΔͱࢥ͏৚݅ • ϑϧεΫϥονͰαΠτΛߏங͍ͯ͠Δ • JavaScript(Ͱ͖Ε͹TypeScript)͕ॻ͚Δ • σβΠϯγεςϜ / ΨΠυϥΠϯ͕͋ΔνʔϜ

    • PWA / Native APP / LIFF(LINE Frontend Framework)ͳͲʹల։ • ՝ۚϝσΟΞͳͲɺas a ServiceԽΛݕ౼͍ͯ͠Δ
  19. Thanks you! • Why do I make my blog using

    Headless WP with Next.js • How did I made it • Why do we make a website using Headless WP Shifter https://getshifter.io Twitter @motchi0214 GitHub https://github.com/hideokamoto/
  20. A P P E N D I X ͜ ͏

    ͍ ͏ ͜ ͱ ΋Ͱ ͖ Δ • Ionic / CapacitorಋೖͰ Native friendlyʹ • AlgoliaಋೖͰWordPress΁ͷ ௚઀ΞΫηεΛθϩʹ • Cognito / Auth0 + StripeͰ Paywallͷ࣮ݧͱ͔΋͍ͨ͠
  21. Appendix: Trial resources • Example(SSG): Gatsby WordPress https://github.com/getshifter/example-gatsby-capacitor-wordpress • Example(SSR):

    Frontity https://github.com/getshifter/example-frontity-wordpress • Example(SPA): Ionic React with Capacitor https://github.com/getshifter/example-ionic-react-capacitor • Starter theme : Gatsby for WP with TypeScript https://github.com/getshifter/gatsby-starter-wordpress-typescript
  22. Thanks you! • Why do I make my blog using

    Headless WP with Next.js • How did I made it • Why do we make a website using Headless WP Shifter https://getshifter.io Twitter @motchi0214 GitHub https://github.com/hideokamoto/