Slide 1

Slide 1 text

ݸਓϒϩάΛ Next.js + Headless WordPressʹ ੾Γସ͑ͨ࿩ S h i f t e r M e e t u p 2 0 2 0 / 1 1 /4

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

https://wp-kyoto.net/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ͳͥHeadlessʁ

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ӡ༻໘

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ͳͥNext.jsʁ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Next.js Gatsby

Slide 21

Slide 21 text

WordPressαʔόʔ͸ʁ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Case: Bootstrap with WordPress …

Hello, world!

Learn more

.col-md-1

Slide 28

Slide 28 text

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

Hello, world!

Learn More

.col > )

Slide 29

Slide 29 text

Case: Bootstrap with WordPress …

Hello, world!

Learn more

.col-md-1

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

Hello, world!

Learn More

.col > )

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Headless WordPress frontend is… Full scratch WordPress Theme

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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/

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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