Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Yahoo!クイックマート管理画面でNext.js + static exportsを選んだ理由
Search
株式会社出前館
March 18, 2025
Technology
0
63
Yahoo!クイックマート管理画面でNext.js + static exportsを選んだ理由
Findy社主催
【Next.js特集】フロントエンド技術選定の裏側 〜直面する技術的課題とは?〜
での登壇資料です。
株式会社出前館
March 18, 2025
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
160
これならできる!Kotlin・Spring・DDDを活用したAll in oneのマイクロサービス開発術
demaecan
0
400
出前館を支えるJavaとKotlin
demaecan
0
350
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
0
320
出前館アプリにおけるFlutterアプリ設計とそれを支えるCICD環境の進化
demaecan
0
940
出前館のマルチプロダクト戦略を支えるアーキテクチャ 〜技術的負債を解消しながら事業を多角化する〜
demaecan
1
250
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
1.9k
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
1
600
出前館におけるFlutter活用事例
demaecan
0
620
Other Decks in Technology
See All in Technology
Claude Code に プロジェクト管理やらせたみた
unson
6
4.2k
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
200
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.4k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cult of Friendly URLs
andyhume
79
6.5k
4 Signs Your Business is Dying
shpigford
184
22k
We Have a Design System, Now What?
morganepeng
53
7.7k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Six Lessons from altMBA
skipperchong
28
3.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
Yahoo!ΫΠοΫϚʔτཧը໘ Ͱ Next.js + static exports ΛબΜͩཧ༝ ग़લؗגࣜձࣾ Յखן ࢤ࿕
Topics • ࣗݾհ • Yahoo!ΫΠοΫϚʔτͷհ • ͳͥ Yahoo!ΫΠοΫϚʔτཧը໘ Ͱ Next.js
+ static exports ΛબΜ ͩͷ͔ʁ
ࣗݾհ Յखן (ΧσΧϧ) ࢤ࿕ ॴଐ - LINE Ϡϑʔגࣜձࣾ - גࣜձࣾग़લؗʹग़த
ܦྺ - ~ 2021 WEB੍࡞ͷࣄ - 2021 LINE GrowthTechnology ೖࣾ (ϑϩ ϯτΤϯυΤϯδχΞ) - 2022͔Βग़લؗʹग़ ԭೄ͔ΒϑϧϦϞʔτͰࢀՃ
Yahoo!ΫΠοΫϚʔτͷհ
ίϯϏχεʔύʔͳͲͰൢച͞Ε͍ͯΔੜ৯ ༻Λจ で ͖Δ デ Ϧ バ Ϧʔαʔ ビ ε
Yahoo!γϣοϐϯάʹ͋Γ·͢ɻ ࡢͷ8݄ʹϦϦʔεͯ͠ରΤϦΞΛͪΌͪ͘Ό͘ͱ͍͍͛ͯͬͯΔ Yahoo!ΫΠοΫϚʔτ
Yahoo!ΫΠοΫϚʔτཧը໘ - ళฮͷཧ - ͷཧ - จใͷཧ Yahoo!ΫΠοΫϚʔτʹग़ళ͍ͯ͠ΔՃໍళͷཧऀε λοϑɺग़લؗଆͷΦϖϨʔλʔ͕ར༻͢Δཧπʔϧ ※ࠓճͷNext.jsಋೖࣄྫͰհ͢Δͷ͜ͷπʔϧ
ͳͥ Yahoo!ΫΠοΫϚʔτཧը໘ Next.js + static exports ΛબΜͩͷ͔ʁ
Yahoo!ΫΠοΫϚʔτཧը໘ͷ։ൃظؒ - 2023/11 νʔϜ্ཱͪ͛ɺٕज़બఆɺ։ൃج൫ͷߏங - 2024/01 ։ൃ։࢝ - 2024/08 ϦϦʔε
બఆ࣌ͷ݅ 1. ϦϦʔεඞୡ / λΠτͳεέδϡʔϧ 2. νʔϜͷೳྗɾঢ়گతʹαʔόʔͷอकආ͚͍ͨ 3. SEOߟྀෆཁ/ UX࠷༏ઌͰͳ͍
͔݅Βݟ͖͑ͯͨ͜ͱ 1. ϦϦʔεඞୡ / λΠτͳεέδϡʔϧ ֶशίετ্ཱ͓͕͑ͯͪ͞ΓΛૣ͍ͨ͘͠ 2. νʔϜͷೳྗɾঢ়گతʹαʔόʔͷอकආ͚͍ͨ ΫϥΠΞϯτ͕ϗεςΟϯάαʔόʔ͚ͩͰಈ͔ͤΔ 3.
SEOߟྀෆཁ/ UX࠷༏ઌͰͳ͍ SSR ෆཁ CSR Only Ͱ͍͍
ݕ౼ͨ͠ߏ - Next.js (pages router) + static exports - vite
+ react-router-dom બఆ࣌ظ 2023/11
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ͷݒ೦
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 Λࢼͦ͏
vite + react-router-dom Λࢼ͢ const router = createBrowserRouter({ path: "/about",
element: <About /> }) ίʔυʹϖʔδύεͱରԠ͢ΔίϯϙʔωϯτΛఆٛ͢Δ ※બఆ࣌ v16 ͷॻ͖ํ Next.js + static exports vite + react-router-dom ϧʔςΟϯάͲ͏ͬͯઃఆ͢Δͷʁ
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 ͢ΔؔΛ͢
ͬͺΓ Next.js ͕͍͍ͳ…
ͬͺΓ Next.js ͕͍͍… - react-router-dom ׳ΕΔ·Ͱ͔͔࣌ؒΓͦ͏ - ϝϯόʔશһ Next.js Ͱͷ
file-system based router ʹ׳Ε͍ͯΔ - Next.js ͳΒ Code splitting ͳͲϏϧυ࠷దԽΛࣗಈͰͯ͘͠ΕΔ Next.js + static exports vite + react-router-dom
ͰNext.jsʹݒ೦͕… - Dynamic routes Λར༻͢ΔͨΊʹ nginx ͳͲͰ rewrite ͢Δඞཁ͕͋Δ -
/post/xxx -> /post/[id].html ʹ rewrite Next.js + static exports vite + react-router-dom
- Dynamic routes Λར༻͢ΔͨΊʹ nginx ͳͲͰ rewrite ͢Δඞཁ͕͋Δ - Dynamic
routes Θͳ͍ - ύϥϝʔλʔΫΤϦύϥϝʔλʔͰ͍͍ͤ ͰNext.jsʹݒ೦͕… Next.js + static exports vite + react-router-dom
- Dynamic routes Λར༻͢ΔͨΊʹ nginx ͳͲͰ rewrite ͢Δඞཁ͕͋Δ - Dynamic
routes Θͳ͍ - ύϥϝʔλʔΫΤϦύϥϝʔλʔͰ͍͍ͤ - σϑΥϧτͩͱύε໊ͷhtml͕ੜ͞ΕΔͷͰͬͺΓ rewirte ͕ඞཁʁ - /about.tsx ΛϏϧυ͢Δͱ about.html ͕ੜ͞ΕΔ - /about ʹΞΫηε͢Δͱ 404 ʹͳΔ ͰNext.jsʹݒ೦͕… Next.js + static exports vite + react-router-dom
- 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
·ͱΊ - ϓϩδΣΫτͷঢ়گνʔϜͷεΩϧͳͲલఏ͔݅ΒɺϥΠϒϥϦɾϑ ϨʔϜϫʔΫʹٻΊΔཁٻΛग़ͨ͠ - ཁٻ͕࣮ݱͰ͖ΔߏΛ2Ҋݕ౼ͨ͠ - νʔϜͷεΩϧʹϚον͢Δ Next.js ΛબΜͩ
- ཁ݅Λ࣮ݱ͢ΔͨΊʹ Next.js ͷ͍ํΛগͨ͠͠
։ൃ։࢝ɺϦϦʔε - બఆىҼͰͷΕͳ͘։ൃΛਐߦͰ͖ͨ - ༧ఆͨ͠ʹϦϦʔεͰ͖ͨ - ߇͑Ίͳ͍ํʹͳ͕ͬͨɺ݅ʹ͖߹͍νʔϜϓϩδΣΫτʹϑΟο τ͢Δબఆ͕Ͱ͖ͨͱࢥ͏
Yahoo!ΫΠοΫϚʔτཧը໘ͷݱࡏ - ϑΝʔετϦϦʔεͰམͱͨ͠ཁ݅ͷ։ൃத - ·ͩ·ͩΓͳ͍ػೳ͕ଟ͍ (ొɾߋ৽جຊ CSV ೖߘ…)
ग़લؗͷϑϩϯτΤϯυ - ϑϩϯτΤϯυΛͭϓϩμΫτ͕͍͔ͭ͘ - ग़લؗWEBɺ Ճໍళཧը໘ͳͲ - جຊReactͬͯ·͢ - ग़લؗWEBNext.js
+ BFF (GraphQL) - ৄ͘͠ΧδϡΞϧ໘ஊͰʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠