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

ݸਓϒϩάΛ Next.js + Headless WordPressʹ ੾Γସ͑ͨ࿩ S h i f
t e r M e e t u p 2 0 2 0 / 1 1 /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

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

https://wp-kyoto.net/

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

ͳͥHeadlessʁ

ؾܰʹനը໘ʹͳΔͷ͕ ݏͩͬͨ

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

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

ӡ༻໘

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

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

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

ͳͥNext.jsʁ

ࣾ಺ͰGatsby͹͔Γ ࿩୊ʹͳ͔ͬͯͨΒ

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

Next.js Gatsby

WordPressαʔόʔ͸ʁ

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

How to make a Headless WordPress site • WordPress͸ʮ؅ཧը໘෇͖APIαʔόʔʯͩͱׂΓ੾Δ •
React or VueɺGatsby(Gridsome) or Next.js(Nuxt.js)͸޷Έ -> σʔλιʔε͕ෳ਺ͳΒGraphQL͕࢖͑ΔGatsbyͷํ͕Α͍͔΋ • WP ThemeΛϑϧεΫϥονͰ࡞Δʹ͍ۙײ֮ • ޙʑ͠ΜͲ͍ͷͰɺؤுͬͯTypeScript΍Ζ͏

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

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

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>

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> </> )

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> </> )

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

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

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

Headless WordPress frontend is… Full scratch WordPress Theme

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

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

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

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/

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

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

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/

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

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

More Decks by Hidetaka Okamoto

Other Decks in Programming

Featured

Transcript

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

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