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 full-size slide

  2. Ubie Discovery
    Kazuhito Hokamura
    @hokaccha
    @hokaccha

    View full-size slide

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

    View full-size slide

  4. Next.jsͱ͸Կ͔

    View full-size slide

  5. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ΞʔΩςΫνϟͷྫ

    View full-size slide

  13. 👩💻
    Frontend
    API
    Database

    View full-size slide

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

    View full-size slide

  15. Next.jsͷػೳ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. File-system Routing

    View full-size slide

  19. GET /
    GET /posts
    GET /posts/:id

    View full-size slide

  20. GET /
    GET /posts
    GET /posts/:id

    View full-size slide

  21. pages/posts/[id].tsx

    View full-size slide

  22. Performance Optimization

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Pre Rendering

    View full-size slide

  26. Client Side Rendering

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide