Pro Yearly is on sale from $80 to $50! »

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

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

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto

November 04, 2020
Tweet

Transcript

  1. ݸਓϒϩάΛ Next.js + Headless WordPressʹ ੾Γସ͑ͨ࿩ S h i f

    t e r M e e t u p 2 0 2 0 / 1 1 /4
  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. https://speakerdeck.com/hideokamoto/wordcamp-osaka-2019

  4. 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
  5. https://wp-kyoto.net/

  6. WP-Kyoto • 5೥΄Ͳଓ͚͍ͯΔݸਓϒϩά࣮݉ݧ৔ • EC2(t3.micro)Λ1ʙ2୆ಈ͔ͤΔఔ౓ͷΞΫηεɾऩӹ͸͋Δ • 2ʙ3೥લ͔ΒͣͬͱHeadless • WP ->

    React SPA -> React SSG (Next.js) • ͍Ζ͍ΖࡶͳͷͰίʔυ͸͍͍ͩͨprivate
  7. ͳͥHeadlessʁ

  8. None
  9. ؾܰʹനը໘ʹͳΔͷ͕ ݏͩͬͨ

  10. Generic WordPress is 1 or 2 Tier application • View

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

    AppϨΠϠʔ + DBϨΠϠʔ • Appʹґଘ͠ͳ͍ViewΛ࡞Ε͹ɺޙํͷো֐ʹר͖ࠐ·Εͳ͍ • SSGͳΒ͹Ϗϧυ࣌ + AjaxͰ͔͠Appʹͭͳ͕ͳ͍ • ʮߋ৽Ͱ͖ͳͯ͘΋ɺݱঢ়ҡ࣋͸Ͱ͖Δঢ়ଶʯͷ׬੒
  12. ӡ༻໘

  13. Run SSG in Netlify with webhook • JAMstack DeploymentϓϥάΠϯͰهࣄߋ৽࣌ʹWebhook࣮ߦ •

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

    • Netlify΍Circle CIͳͲ͸Ϗϧυ࣌ؒʹ੍ݶ͕͋Δ • ෆඞཁͳϏϧυ͕ଟ͍ͳΒɺWebhook࣮ߦΛखಈԽ͢΂͖͔΋ • ·ͨ͸Netlify / Circle CI / AWS / GCPͳͲΛࡳଋͰԥΖ͏
  15. Headless WordPress for personal blog • WP͕ࣄނͬͯ΋αΠτ͕མͪͳ͍ͷ͕Headless WP • WP͔ΒϏϧυWebhookΛ࣮ߦ͢Δඞཁ͕͋Δ

    • ݟͨ໨ͱத਎Λݸผ(Git / WP)؅ཧͰ͖ΔͷͰɺ߹͏ਓʹ͸߹͏
  16. 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
  17. ͳͥNext.jsʁ

  18. ࣾ಺ͰGatsby͹͔Γ ࿩୊ʹͳ͔ͬͯͨΒ

  19. Next.js or Gatsby (Similar to Nuxt.js or Gridsome) • Gatsby(Gridsome)͸੩తαΠτੜ੒͕ϝΠϯ

    • Next.js(Nuxt.js)͸ϑϧελοΫͰɺSSR΍API࡞੒΋Մೳ • σʔλऔಘॲཧ / ϧʔςΟϯά / ϓϥάΠϯʹେ͖Ίͷ͕ࠩ͋Δ • WPͩͱɺςʔϚ࡞੒_s͔SageͲ͔ͬͪͭ͏ʁʹ͍͔ۙ΋
  20. Next.js Gatsby

  21. WordPressαʔόʔ͸ʁ

  22. WordPress for Headless WP • ͍Ζ͍ΖׂΓ੾ͬͨӡ༻ʹͳΔ • ύʔϚϦϯΫ / ϓϨϏϡʔ

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

    React or VueɺGatsby(Gridsome) or Next.js(Nuxt.js)͸޷Έ -> σʔλιʔε͕ෳ਺ͳΒGraphQL͕࢖͑ΔGatsbyͷํ͕Α͍͔΋ • WP ThemeΛϑϧεΫϥονͰ࡞Δʹ͍ۙײ֮ • ޙʑ͠ΜͲ͍ͷͰɺؤுͬͯTypeScript΍Ζ͏
  24. 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
  25. JAMStack(Headless)ͷϝϦοτ ʮJavaScriptͰ͋Δ͜ͱʯ

  26. JAMStack(Headless)ͷσϝϦοτ ʮJavaScriptͰ͋Δ͜ͱʯ

  27. 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>
  28. 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> </> )
  29. 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> </> )
  30. JS Frontend framework can IMPORT components • WordPress ThemeͰ͸ɺϚʔΫΞοϓͷίϐϖ͕ඞཁͩͬͨ •

    ReactͳͲͰ͸ɺComponentͷImportͰར༻Ͱ͖Δ • ࣗࣾͷUIίϯϙʔωϯτूΛϥΠϒϥϦԽ͢Δ͜ͱͰɺ ෳ਺ͷϓϩδΣΫτͰϚʔΫΞοϓ / CSSΛ࠶ར༻Ͱ͖Δ
  31. 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
  32. 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Ͱ࠶ར༻ • ਺ΫϦοΫͰࣗಈσϓϩΠઃఆՄ • طଘͷςʔϚ͕ͦ΋ͦ΋ͳ͍ʹ͍ۙ • جຊతʹຖճεΫϥον
  33. Headless WordPress frontend is… Full scratch WordPress Theme

  34. Headless WordPress͕޲͍͍ͯΔͱࢥ͏৚݅ • ϑϧεΫϥονͰαΠτΛߏங͍ͯ͠Δ • JavaScript(Ͱ͖Ε͹TypeScript)͕ॻ͚Δ • σβΠϯγεςϜ / ΨΠυϥΠϯ͕͋ΔνʔϜ

    • PWA / Native APP / LIFF(LINE Frontend Framework)ͳͲʹల։ • ՝ۚϝσΟΞͳͲɺas a ServiceԽΛݕ౼͍ͯ͠Δ
  35. Headless WordPress͕޲͍͍ͯͳ͍ͱࢥ͏৚݅ • ςʔϚΧελϚΠζɾࢠςʔϚͰߏங • jQueryͰ͢ΒͳΔ΂͘৮Γͨ͘ͳ͍ͱࢥ͍ͬͯΔ • Ҋ݅͝ͱʹσβΠϯ΍ϨΠΞ΢τ͕มΘΓ΍͍͢ • ͱʹ͔͘ૉૣ͘αΠτΛϩʔϯν͍ͨ͠

    • LP΍ΩϟϯϖʔϯαΠτͳͲɺण໋͕୹ΊͳαΠτ
  36. ʮͦͷυϦϧͰͲΜͳ͕݀࡞ΕΔ͔ʯΛߟ͑Δ • ϑϩϯτͷσϓϩΠճ਺͕ଟ͍ͳΒɺ ViewͱAppΛ෼཭ͨ͠ํ͕ӨڹൣғΛߜΕΔ • App / DB͕མͪͯ΋αΠτ͕མͪͳ͍ͷ͸SSGͷಛ௃ • ʮComponentͷϥΠϒϥϦԽʯͰσβΠϯͷඪ४Խ͕͠΍͍͢

    • WPςʔϚͷΑ͏ʹ਺ΫϦοΫͰ؆୯ʹαΠτ͸࡞Εͳ͍ • ʮ࠶ར༻͍ͨ͠ / Ͱ͖ΔView͕͋Δ͔ʯ͕͓ͦΒ͘෼ਫྮ
  37. 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/
  38. A P P E N D I X ͜ ͏

    ͍ ͏ ͜ ͱ ΋Ͱ ͖ Δ • Ionic / CapacitorಋೖͰ Native friendlyʹ • AlgoliaಋೖͰWordPress΁ͷ ௚઀ΞΫηεΛθϩʹ • Cognito / Auth0 + StripeͰ Paywallͷ࣮ݧͱ͔΋͍ͨ͠
  39. 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
  40. 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/