Next.js + Tailwind CSS + Shopify Starter

Live Demo • See more starters • Follow me on Twitter

これは、フロントエンドにNext.js + Tailwind CSSを使用し、Shopify Storefront APIを活用してShopifyバックエンドと連携する、フル機能のeコマースストアです。ライブデモはこちらでご覧いただけます。

GraphQLを使用してShopifyデータをクエリし、カート情報をlocalStorageに保存することでユーザーセッションを維持します。最後に、Shopify Checkoutを使用してユーザーが商品を購入できるようにします。この動作はサンプルストアで確認できます。はい、ストアは機能しており、ステッカーを購入できます。 😃

高性能

Desktop	Mobile

モバイル対応

Listings	Cart

テック

• Next.js + Tailwind CSS
• GraphQL
• localStorage to persist user session
• Shopify
• Vercel
• Font Awesome Icons
• Josefin Sans Google Font

How to use

デフォルトでは、ストアは1つのコレクション内のすべての商品を照会して表示するように設定されています。 これを拡張して、複数のコレクションまたはストア全体を照会することもできます。

GraphQLクエリのページネーションに関する注意点

graphQLクエリはすべて、Shopifyによって設定された最大250個の商品/バリエーション/画像を取得するようにハードコードされています。これはシンプルさを保つためです。ページネーションを追加するとクエリが複雑になり、ほとんどのユースケースでは250個で十分です。

環境変数の設定

Create a .env.local file in the root directory. You need to add these 4 variables:

NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=

The NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN and NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN (it will be something like DOMAIN_NAME.myshopify.com) are needed to access the Shopify Storefront API (make sure you have set it up in your Shopify store. See docs for more information.

NEXT_PUBLIC_SHOPIFY_COLLECTION is the name of the collection you want to pull in and NEXT_PUBLIC_LOCAL_STORAGE_NAME is the name of the key your users will store their cart information under. The exact name isn't that important although I suggest you make it unique so it is less likely to clash with other stored objects. Something like yourStoreNameShopifyStore where yourStoreName is your shopify store name will suffice.

インストール

プロジェクト ディレクトリに移動して、次のコマンドを実行します。

yarn && yarn dev

サイトのメタデータを更新する

next.config.js ファイルでサイトのメタデータを更新できます。

env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://doggystickers.xyz',
  siteImagePreviewUrl: '/images/main.jpg',
  twitterHandle: '@your_handle'
} 

色の更新

tailwind.config.js ファイルでカラーパレットを更新できます。

colors: {
  palette: {
    lighter: '',
    light: '',
    primary: '',
    dark: '',
  },
},

PWAの更新

manifest.json ファイルと public/images/icons フォルダ内のアイコンを更新します。

https://realfavicongenerator.net/ などの無料オンラインツールを使用すると、さまざまなサイズのアイコンと favicon.ico ファイルを素早く生成できます。

展開

任意の数のサービスを使ってデプロイできます。VercelとNetlifyは私のお気に入りで、セットアップもGitHubリポジトリとの同期も非常に簡単です。

License

私は、このコードを MIT ライセンスの下でオープンソース化しました。これは、私が最初に始めたときに Gatsby Swag Store が役に立ったように、これが人々が JAMStack eCommerce ストア内を移動する際に役立つことを願っているからです。