vercel/commerce — 優良食堂詳しい解説

01 / 概要

何をするものか一文で言うと

ひとことでNext.js App Router を使用した高性能なサーバーレンダリング型 eコマースアプリケーション

vercel/commerceは、Next.js App RouterとShopifyのStorefront APIを組み合わせたサーバーレンダリング型ECサイトのテンプレートです。React Server Components、Server Actions、Suspense、useOptimisticなどNext.jsの最新機能をカタログ表示・カート・検索に適用した実装例になっています。フォークしてShopifyストアと接続すれば、そのまま自分のフロントエンドとして動かせる設計です。

02 / 構造

どう動くのか中核のしくみ

読み方動きの流れを図と一緒にほどきました。

中心にあるのはlib/shopify/index.tsのshopifyFetch関数で、Storefront GraphQL APIにPOSTリクエストを送り、商品・コレクション・カート・メニューを取得します。取得したShopify型データはreshapeCartやreshapeCollectionなどの関数でアプリ用の型に変換され、コンポーネントに渡されます。app/api/revalidate/route.tsがShopify側のWebhookを受けてrevalidateTagを呼び、next/cacheのタグベースキャッシュを更新する仕組みです。カート操作はcomponents/cart/actions.tsのServer Actionsが担い、useOptimisticで画面を即時更新しつつ裏でミューテーションを実行します。ナビゲーションや検索フィルタはSuspenseで区切られ、データ取得中はスケルトンUIを表示します。

03 / 体験

入れるとこんな体験になりますギット飯が実際にたどった順序

所要ギット飯が実際に導入・実行しながらたどった順序です。

STEP 01
まずvercel linkとvercel env pullで環境変数を取得し、SHOPIFY_STORE_DOMAINとSHOPIFY_STOREFRONT_ACCESS_TOKENなど.env.exampleの項目が.envに入っているか確認する作業が発生します。
STEP 02
pnpm installとpnpm devを実行すると、next dev --turbopackが起動し、localhost:3000で商品一覧やホームページが表示されます。
STEP 03
Shopifyストアの実データを持っていない場合はSHOPIFY_STORE_DOMAINが空でshopifyFetch内のエラーがスローされ、画面が正常に描画されないことを体験します。
STEP 04
商品ページで商品をカートに追加すると、components/cart/actions.tsのServer Actionが呼ばれ、useOptimisticにより即座にカート数量が更新される挙動を確認できます。
STEP 05
検索ページでcomponents/layout/search/filter配下のソートやフィルタを操作すると、URLクエリが変わりコレクション一覧が再取得される流れを見られます。
STEP 06
Shopify管理画面で商品を更新後、SHOPIFY_REVALIDATION_SECRETを使ったWebhookをapp/api/revalidate/route.tsに送ると、キャッシュが破棄され最新情報が反映されるかを試せます。

04 / 成果物

何が手に入るのか導入後に手元に残るもの

手元に残るのは、Shopifyストアをバックエンドにした実働可能なECサイトのフロントエンドです。商品詳細・検索フィルタ・カート・チェックアウト導線・サイトマップやOGP画像生成まで一通り揃っています。ただしShopifyストア自体の契約とAPIトークンがなければ、UIの骨格は見えてもデータは表示されません。

05 / 注意

ここは先に知っておいてください先に知っておくとよいこと

正直なところ誰にでも合うとは言いにくいところです。

READMEに明記されている通り、VercelがメンテナンスするのはShopify版のみで、他プロバイダー版は各社のフォークリポジトリに分散しています。

動作にはShopifyストアとStorefront Access Tokenが必須で、これらを用意しない限りローカルでの完全な動作確認はできません。

package.jsonのtestスクリプトはprettier:checkのみで、ユニットテストやE2Eテストの仕組みはこの構成には含まれていません。

next15.6.0-canaryやreact19など先端バージョンを使っているため、依存関係の組み合わせによっては別環境で挙動が変わる可能性があります。

06 / 結論

ギット飯の結論食べてみる価値のある一膳か

ギット飯の最終判断優良食堂

Shopifyを使ってNext.jsベースのECサイトを立ち上げたい開発者や、App RouterでのServer Actions・キャッシュ再検証の実装例を学びたいエンジニアに向いています。ファイル構成とlib/shopify/index.tsの実装を見る限り、GraphQL通信・キャッシュタグ・カートの楽観的更新という主要機能はコードとして実在し、READMEの手順とも整合しています。ただしShopifyストアの契約が前提のため、実際の商品データ込みの動作は自分のストアを用意して初めて確認できる点は認識しておく必要があります。