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
PRO

November 04, 2020
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

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

    View Slide

  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

    View Slide

  3. https://speakerdeck.com/hideokamoto/wordcamp-osaka-2019

    View Slide

  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

    View Slide

  5. https://wp-kyoto.net/

    View Slide

  6. WP-Kyoto
    • 5೥΄Ͳଓ͚͍ͯΔݸਓϒϩά࣮݉ݧ৔
    • EC2(t3.micro)Λ1ʙ2୆ಈ͔ͤΔఔ౓ͷΞΫηεɾऩӹ͸͋Δ
    • 2ʙ3೥લ͔ΒͣͬͱHeadless
    • WP -> React SPA -> React SSG (Next.js)
    • ͍Ζ͍ΖࡶͳͷͰίʔυ͸͍͍ͩͨprivate

    View Slide

  7. ͳͥHeadlessʁ

    View Slide

  8. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. ӡ༻໘

    View Slide

  13. Run SSG in Netlify with webhook
    • JAMstack DeploymentϓϥάΠϯͰهࣄߋ৽࣌ʹWebhook࣮ߦ
    • Netlify͕GitHubʹ͋Διʔεʢmain branch)Λऔಘͯ͠Ϗϧυ
    • git push origin main / PR merge࣌ʹ΋Ϗϧυ͕࣮ߦ͞ΕΔ
    • WP ThemeΛGit؅ཧ͍ͯ͠Δ࣌ͱ͋·ΓมΘΒͳ͍
    • ൓ө·Ͱϥά͋ΔͷͰɺͦ͜͸ׂΓ੾Δ

    View Slide

  14. Run SSG in Netlify with webhook is better?
    • هࣄߋ৽ͷ౓ʹϏϧυ͕૸ΔͷͰɺ࿈ଓߋ৽࣌ʹͪΐͬͱ͏͍͟
    • Netlify΍Circle CIͳͲ͸Ϗϧυ࣌ؒʹ੍ݶ͕͋Δ
    • ෆඞཁͳϏϧυ͕ଟ͍ͳΒɺWebhook࣮ߦΛखಈԽ͢΂͖͔΋
    • ·ͨ͸Netlify / Circle CI / AWS / GCPͳͲΛࡳଋͰԥΖ͏

    View Slide

  15. Headless WordPress for personal blog
    • WP͕ࣄނͬͯ΋αΠτ͕མͪͳ͍ͷ͕Headless WP
    • WP͔ΒϏϧυWebhookΛ࣮ߦ͢Δඞཁ͕͋Δ
    • ݟͨ໨ͱத਎Λݸผ(Git / WP)؅ཧͰ͖ΔͷͰɺ߹͏ਓʹ͸߹͏

    View Slide

  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

    View Slide

  17. ͳͥNext.jsʁ

    View Slide

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

    View Slide

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

    View Slide

  20. Next.js Gatsby

    View Slide

  21. WordPressαʔόʔ͸ʁ

    View Slide

  22. WordPress for Headless WP
    • ͍Ζ͍ΖׂΓ੾ͬͨӡ༻ʹͳΔ
    • ύʔϚϦϯΫ / ϓϨϏϡʔ / ςʔϚػೳ͸์غ
    • WP API / Block Editor / Build / ଟݴޠԽͷͨΊͷϓϥάΠϯબఆ
    • ϑϧϚωʔδυϗεςΟϯάΛ࢖ͬͯAPI as a Serviceʹ͠Α͏

    View Slide

  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΍Ζ͏

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  27. Case: Bootstrap with WordPress





    Hello, world!
    Learn more


    .col-md-1
    .col-md-1

    View Slide

  28. Case: Bootstrap with React
    import React from 'react';
    import { Jumbotron, Button, Row, Col } from 'reactstrap';
    export const App: FC = () => (
    <>

    Hello, world!
    Learn More


    .col

    >
    )

    View Slide

  29. Case: Bootstrap with WordPress





    Hello, world!

    Learn
    more



    .col-md-1
    .col-md-1

    import React from 'react';
    import { Jumbotron, Button, Row, Col } from 'reactstrap';
    export const App: FC = () => (
    <>

    Hello, world!

    Learn More



    .col

    >
    )

    View Slide

  30. JS Frontend framework can IMPORT components
    • WordPress ThemeͰ͸ɺϚʔΫΞοϓͷίϐϖ͕ඞཁͩͬͨ
    • ReactͳͲͰ͸ɺComponentͷImportͰར༻Ͱ͖Δ
    • ࣗࣾͷUIίϯϙʔωϯτूΛϥΠϒϥϦԽ͢Δ͜ͱͰɺ
    ෳ਺ͷϓϩδΣΫτͰϚʔΫΞοϓ / CSSΛ࠶ར༻Ͱ͖Δ

    View Slide

  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

    View Slide

  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Ͱ࠶ར༻
    • ਺ΫϦοΫͰࣗಈσϓϩΠઃఆՄ
    • طଘͷςʔϚ͕ͦ΋ͦ΋ͳ͍ʹ͍ۙ
    • جຊతʹຖճεΫϥον

    View Slide

  33. Headless WordPress frontend is…
    Full scratch WordPress Theme

    View Slide

  34. Headless WordPress͕޲͍͍ͯΔͱࢥ͏৚݅
    • ϑϧεΫϥονͰαΠτΛߏங͍ͯ͠Δ
    • JavaScript(Ͱ͖Ε͹TypeScript)͕ॻ͚Δ
    • σβΠϯγεςϜ / ΨΠυϥΠϯ͕͋ΔνʔϜ
    • PWA / Native APP / LIFF(LINE Frontend Framework)ͳͲʹల։
    • ՝ۚϝσΟΞͳͲɺas a ServiceԽΛݕ౼͍ͯ͠Δ

    View Slide

  35. Headless WordPress͕޲͍͍ͯͳ͍ͱࢥ͏৚݅
    • ςʔϚΧελϚΠζɾࢠςʔϚͰߏங
    • jQueryͰ͢ΒͳΔ΂͘৮Γͨ͘ͳ͍ͱࢥ͍ͬͯΔ
    • Ҋ݅͝ͱʹσβΠϯ΍ϨΠΞ΢τ͕มΘΓ΍͍͢
    • ͱʹ͔͘ૉૣ͘αΠτΛϩʔϯν͍ͨ͠
    • LP΍ΩϟϯϖʔϯαΠτͳͲɺण໋͕୹ΊͳαΠτ

    View Slide

  36. ʮͦͷυϦϧͰͲΜͳ͕݀࡞ΕΔ͔ʯΛߟ͑Δ
    • ϑϩϯτͷσϓϩΠճ਺͕ଟ͍ͳΒɺ
    ViewͱAppΛ෼཭ͨ͠ํ͕ӨڹൣғΛߜΕΔ
    • App / DB͕མͪͯ΋αΠτ͕མͪͳ͍ͷ͸SSGͷಛ௃
    • ʮComponentͷϥΠϒϥϦԽʯͰσβΠϯͷඪ४Խ͕͠΍͍͢
    • WPςʔϚͷΑ͏ʹ਺ΫϦοΫͰ؆୯ʹαΠτ͸࡞Εͳ͍
    • ʮ࠶ར༻͍ͨ͠ / Ͱ͖ΔView͕͋Δ͔ʯ͕͓ͦΒ͘෼ਫྮ

    View Slide

  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/

    View Slide

  38. A P P E N D I X
    ͜ ͏ ͍ ͏ ͜ ͱ ΋Ͱ ͖ Δ
    • Ionic / CapacitorಋೖͰ
    Native friendlyʹ
    • AlgoliaಋೖͰWordPress΁ͷ
    ௚઀ΞΫηεΛθϩʹ
    • Cognito / Auth0 + StripeͰ
    Paywallͷ࣮ݧͱ͔΋͍ͨ͠

    View Slide

  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

    View Slide

  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/

    View Slide