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

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