VercelとShopify、Hydrogenをオープンソースで再構築

発表の要点

ランタイム非依存のオープンソース化
Vercel Ship 26で発表
あらゆるJS環境で動作

3層アーキテクチャ

core層でAPIの定型コードを集約
client層でカート状態を単一import化
server層は既存FWへの指針を提供

今後の展開

vercel.shopをHydrogenへ移行
GitHubでプレビュー公開中
詳細を読む

VercelとShopifyは2026年6月30日、ニューヨークで開催の開発者イベント「Vercel Ship 26」で、ヘッドレスコマース向けフレームワーク「Hydrogen」をゼロから再構築すると発表しました。新版はオープンソースかつランタイム非依存で、JavaScriptが動く環境ならどこでも実行できます。両社は「より開かれたウェブ」への共同の賭けと位置づけています。

従来のHydrogenはヘッドレス店舗の構築を容易にした一方、特定環境への依存から移植性に課題がありました。新版ではSvelteやNuxt、Next.jsはもちろん、独自フレームワークの持ち込みにも対応します。設計はcore・client・serverの3層で構成されます。

core層は、これまで各開発者が個別に書いてきたShopify API向けの定型コードを一箇所に集約します。たとえば通貨表示は、APIが返す独自型「MoneyV2」を整形する処理を共通化し、APIが変わっても更新を最小限に抑えられます。バグを一度直せば全員に改善が行き渡る仕組みです。

client層は、コマースアプリで誰もが書いてきたカート状態の管理を引き受けます。これまで各自が実装していた追加・更新・削除やクロスタブ同期などが、単一のimportに集約されました。React向けにはプレビューブランチで既に利用でき、対応フレームワークは今後拡大します。

server層では、フルスタックアクセスを前提に、静的コンテンツはCDNから即時配信し、在庫などの動的データは逐次取り込みます。Next.jsやNuxt、SvelteKitが既に解決した能力を活かし、追加コードではなくドキュメントやテンプレート、スキルという形の指針を提供する方針です。これは人間とエージェントの双方が既存機能を正しく使えるようにするためです。

Vercelは自社の先行テンプレート「vercel.shop」で培った知見をHydrogenに統合し、Hydrogenが安定した段階でvercel.shopをその上に移行する計画です。開発はGitHubのプレビューブランチで公開されており、誰でも試用やフォークが可能です。狙いは、ランタイムやフレームワーク、プラットフォームに縛られない開発体験の実現にあります。