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