js-buy-sdk（shopify-buy）を使ってShopifyの商品一覧を取得しNext.jsで表示する（REST API編） 🎁

手順

プライベートアプリを用意して、ストアフロントAPIのアクセストークンを取得する

help.shopify.com

こちらの手順に従って、

1. プライベートアプリを用意する
2. ストアフロントAPIを有効にする
3. 商品、バリエーション、コレクションを読み込むの権限を付与する
4. ストアフロントのアクセストークンを控える

と、進めます。

コードを書く

src/pages/rest-api-test-page.tsx

import Client from 'shopify-buy';

type Product = {
  title: string;
};

export default function RestAPITestPage({ products }: {
  products: Product[];
}) {
  return (
    <ul>
      { products.map((product, i) => <li key={ i }>{ product.title }</li> ) }
    </ul>
  );
}

export async function getStaticProps() {
  const client = Client.buildClient({
    domain: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN || '',
    storefrontAccessToken: process.env.NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN || ''
  });
  const products = await client.product.fetchAll();

  return {
    props: {
      products: JSON.parse(JSON.stringify(products))
    }
  };
}

タイトルをリストとして表示するのであれば、こんな感じでOKです。
実際のところ、productにはtitle以外にもいろんな情報が入っているので、型が適切ではないのですが、今回はtitleしか表示しない想定なのでサクッと型を定義してます。
あと、ストアアクセストークンにNEXT_PUBLICプレフィックスをつけて良いのかは疑問が残りますが、さくっとフロントから読むために付与しました。

最低限ですが、とても短いコードになったので想像以上に手軽に実装できそうだなという所管です。