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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ