GO Tech Talk #31 タクシーアプリ『GO』におけるNext.jsの活用

GO Tech Talk #31 タクシーアプリ『GO』におけるNext.jsの活用 で発表した資料です。

■ YouTube
https://www.youtube.com/watch?v=W_jzjk0Ne8k

■ connpass
https://jtx.connpass.com/event/370877/

Transcript

1. GO Tech Talk #31 タクシーアプリ『GO』における Next.jsの活用 2025/10/22 (Wed)
2. © GO Inc. 1. GOがNext.jsで作るWebプロダクトサービス紹介（伊藤） 2. GO Next.js Architecture（小堀） 3. GOにおけるSelf Hosting Next.js Application（浜地） 2 Index
3. GOがNext.jsで作る Webプロダクトサービス紹介 2025/10/22 (Wed) Webプロダクト開発部 / Takaaki Ito GO株式会社
4. © GO Inc. 4 自己紹介 GO株式会社 Webプロダクト1グループ GM / 伊藤 貴章 SI/受託開発企業に入社しチームリーダーや新人研修講師を経験後、 金融サービス事業会社にて基盤刷新や新規サービス開発等に幅広く携わる 2022年9月にGOへバックエンドエンジニアとして入社 2024年6月にWebプロダクト開発部を立ち上げる 趣味 ・GO 軽音部 でSax吹いてます🎷 ・GOジョブ キックボクシング部 はじめました🥊
5. © GO Inc. 5 GO株式会社と言えば、、、
6. © GO Inc. 6 タクシーアプリ『 GO』
7. © GO Inc. 7 スマホアプリのイメージ強いと思いますが、 実はWeb開発でNext.js使っています！
8. © GO Inc. Confidential 8 GOブランドの集客力とドライバー専門キャリアアドバイザーによるマッチング力を活かし、 タクシーに加えて物流・バスのドライバー人材紹介も拡大するなど、ドライバーに特化した人材採用プラットフォームを提供 『GO』アプリだけでなく、主にtoC向けサービス開発でNext.jsを採用 ドライバーに特化した人材採用プラットフォーム『 GOジョブ』開発において、 SEOとパフォーマンスを重視して Next.js採用しています 8 求人の検索・閲覧・応募 メッセージ プロフィールの登録 自己PRをAI生成 https://gojob.go.goinc.jp
9. © GO Inc. Confidential 9 『GO Web版』とはアプリインストール無しでWebサイトから『GO』で注文ができるプロダクト。 まだ『GO』アプリを使ったことがない方向けに、簡単に『GO』での注文を体験できるサービスとして提供 さらに、『GO Web版』の開発においても、Next.jsで開発 配車内容確認画面 迎車画面 タクシー料金検索サイトから ホテル等の施設設置QRコードから
10. © GO Inc. 10 Webプロダクト開発部が発足 • 発足の経緯 ◦ 2024年4月から採用活動をスタート ◦ 2024年6月から「Webプロダクト開発部」発足 • チーム構成 ◦ 初期３名 → 現在９名 • もっと知りたい方へ ◦ Webで移動にまつわる課題を解決へと導く。Webプロダクト開発 チーム立ち上げの全貌
11. © GO Inc. 11 他にも、、
12. © GO Inc. Confidential 12 配車情報を共有できるURLを発行して、車両を待っている人にWebページ上で共有可能に 配車リンク共有 共有する側（『 GO』アプリ ) 共有される側（ Webブラウザ )
13. © GO Inc. 13 まとめ • GOはスマホアプリだけでなくWeb開発にも注力し、Web プロダクト開発部を立ち上げ、多くのプロダクトをリ リースしています！ • 本日はドライバー向け人材採用プラットフォームとして リニューアルした『GOジョブ』開発をメインに『GO』 におけるNext.jsの活用ついて紹介します！
14. © GO Inc. GO Next.js Architecture 2025.10.22 開発本部 Webプロダクト開発部 / Hikaru Kobori GO株式会社
15. © GO Inc. 15 自己紹介 GO株式会社 Webプロダクト開発部 / 小堀 輝 2024.8 ~ GO株式会社 グループ会社のGOジョブ株式会社で展開する人材採用プラッ トフォームである『 GOジョブ』 を開発。 バックエンド: Golang× Clean Architecture フロントエンド: Next.js App Router 趣味: 🍷 🐈
16. © GO Inc. Next.js App Router がstableになって2年半ほど経過しました 16 導入
17. © GO Inc. • Next.js 難しくない？ ◦ 特に App Routerはハードルを感じる、、 • アップデート早いし、ついていけない、、 • セルフホストが大変 みたいな声が世の中的にもあると思いますし、社内でもちらほら そんな中、GOが Next.js App Router を採用して作り上げたアーキテクチャについてご紹介 17 導入
18. © GO Inc. 1. Next.js App Routerの採用とサーバーサイドを中心とした設計 2. 柔軟性とパフォーマンスを両立するキャッシュ戦略 3. セキュリティ高く、使いやすいセッション管理 4. セルフホストするうえでの注意点 18 Index
19. © GO Inc. 19 Next.js App Routerの採用とサー バーサイドを中心とした設計 01
20. © GO Inc. 従来のReactアプリケーションの場合: 1. ステートの準備 2. useEffect内でデータ取得を行い、 1で用意したステートを更新 3. 値がない場合のハンドリングを行う 20 Next.js App Routerの採用とサーバーサイドを中心とした設計
21. © GO Inc. 21 Next.js App Routerの採用とサーバーサイドを中心とした設計 従来のReactアプリケーションの場合: 1. ステートの準備 2. useEffect内でデータ取得を行い、 1で用意したステートを更新 3. 値がない場合のハンドリングを行う
22. © GO Inc. 22 Next.js App Routerの採用とサーバーサイドを中心とした設計 従来のReactアプリケーションの場合: 1. ステートの準備 2. useEffect内でデータ取得を行い、 1で用意したステートを更新 3. 値がない場合のハンドリングを行う
23. © GO Inc. 従来のReactアプリケーションにはいろいろな課題が • コードが冗長になる ◦ ステートや副作用のコード、nullのハンドリング • パフォーマンスの悪化 ◦ クライアントバンドルサイズが増える • XSSを受けた場合などに生じるセキュリティリスク ◦ データフェッチ処理やトークンをJavaScriptから参照可能な領域に配置する必要がある 23 Next.js App Routerの採用とサーバーサイドを中心とした設計
24. © GO Inc. 基本的コンセプト サーバーファースト設計 - 処理の大部分はサーバーサイドでクライアントは最小限に 具体的には バックエンドサーバーからのデータ取得や更新、認可やアクセスコントロール等はすべてサー バーで行う クライアントは、どうしてもステートやライフサイクルに伴う処理が必要な場合のみ・必要な 範囲に絞って使う 24 Next.js App Routerの採用とサーバーサイドを中心とした設計
25. © GO Inc. データ取得 React Server Componentを用いて Next.jsサーバーサイドで 直接バックエンドからデータ取得を行う 25 Next.js App Routerの採用とサーバーサイドを中心とした設計
26. © GO Inc. データ更新 1. フォームのステートを準備 2. 1で準備したステートはProviderで配布 → 子コンポーネントから参照可能 3. 送信処理はSever Actionsを呼び出し 4. Server Actions内で外部APIと通信 26 Next.js App Routerの採用とサーバーサイドを中心とした設計
27. © GO Inc. データ更新 1. フォームのステートを準備 2. 1で準備したステートはProviderで配布 → 子コンポーネントから参照可能 3. 送信処理はSever Actionsを呼び出し 4. Server Actions内で外部APIと通信 27 Next.js App Routerの採用とサーバーサイドを中心とした設計
28. © GO Inc. データ更新 1. フォームのステートを準備 2. 1で準備したステートはProviderで配布 → 子コンポーネントから参照可能 3. 送信処理はSever Actionsを呼び出し 4. Server Actions内で外部APIと通信 28 Next.js App Routerの採用とサーバーサイドを中心とした設計
29. © GO Inc. データ更新 1. フォームのステートを準備 2. 1で準備したステートはProviderで配布 → 子コンポーネントから参照可能 3. 送信処理はSever Actionsを呼び出し 4. Server Actions内で外部APIと通信 29 Next.js App Routerの採用とサーバーサイドを中心とした設計
30. © GO Inc. 認可・アクセスコントロール Next.jsのMiddlewareで バックエンドが発行したjwtを検証 30 Next.js App Routerの採用とサーバーサイドを中心とした設計
31. © GO Inc. このようにサーバーサイドに処理を寄せることで • コードの可読性が上がる ◦ 煩わしいステートとライフサイクルの管理がなくなる • パフォーマンス向上 ◦ クライアント側のバンドルサイズを下げることができる • セキュリティリスクの低減 ◦ データの取得や送信、認証情報をサーバーサイドに隠蔽できる ◦ Middlewareによる認可・アクセスコントロールの一元管理ができる 31 Next.js App Routerの採用とサーバーサイドを中心とした設計
32. © GO Inc. 1. Next.js App Routerの採用とサーバーサイドを中心とした設計 2. 柔軟性とパフォーマンスを両立するキャッシュ戦略 3. セキュリティ高く、使いやすいセッション管理 4. セルフホストするうえでの注意点 32 Index
33. © GO Inc. 33 柔軟性とパフォーマンスを両立する キャッシュ戦略 02
34. © GO Inc. GOのアプリケーションはユーザー認証をベースとしているサービスが多かったりして、ページ 全体をキャッシュするようなものとは相性がやや悪い → ページ自体はダイナミックにレンダリング、一部のキャッシュ可能なデータについては Next.jsのデータキャッシュを利用する 34 柔軟性とパフォーマンスを両立するキャッシュ戦略
35. © GO Inc. 35 柔軟性とパフォーマンスを両立するキャッシュ戦略 引用: Next.js公式ドキュメント https://nextjs.org/docs/app/guides/caching
36. © GO Inc. 1. Next.js App Routerの採用とサーバーサイドを中心とした設計 2. 柔軟性とパフォーマンスを両立するキャッシュ戦略 3. セキュリティ高く、使いやすいセッション管理 4. セルフホストするうえでの注意点 36 Index
37. © GO Inc. 37 セキュリティ高く使いやすいセッ ション管理 03
38. © GO Inc. ページ間のセッションデータ管理 • Local Storage • Session Storage • Indexed DB • Cookieに直接 • Redisに保存し、CookieにIDのみを入れる 38 セキュリティ高く使いやすいセッション管理
39. © GO Inc. ページ間のセッションデータ管理 • Local Storage • Session Storage • Indexed DB • Cookieに直接 • Redisに保存し、CookieにIDのみを入れる ← 採用！ 39 セキュリティ高く使いやすいセッション管理
40. © GO Inc. Local Storage、Session Storage、Indexed DB • GOではサーバーサーバーサイドで多くの処理を行っている関係でブラウザのストレージ は扱いづらい • XSSなどに弱い Cookieに直接 • 容量制限がある • センシティブな情報は入れにくい 40 セキュリティ高く使いやすいセッション管理
41. © GO Inc. Redisに実体を保存してCookieにはIDのみ入れる • サーバーコンポーネントからアクセスできるため使い勝手が良い • データを隠蔽できる ◦ 個人情報に関しても暗号化と有効期限は設定しつつ保存可能 • Secure・httponlyを設定できる ◦ XSSなどの攻撃に対して一定強くなる 41 セキュリティ高く使いやすいセッション管理
42. © GO Inc. 1. Next.js App Routerの採用とサーバーサイドを中心とした設計 2. 柔軟性とパフォーマンスを両立するキャッシュ戦略 3. セキュリティ高く、使いやすいセッション管理 4. セルフホストする上での注意点 42 Index
43. © GO Inc. 43 セルフホストする上での注意点 04
44. © GO Inc. GOでは、全社共通で作り込まれた内製のk8s環境あり、インフラリソースを共通化していま す。 内製のk8s環境には、デプロイパイプラインから分析・監視の仕組みも入っているため、クラ ウドが分散するより、一元管理されている方が、トータルで工数が小さくなると判断し、 Next.jsも内製のk8s環境でセルフホストする選択をしています。 ただし、Next.jsをセルフホストするには少しコツが必要になってくるので、やっていることを ご紹介 44 セルフホストする上での注意点
45. © GO Inc. • Next.jsのキャッシュやkvストアが使えない ◦ キャッシュデータはデフォルトで.next配下に配置されるがコンテナ環境では書き込めない ▪ EFSを使ってvolumeマウントしても良いが、競合等のリスクがあるため、Redisに保存しに行くように ◦ kvストアも用意されていないので、キャッシュ用に用意したRedisにnamespaceを分けて保存 • Version Skew（画面放置されたまま裏でリリースがかかったときに、Server Actionsでのエラー）が発生 する ◦ Vercelだと、Skew Protection（古いリクエストは古いサーバーに、新しいリクエストは新しいサーバーにポスト する仕組み）があるが、セルフホストだとないので、破壊的変更がないように • デプロイパイプラインやCDN等も自前で用意する必要がある 45 セルフホストする上での注意点
46. © GO Inc. 46 まとめ 05
47. © GO Inc. Next.js App Router難しい点もあるが、ちゃんと使えば、パフォーマンス高く、セキュアで、 使い勝手も良い状態になる • サーバーサイドを中心とした設計 • キャッシュ戦略 • kvストアを使ったセッション管理 • middlewareでのアクセスコントロール をご紹介しました 47 まとめ
48. GOにおける Self Hosting Next.js Application 浜地 亮輔
49. © GO Inc. 49 自己紹介 GO株式会社 SRE / 浜地亮輔 自社開発Webサービスの新卒サーバサイドエンジニアとして入社後、イン フラエンジニアやSREを担当し、2023年GO株式会社に入社 趣味はクライミング（ボルダー）、サウナ
50. © GO Inc. 50 これまでのGOにおける主なインフラ構成 ▪ Go言語を主軸にKubernetes 上（Kenos）で稼働 ▪ ブラウザからアクセスが 必要なものはCSRで提供 ▪ バックエンドでレンダリング するシステムはほぼなし
51. © GO Inc. 51 Kenos（Kubernetes基盤） ▪ Kenosとは ▪ GOにおけるアプリケーションをホスティングしている Kubernetesを中心とした社内プラットフォーム ▪ 100人以上の開発者によって100以上のマイクロサービスが稼働 している ▪ Kenosのしきたりを守る必要がある（自由度は若干低いかも） ▪ Kenosを利用するメリット ▪ 構築コストが低い（手順の確立化、自動生成 ▪ 非機能要件がほぼ満たされた状態でリリースできる ▪ 運用や調査が非常に楽（サービス間で構成差がほぼないため
52. © GO Inc. 52 ある日 「『GOジョブ』でSSRするのでNext.jsを採用します」 「『GO Web版』もSSRすることになり、Next.js使います」 => 今後のブラウザサービスの事業増大に備えて、 Next.js（とSSR）の技術スタック標準化が必要 でもどこで動かす？ Vercel？AWS Amplify？それともKenos？
53. © GO Inc. 53 マネージドサービスを使わなかった理由 ▪ 過去のAWS Amplify運用時の知見 ▪ セキュリティ要件が合わない ▪ トラブルシューティングが難しい ▪ 技術スタックを標準化するための時間の欠如 ▪ VercelやAWS AmplifyなどマネージドSSRのサービスの検証・比 較に多くの時間をかけられなかった ▪ Kenosなら大部分の非機能要件を満たした状態でリリース可能 => Kenos上にNext.jsアプリをSSRとして稼働させる
54. © GO Inc. 54 GOにおけるNext.js + SSR基本構成
55. © GO Inc. 55 Kenosで実現できること：簡単な環境構築 1. 専用ボイラープレートからリポジトリを生成 2. インフラリソース準備 （Amazon CloudFront、Amazon Elasticacheなど） 3. GitHubの特定ブランチにPushしてデプロイ 以上！
56. © GO Inc. 56 Kenosで実現できること：簡単な環境構築 1. 専用ボイラープレートからリポジトリを生成 2. インフラリソース準備 （Amazon CloudFront、Amazon Elasticacheなど） 3. GitHubの特定ブランチにPushしてデプロイ 以上！ ↑ ヘルスチェックAPIやデプロイワークフロー、 　Kenosの設定周りを自動生成 ↑ BOTがTerraformコードやk8s yamlを自動生成するのでapplyするだけ ↑ ボイラープレート生成物だけでも最悪動く
57. © GO Inc. 57 Kenosで実現できること：動的環境（プレビュー環境 ※ Vercelにおけるプレビュー環境と同等のものと認識してください
58. © GO Inc. 58 Kenosで実現できること：オブザーバビリティ基盤 ▪ Grafanaをベースとした監視環境によって、 サービス構築時に半自動で監視が設定される ▪ App Routerの1APIとしてメトリクス出力エンドポイントを実装 ▪ Prometheusを利用してNode.jsのメトリクスも取得 ▪ サービスメッシュによりサービス間通信の状況も可視化 ▪ （まだできていないけど、将来的にはTracingも実現予定 ↑気になる人はTechブログを Node.js関連のメトリクスもパネル化
59. © GO Inc. 59 まとめと感想 ▪ GOのKubernetes基盤「Kenos」上にNext.jsのアプリケーションを セルフホスティングする仕組みを整えた ▪ Amazon CloudFront等を利用することで効率的なリクエストキャッシュを実 現 ▪ Kenosが提供する「ボイラープレートによる高速な環境構築」「動的環境」 「オブザーバビリティ基盤」機能を実現 ▪ マネージドサービスで始める場合よりも当然大変だが、デメリット ばかりではない ▪ （既に基盤がある場合は）マネージドサービスでは実現しづらい非機能要件 部分の対応がほぼ不要になる ▪ マネージドサービスが隠蔽してくれるところを自前で実現する必要があるた め、Next.jsを更に理解できる環境になる → Next.jsを更に一歩踏み込んで使ってみたい人にオススメ
60. © GO Inc. 文章・画像等の内容の無断転載及び複製等の行為はご遠慮ください