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
66
Yahoo!クイックマート管理画面でNext.js + static exportsを選んだ理由
Findy社主催
【Next.js特集】フロントエンド技術選定の裏側 〜直面する技術的課題とは?〜
での登壇資料です。
株式会社出前館
March 18, 2025
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
180
これならできる!Kotlin・Spring・DDDを活用したAll in oneのマイクロサービス開発術
demaecan
0
420
出前館を支えるJavaとKotlin
demaecan
0
360
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
0
330
出前館アプリにおけるFlutterアプリ設計とそれを支えるCICD環境の進化
demaecan
0
960
出前館のマルチプロダクト戦略を支えるアーキテクチャ 〜技術的負債を解消しながら事業を多角化する〜
demaecan
1
260
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
1.9k
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
1
600
出前館におけるFlutter活用事例
demaecan
0
630
Other Decks in Technology
See All in Technology
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
340
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
本当にわかりやすいAIエージェント入門
segavvy
1
460
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
240
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Visualization
eitanlees
146
16k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing for Performance
lara
610
69k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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) - ৄ͘͠ΧδϡΞϧ໘ஊͰʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠