JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題

Transcript

1. Nihonbashi.js #10 JSConf JPのwebsiteを GatsbyからNext.jsに移行し た話 - Next.jsの多言語静的サイトと課題 - 2025/10/23 Leko
2. これの話です
3. 差分の行数がすごいことになってるのは、過去年度 のサイトをフリーズするためビルド成果物を直接コ ミットしてるから Context どういう立場 から喋ってる の
4. Context 1円ももらっていません、ボランティアです 当日の司会とかはせず裏方やってます Node学園祭 JSConf JP と私の関わり • Node学園祭 ◦ 2017: 参加者 ◦ 2018: 懇親会番長 • JSConf JP ◦ 2019: Webサイトのオーナー ▪ 寒くてネットが超弱かった回、当日 PWA対応 ◦ 2021: 同上 ◦ 2022: 同上 ◦ 2023: 同上 ◦ 2024: 同上 ◦ 2025: 同上（Next.jsに移行した）
5. styled-component s 柔軟にいけそうなもので好み 当初からの技術スタック Gatsby 流行ってた、 Contribute するく らいには詳しかった GitHub Pages 無料ホスティング CI/CD はNetlify
6. JSConf JP 発足当時と今 6 Context Work Sans 2018-2019はGatsby & styled-componentsの方が Next.js & TailwindよりもDL数多かった頃 Nulla porttitor Nulla porttitor Cymbal
7. 年度ごとにや ること 1. 最新の年度のフォルダをコピーして新年度作成 2. 大体ビルドが通らない のでdepsのアップデートや調整 ◦ メジャーアップデートなどもよしなに対応 3. 去年度のビルド成果物をコミットし静的サイトに ◦ Nodeのバージョン変動で動かなくなるものをメンテし続 けるのしんどいので... 4. 前回固有のコンテンツをリセット 5. Readyじゃないメニュー・UIの調整 6. Depsをビルドが通る範囲でなるたけ最新に upgrade 7. コミット 8. （CFP・スポンサー申込フォームの掲載） 9. （スポンサーの掲載） 10. （スピーカー・トーク・スケジュールの反映） 11. （TBDだった内容の都度アップデート） 12. （チケット販売開始） 7 Context 毎年浦島太郎の気分
8. • 昨今主流と言えるなんらかの静的サイトが作れる技術に乗り 換えよう ◦ 新Contributorの獲得・学習コスト削減 ◦ コントリビュータにとってJSConf JPにコミットすること が対外的な成果の１つに なってほしい ▪ レガシーメンテ屋さんを無償で自ら望んでやりたが る人は少ない • All in one型でエコシステムに強依存しないものを選ぶ ◦ 浦島コスト削減のため • Claude Code契約してるしガッとやっちまうか よろしい、 ならば移行だ 8 Context
9. TailwindCSS ある程度はコンポーネント化し たけどデザインシステム的なも のは依然持ってない 現在の技術スタック Next.js 前述の通り GitHub Pages 無料ホスティング CI/CD はGitHub Actions
10. 移行開始 10 Migration styled-componentsでゴリゴリCSSを書いてしまっ ていたのでまぁまぁ気合いは必要だった • Gatsby & gatsby-* & styled-componentsをdepsから 消し切る • 別物にならない程度に互換性を保つ ◦ 多少見た目や機能が変わっても大人しい実装にするこ とを優先 • 全コンテンツ移行 ◦ TOP ◦ スピーカー一覧 ◦ スポンサー一覧 ◦ タイムテーブル ◦ 会場・アクセス ◦ 多言語対応、モバイル対応 • 改善 ◦ しっくりきてなかったカラーパレットの緑色 ◦ 各所をType-Safeに ◦ OG画像の刷新、トークごとのOG画像の生成
11. Special Thanks 11 • TSKaigi 2025 - https://2025.tskaigi.org/ ◦ https://github.com/tskaigi/tskaigi2025-web-site ◦ Nextで作られてる ◦ トークごとのOG画像を@vercel/ogで生成してる • Static ExportsなどハマりどころのWorking Example • 多言語対応は未対応だったがそれ以外ほぼ参考にした Migration
12. 多言語対応 • https://next-intl.dev/ を採用 • i18nextシリーズより新しく歴史的経緯が少なく無理が少な い、頑張らなくても型が強い ◦ 導入を検討してる方は詳しくはコード読んでください • トークなどユーザ入力コンテンツの効率的な翻訳管理はまだ 確立できてない ◦ 今はCFPの原文ママを載せてる ◦ LLMの対応によりDeepL API 規約のような制約は減っ たが、、、 ▪ 日英両方書いてもらうのはちょっと大変 ▪ 翻訳のニュアンスあってるか確認するなどスタッフ 以外の工数もかかっちゃう 12 Migration 多言語前提のカンファレンス運営者の皆さんどうし てますか？
13. OG画像 13 Migration • 愚直に@vercel/og ◦ 見た目はTSKaigiやZennをリスペクトしよしなに • ハマりポイント ◦ Google Fontsをビルド時に動的に呼ぶとめちゃめちゃ ビルド不安定になるのでコミットした方が良い ◦ <img />を利用する際リダイレクトは自前で解く必要が ある？（要検証 ▪ github.com/{username}.png がエラーに
14. プチ改修 14 コントラスト比の調整とかもしてみましたが、改善の 余地あり Migration • Secondaryの色を緑から黒に変更 • タイムテーブルの情報量増やした（ busyかも
15. • よく見る普通の技術にしたのでContributeお待ちしておりま す ◦ TSKaigiのwebsiteに大感謝 ◦ Claude Code様様。なかったら心折れてた • CFP多言語対応の正解は未だ見えず。 next-intlは良い • 私以外のメンテナ ◦ martinやyu1k、Himepon氏などアクティブにメンテし てくれるContributors マイグレーショ ンしたよ 15 After Migration
16. ↓ Before / After 16 After Migration パフォーマンスに明確に悪いことはしないようにして るけど、特別チューニングを頑張ったわけでもない デフォルトのまま使ってもある blackboxに程度いい 感じにしてくれるのが Next.jsの魅力の１つ
17. Leko / れこ 取締役CTO at Yuimedi, Inc. • X: @L_e_k_o • GitHub: Leko • JSConf JPのContributionに興味ある方 • JS x AI(LLM)で医療業界のデータ利活用に 変革を起こしたい方 懇親会で話しましょう！ Thanks!