Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next....

Avatar for Leko Leko
October 23, 2025

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

Avatar for Leko

Leko

October 23, 2025
Tweet

More Decks by Leko

Other Decks in Technology

Transcript

  1. Context 1円ももらっていません、ボランティアです 当日の司会とかはせず裏方やってます Node学園祭 JSConf JP と私の関わり • Node学園祭 ◦

    2017: 参加者 ◦ 2018: 懇親会番長 • JSConf JP ◦ 2019: Webサイトのオーナー ▪ 寒くてネットが超弱かった回、当日 PWA対応 ◦ 2021: 同上 ◦ 2022: 同上 ◦ 2023: 同上 ◦ 2024: 同上 ◦ 2025: 同上(Next.jsに移行した)
  2. JSConf JP 発足当時と今 6 Context Work Sans 2018-2019はGatsby & styled-componentsの方が

    Next.js & TailwindよりもDL数多かった頃 Nulla porttitor Nulla porttitor Cymbal
  3. 年度ごとにや ること 1. 最新の年度のフォルダをコピーして新年度作成 2. 大体ビルドが通らない のでdepsのアップデートや調整 ◦ メジャーアップデートなどもよしなに対応 3.

    去年度のビルド成果物をコミットし静的サイトに ◦ Nodeのバージョン変動で動かなくなるものをメンテし続 けるのしんどいので... 4. 前回固有のコンテンツをリセット 5. Readyじゃないメニュー・UIの調整 6. Depsをビルドが通る範囲でなるたけ最新に upgrade 7. コミット 8. (CFP・スポンサー申込フォームの掲載) 9. (スポンサーの掲載) 10. (スピーカー・トーク・スケジュールの反映) 11. (TBDだった内容の都度アップデート) 12. (チケット販売開始) 7 Context 毎年浦島太郎の気分
  4. • 昨今主流と言えるなんらかの静的サイトが作れる技術に乗り 換えよう ◦ 新Contributorの獲得・学習コスト削減 ◦ コントリビュータにとってJSConf JPにコミットすること が対外的な成果の1つに なってほしい

    ▪ レガシーメンテ屋さんを無償で自ら望んでやりたが る人は少ない • All in one型でエコシステムに強依存しないものを選ぶ ◦ 浦島コスト削減のため • Claude Code契約してるしガッとやっちまうか よろしい、 ならば移行だ 8 Context
  5. 移行開始 10 Migration styled-componentsでゴリゴリCSSを書いてしまっ ていたのでまぁまぁ気合いは必要だった • Gatsby & gatsby-* &

    styled-componentsをdepsから 消し切る • 別物にならない程度に互換性を保つ ◦ 多少見た目や機能が変わっても大人しい実装にするこ とを優先 • 全コンテンツ移行 ◦ TOP ◦ スピーカー一覧 ◦ スポンサー一覧 ◦ タイムテーブル ◦ 会場・アクセス ◦ 多言語対応、モバイル対応 • 改善 ◦ しっくりきてなかったカラーパレットの緑色 ◦ 各所をType-Safeに ◦ OG画像の刷新、トークごとのOG画像の生成
  6. 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
  7. 多言語対応 • https://next-intl.dev/ を採用 • i18nextシリーズより新しく歴史的経緯が少なく無理が少な い、頑張らなくても型が強い ◦ 導入を検討してる方は詳しくはコード読んでください •

    トークなどユーザ入力コンテンツの効率的な翻訳管理はまだ 確立できてない ◦ 今はCFPの原文ママを載せてる ◦ LLMの対応によりDeepL API 規約のような制約は減っ たが、、、 ▪ 日英両方書いてもらうのはちょっと大変 ▪ 翻訳のニュアンスあってるか確認するなどスタッフ 以外の工数もかかっちゃう 12 Migration 多言語前提のカンファレンス運営者の皆さんどうし てますか?
  8. OG画像 13 Migration • 愚直に@vercel/og ◦ 見た目はTSKaigiやZennをリスペクトしよしなに • ハマりポイント ◦

    Google Fontsをビルド時に動的に呼ぶとめちゃめちゃ ビルド不安定になるのでコミットした方が良い ◦ <img />を利用する際リダイレクトは自前で解く必要が ある?(要検証 ▪ github.com/{username}.png がエラーに
  9. • よく見る普通の技術にしたのでContributeお待ちしておりま す ◦ TSKaigiのwebsiteに大感謝 ◦ Claude Code様様。なかったら心折れてた • CFP多言語対応の正解は未だ見えず。

    next-intlは良い • 私以外のメンテナ ◦ martinやyu1k、Himepon氏などアクティブにメンテし てくれるContributors マイグレーショ ンしたよ 15 After Migration
  10. Leko / れこ 取締役CTO at Yuimedi, Inc. • X: @L_e_k_o

    • GitHub: Leko • JSConf JPのContributionに興味ある方 • JS x AI(LLM)で医療業界のデータ利活用に 変革を起こしたい方 懇親会で話しましょう! Thanks!