Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Kazuhito Hokamura

October 22, 2021
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Technology

Transcript

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

    View Slide

  2. Ubie Discovery
    Kazuhito Hokamura
    @hokaccha
    @hokaccha

    View Slide

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

    View Slide

  4. Next.jsͱ͸Կ͔

    View Slide

  5. View Slide

  6. View Slide

  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.

    View Slide

  8. Next.js͸RailsΛஔ͖׵͑ΔΑ͏ͳ΋ͷʁ

    View Slide

  9. 🙅

    View Slide

  10. View Slide

  11. View Slide

  12. ͳͥNext.jsΛ࢖͏ͷ͔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. ΞʔΩςΫνϟͷྫ

    View Slide

  18. 👩💻
    Frontend
    API
    Database

    View Slide

  19. 👩💻

    View Slide

  20. 👩💻

    View Slide

  21. 👩💻

    View Slide

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

    View Slide

  23. Next.jsͷػೳ

    View Slide

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

    View Slide

  25. Zero Con
    fi
    g

    View Slide

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

    View Slide

  27. File-system Routing

    View Slide

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

    View Slide

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

    View Slide

  30. pages/posts/[id].tsx

    View Slide

  31. Performance Optimization

    View Slide

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

    View Slide

  33. Next.jsͷύϑΥʔϚϯε࠷దԽ
    • σϑΥϧτͰ༷ʑͳϕετϓϥΫςΟεͷద༻
    • Code splitting, Critical Rendering Path࠷దԽ, etc...
    • next/imageʹΑΔCLS࠷దԽ
    • next/linkʹΑΔը໘ભҠͷύϑΥʔϚϯε࠷దԽ
    • Pre RenderingʹΑΔFCP/LCPͷ࠷దԽ

    View Slide

  34. Pre Rendering

    View Slide

  35. Client Side Rendering

    View Slide

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

    View Slide

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

    View Slide

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

    ͦ͏͍͏έʔε͸ͦΕͳΓʹ͋Δ🥲
    Client Side Rendering
    Static Site Generation
    Server Side Rendering
    ※ Incremental Static Regeneration ͱ͍͏ͷ΋͋Δ͚Ͳ࣌ؒͷ౎߹ͰׂѪ

    View Slide

  39. SSR, SSG, CSR͸ซ༻Մೳ
    • ಈతʹσʔλ͕มΘΔ঎඼ϖʔδ͸SSR
    • ࣄલʹσʔλ͕Θ͔Δϔϧϓϖʔδ͸SSG
    • ύϑΥʔϚϯε΍OGPΛؾ͠ͳ͍؅ཧը໘͸CSR

    View Slide

  40. Server Side Rendering
    ϦΫΤετΛड͚ͨͱ͖ʹ
    getServerSideProps͕࣮ߦ

    ͞ΕΔͷͰpropsΛ࡞ͬͯ౉͢

    View Slide

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

    View Slide

  42. ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide