Save 37% off PRO during our Black Friday Sale! »

RailsエンジニアのためのNext.js入門

 RailsエンジニアのためのNext.js入門

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

October 22, 2021
Tweet

Transcript

  1. RailsΤϯδχΞͷͨΊͷ Next.jsೖ໳ Kaigi on Rails 2021

  2. Ubie Discovery Kazuhito Hokamura @hokaccha @hokaccha

  3. ࠓ೔ͷ࿩ 1. Next.jsͱ͸Կ͔ 2. Next.jsͷػೳɾಛ௃

  4. Next.jsͱ͸Կ͔

  5. None
  6. None
  7. Next.js gives you the best developer experience with all the

    features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
  8. Next.js͸RailsΛஔ͖׵͑ΔΑ͏ͳ΋ͷʁ

  9. 🙅

  10. None
  11. None
  12. ͳͥNext.jsΛ࢖͏ͷ͔

  13. RailsϑϩϯτΤϯυͷϖΠϯ • ಠࣗ࿏ઢͳٕज़ελοΫ • JavaScriptͱhaml/erb͕ࠞ͟Δ • JavaScriptͰඳը͢Δ෦෼ͷPre Rendering͕ࠔ೉

  14. Next.jsͩͱ • σϑΝΫτελϯμʔυͳٕज़͔ͭߴ͍։ൃମݧͷ؀ڥͰ։ൃͰ͖Δ • JavaScriptʢTypeScriptʣ͚ͩͰϑϩϯτΤϯυ͕׬݁͢Δ • Pre Rendering͕؆୯ʹ࣮ݱͰ͖Δ

  15. ͔͠͠Next.js͚ͩͩͱ • DBͷૢ࡞ϨΠϠʔ͕ͳ͍ • Blitz.jsͷΑ͏ͳϑϨʔϜϫʔΫ͕͋Δ͚Ͳ·ͩະख़

  16. RailsͳͲͱ૊Έ߹Θͤͯ࢖͏ͷ͕ݱঢ়ͩͱϕλʔ

  17. ΞʔΩςΫνϟͷྫ

  18. 👩💻 Frontend API Database

  19. 👩💻

  20. 👩💻

  21. 👩💻

  22. ͜͜·Ͱͷ·ͱΊ • Next.js͸ϑϩϯτΤϯυΛओ؟ʹ͓͍ͨϑϨʔϜϫʔΫ • RailsΛͦͷ··ஔ͖׵͑ΔΑ͏ͳ΋ͷͰ͸ͳ͍ • όοΫΤϯυ͕ಘҙͳϑϨʔϜϫʔΫͱ૊Έ߹Θͤͯ࢖͏ͷ͕Α͍

  23. Next.jsͷػೳ

  24. ಛ௃తͳػೳ • Zero con fi g • File-system Routing •

    Performance Optimization • Pre Rendering
  25. Zero Con fi g

  26. 1. ඞཁͳϞδϡʔϧΛΠϯετʔϧ 2. React ComponentΛ࡞Δ 3. next dev Λ࣮ߦ͢Δ Ҏ্ɻ

  27. File-system Routing

  28. GET / GET /posts GET /posts/:id

  29. GET / GET /posts GET /posts/:id

  30. pages/posts/[id].tsx

  31. Performance Optimization

  32. ͜͜Ͱ͍͏ύϑΥʔϚϯε Core Web Vitalsతͳҙຯ

  33. Next.jsͷύϑΥʔϚϯε࠷దԽ • σϑΥϧτͰ༷ʑͳϕετϓϥΫςΟεͷద༻ • Code splitting, Critical Rendering Path࠷దԽ, etc...

    • next/imageʹΑΔCLS࠷దԽ • next/linkʹΑΔը໘ભҠͷύϑΥʔϚϯε࠷దԽ • Pre RenderingʹΑΔFCP/LCPͷ࠷దԽ
  34. Pre Rendering

  35. Client Side Rendering

  36. Client Side Rendering • ॳظඳըͷύϑΥʔϚϯε͕Ͱͳ͍ • JavaScriptΛ࣮ߦ͠ͳ͍ΫϥΠΞϯτʹऑ͍ʢOGP, SEOʣ

  37. ͦ͜ͰPre Rendering • αʔόʔͰHTMLΛ࡞ͬͯฦ͢ → Server Side Rendering • ͋Β͔͡ΊHTMLΛ࡞͓͍ͬͯͯฦ͢

    → Static Site Generation
  38. ࣮૷ɺӡ༻͕࠷΋γϯϓϧɻύϑΥʔϚϯε΍OGPΛؾʹ͠ͳ͍Ͱ͍͍έʔεͰબͿ ύϑΥʔϚϯε࠷ڧɻ੩తʹੜ੒Ͱ͖ͯύϑΥʔϚϯεʹͩ͜ΘΓ͍ͨέʔεͰ͸͜Ε ੩తʹੜ੒͢Δͷແཧ͚ͩͲॳظඳըͷύϑΥʔϚϯε΋OGP΋୲อ͍ͨ͠৔߹ʹ࠷ऴతʹબͿɻ
 ͦ͏͍͏έʔε͸ͦΕͳΓʹ͋Δ🥲 Client Side Rendering Static Site Generation

    Server Side Rendering ※ Incremental Static Regeneration ͱ͍͏ͷ΋͋Δ͚Ͳ࣌ؒͷ౎߹ͰׂѪ
  39. SSR, SSG, CSR͸ซ༻Մೳ • ಈతʹσʔλ͕มΘΔ঎඼ϖʔδ͸SSR • ࣄલʹσʔλ͕Θ͔Δϔϧϓϖʔδ͸SSG • ύϑΥʔϚϯε΍OGPΛؾ͠ͳ͍؅ཧը໘͸CSR

  40. Server Side Rendering ϦΫΤετΛड͚ͨͱ͖ʹ getServerSideProps͕࣮ߦ
 ͞ΕΔͷͰpropsΛ࡞ͬͯ౉͢

  41. Static Site Generation Ϗϧυ࣌ʹgetStaticPathsͱ getStaticProps͕ݺ͹Εͯಈత ʹ੩తϑΝΠϧΛੜ੒͢Δ

  42. ·ͱΊ

  43. ·ͱΊ • Next.js͸RailsΛஔ͖׵͑Δ΋ͷͰͳ͘ڞଘ͍ͯ͘͠΋ͷ • Next.jsͷ։ൃମݧ͸େมΑ͍ͷͰҰճ࢖ͬͯΈͯ΄͍͠ • Rails͕޷͖ͳΤϯδχΞͳΒ޷͖ʹͳΔͱࢥ͏ɺͨͿΜʂ

  44. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ