Yahoo!クイックマート管理画面でNext.js + static exportsを選んだ理由

Findy社主催
【Next.js特集】フロントエンド技術選定の裏側 〜直面する技術的課題とは？〜
での登壇資料です。

Transcript

1. Yahoo!ΫΠοΫϚʔτ؅ཧը໘ Ͱ Next.js + static exports ΛબΜͩཧ༝ ग़લؗגࣜձࣾ Յखן ࢤ࿕
2. Topics • ࣗݾ঺հ • Yahoo!ΫΠοΫϚʔτͷ঺հ • ͳͥ Yahoo!ΫΠοΫϚʔτ؅ཧը໘ Ͱ Next.js + static exports ΛબΜ ͩͷ͔ʁ
3. ࣗݾ঺հ Յखן (ΧσΧϧ) ࢤ࿕ ॴଐ - LINE Ϡϑʔגࣜձࣾ - גࣜձࣾग़લؗʹग़޲த ܦྺ - ~ 2021೥ WEB੍࡞ͷ࢓ࣄ - 2021೥ LINE GrowthTechnology ೖࣾ (ϑϩ ϯτΤϯυΤϯδχΞ) - 2022೥͔Βग़લؗʹग़޲ ԭೄ͔ΒϑϧϦϞʔτͰࢀՃ
4. Yahoo!ΫΠοΫϚʔτͷ঺հ
5. ίϯϏχ΍εʔύʔͳͲͰൢച͞Ε͍ͯΔੜ઱৯඼΍ ೔༻඼Λ஫จ で ͖Δ デ Ϧ バ Ϧʔαʔ ビ ε Yahoo!γϣοϐϯά಺ʹ͋Γ·͢ɻ ࡢ೥ͷ8݄ʹϦϦʔεͯ͠ର৅ΤϦΞΛͪΌͪ͘Ό͘ͱ޿͍͍͛ͯͬͯΔ Yahoo!ΫΠοΫϚʔτ
6. Yahoo!ΫΠοΫϚʔτ؅ཧը໘ - ళฮͷ؅ཧ - ঎඼ͷ؅ཧ - ஫จ৘ใͷ؅ཧ Yahoo!ΫΠοΫϚʔτʹग़ళ͍ͯ͠ΔՃໍళͷ؅ཧऀ΍ε λοϑɺग़લؗଆͷΦϖϨʔλʔ͕ར༻͢Δ؅ཧπʔϧ ※ࠓճͷNext.jsಋೖࣄྫͰ঺հ͢Δͷ͸͜ͷπʔϧ
7. ͳͥ Yahoo!ΫΠοΫϚʔτ؅ཧը໘ Next.js + static exports ΛબΜͩͷ͔ʁ
8. Yahoo!ΫΠοΫϚʔτ؅ཧը໘ͷ։ൃظؒ - 2023/11 νʔϜ্ཱͪ͛ɺٕज़બఆɺ։ൃج൫ͷߏங - 2024/01 ։ൃ։࢝ - 2024/08 ϦϦʔε
9. બఆ࣌ͷ৚݅ 1. ϦϦʔε೔ඞୡ / λΠτͳεέδϡʔϧ 2. νʔϜͷೳྗɾঢ়گతʹαʔόʔͷอक͸ආ͚͍ͨ 3. SEOߟྀෆཁ/ UX͸࠷༏ઌͰ͸ͳ͍
10. ৚͔݅Βݟ͖͑ͯͨ͜ͱ 1. ϦϦʔε೔ඞୡ / λΠτͳεέδϡʔϧ ֶशίετ͸্ཱ͓͕͑ͯͪ͞ΓΛૣ͍ͨ͘͠ 2. νʔϜͷೳྗɾঢ়گతʹαʔόʔͷอक͸ආ͚͍ͨ ΫϥΠΞϯτ͕ϗεςΟϯάαʔόʔ͚ͩͰಈ͔ͤΔ 3. SEOߟྀෆཁ/ UX͸࠷༏ઌͰ͸ͳ͍ SSR ͸ෆཁ CSR Only Ͱ͍͍
11. ݕ౼ͨ͠ߏ੒ - Next.js (pages router) + static exports - vite + react-router-dom બఆ࣌ظ͸ 2023/11
12. Next.js + static exports vite + react-router-dom static exports Ͱ Dynamic routes Λར༻͢Δʹ͸ nginx ͳͲͰ rewrite ͕ඞཁ - /post/[id].tsx -> /post/[id].html ͕ੜ੒͞ΕΔ - /post/xxx -> /post/[id].html ʹ rewrite Next.jsͷݒ೦
13. Next.jsͷݒ೦ static exports Ͱ Dynamic routes Λར༻͢Δʹ͸ nginx ͳͲͰ rewrite ͕ඞཁ - /post/[id].tsx -> /post/[id].html ͕ੜ੒͞ΕΔ - /post/xxx -> /post/[id].html ʹ rewrite Next.js + static exports vite + react-router-dom nginx Λ࣋ͭͷ͸ආ͚͍ͨ vite + react-router-dom Λࢼͦ͏
14. vite + react-router-dom Λࢼ͢ const router = createBrowserRouter({ path: "/about", element: <About /> }) ίʔυʹϖʔδύεͱରԠ͢ΔίϯϙʔωϯτΛఆٛ͢Δ ※બఆ౰࣌ v16 ͷॻ͖ํ Next.js + static exports vite + react-router-dom ϧʔςΟϯάͲ͏΍ͬͯઃఆ͢Δͷʁ
15. vite + react-router-dom Λࢼ͢ const router = createBrowserRouter({ path: "about", lazy: () => import("./routes/About"), }) Next.js + static exports vite + react-router-dom Code Splitting ͸Ͳ͏΍Δͷʁ lazy ʹίϯϙʔωϯτΛ dynamic import ͢Δؔ਺Λ౉͢
16. ΍ͬͺΓ Next.js ͕͍͍ͳ…
17. ΍ͬͺΓ Next.js ͕͍͍… - react-router-dom ׳ΕΔ·Ͱ͔͔࣌ؒΓͦ͏ - ϝϯόʔશһ Next.js Ͱͷ file-system based router ʹ׳Ε͍ͯΔ - Next.js ͳΒ Code splitting ͳͲϏϧυ࠷దԽΛࣗಈͰͯ͘͠ΕΔ Next.js + static exports vite + react-router-dom
18. Ͱ΋Next.jsʹ͸ݒ೦͕… - Dynamic routes Λར༻͢ΔͨΊʹ͸ nginx ͳͲͰ rewrite ͢Δඞཁ͕͋Δ - /post/xxx -> /post/[id].html ʹ rewrite Next.js + static exports vite + react-router-dom
19. - Dynamic routes Λར༻͢ΔͨΊʹ͸ nginx ͳͲͰ rewrite ͢Δඞཁ͕͋Δ - Dynamic routes ࢖Θͳ͍ - ύϥϝʔλʔ͸ΫΤϦύϥϝʔλʔͰ౉ͤ͹͍͍ Ͱ΋Next.jsʹ͸ݒ೦͕… Next.js + static exports vite + react-router-dom
20. - Dynamic routes Λར༻͢ΔͨΊʹ͸ nginx ͳͲͰ rewrite ͢Δඞཁ͕͋Δ - Dynamic routes ࢖Θͳ͍ - ύϥϝʔλʔ͸ΫΤϦύϥϝʔλʔͰ౉ͤ͹͍͍ - σϑΥϧτͩͱύε໊ͷhtml͕ੜ੒͞ΕΔͷͰ΍ͬͺΓ rewirte ͕ඞཁʁ - /about.tsx ΛϏϧυ͢Δͱ about.html ͕ੜ੒͞ΕΔ - /about ʹΞΫηε͢Δͱ 404 ʹͳΔ Ͱ΋Next.jsʹ͸ݒ೦͕… Next.js + static exports vite + react-router-dom
21. - Dynamic routes Λར༻͢ΔͨΊʹ͸ nginx ͳͲͰ rewrite ͢Δඞཁ͕͋Δ - Dynamic routes ࢖Θͳ͍ - ύϥϝʔλʔ͸ΫΤϦύϥϝʔλʔͰ౉ͤ͹͍͍ - σϑΥϧτͩͱύε໊ͷhtml͕ੜ੒͞ΕΔͷͰ΍ͬͺΓ rewirte ͕ඞཁʁ - /about.tsx ΛϏϧυ͢Δͱ about.html ͕ੜ੒͞ΕΔ - /about ʹΞΫηε͢Δͱ 404 ʹͳΔ - trailingSlashɿ true Λઃఆͪ͠Ό͓͏ - index.html ͕ੜ੒͞ΕΔ /about.tsx → /about/index.html - ౰࣌ར༻Λ૝ఆ͍ͯͨࣾ͠಺ͷϗεςΟϯάઌͰ΋ index.html ʹϑΥʔ ϧόοΫ͞ΕΔ࢓༷ͩͬͨͷͰಛʹϧʔςΟϯάͳͲ͸ෆཁʹ Ͱ΋Next.jsʹ͸ݒ೦͕… Next.js + static exports vite + react-router-dom
22. ·ͱΊ - ϓϩδΣΫτͷঢ়گ΍νʔϜͷεΩϧͳͲલఏ৚͔݅ΒɺϥΠϒϥϦɾϑ ϨʔϜϫʔΫʹٻΊΔཁٻΛग़ͨ͠ - ཁٻ͕࣮ݱͰ͖Δߏ੒Λ2Ҋݕ౼ͨ͠ - νʔϜͷεΩϧʹϚον͢Δ Next.js ΛબΜͩ - ཁ݅Λ࣮ݱ͢ΔͨΊʹ Next.js ͷ࢖͍ํΛগ͠޻෉ͨ͠
23. ։ൃ։࢝ɺϦϦʔε΁ - બఆىҼͰͷ஗Ε͸ͳ͘։ൃΛਐߦͰ͖ͨ - ༧ఆͨ͠೔ʹϦϦʔεͰ͖ͨ - ߇͑Ίͳ࢖͍ํʹͳ͕ͬͨɺ৚݅ʹ޲͖߹͍νʔϜ΍ϓϩδΣΫτʹϑΟο τ͢Δબఆ͕Ͱ͖ͨͱࢥ͏
24. Yahoo!ΫΠοΫϚʔτ؅ཧը໘ͷݱࡏ - ϑΝʔετϦϦʔεͰམͱͨ͠ཁ݅ͷ։ൃத - ·ͩ·ͩ଍Γͳ͍ػೳ͕ଟ͍ (ొ࿥ɾߋ৽͸جຊ CSV ೖߘ…)
25. ग़લؗͷϑϩϯτΤϯυ - ϑϩϯτΤϯυΛ΋ͭϓϩμΫτ͕͍͔ͭ͘ - ग़લؗWEBɺ Ճໍళ؅ཧը໘ͳͲ - جຊReact࢖ͬͯ·͢ - ग़લؗWEB͸Next.js + BFF (GraphQL) - ৄ͘͠͸ΧδϡΞϧ໘ஊͰʂ
26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠