next shopify storefront

？次のShopifyストアフロント

TypeScript、Tailwind CSS、Headless UI、Next.js、React.js、Shopify水素React、およびShopify StoreFront GraphQl APIで構築されたショッピングカート。

チュートリアル

• 持続可能なnext.jsプロジェクトを整理するにはどうすればよいですか？
• next.jsでタイプフェーモジュラーデータフェッチを処理するにはどうすればよいですか？
• next.jsでGraphQL APIと安全に対話するにはどうすればよいですか？
• next.jsでShopifyの動的バリアントセレクターを実装するにはどうすればよいですか？

経験

これらは、私がこのプロジェクトに取り組んでいるときの私の経験です。

• 店頭をゼロから設計して構築します。
• タイプセーフモジュラーデータフェッチの次のユーティリティを作成します。
• バリアント選択を簡素化するためのShopifyユーティリティの作成。
• GraphQL Zeusを使用して、StoreFront APIと対話します。
• Shopify水素を使用して、ストアフロント機能を実装します。
• Tailwind CSS＆Headless UIを使用して、ストアフロントUIを構築します。
• Incremental static Regenerationにnext.jsを使用します。
• 次のSEOを使用して、検索エンジン最適化を実装します。
• TypeScriptを使用して、Reactフックとコンポーネントを安全に作成します。
• Reactを使用して、フックを使用してコンポーネント開発をスピードアップします。
• Swiperを使用して、美しく、触れやすい、レスポンシブなスライダーを作成します。
• Eslintを使用して、次のように続くためにきれいになります。JSベストプラクティス。

このプロジェクトが気に入っている場合は、星ボタンを押してブックマーク§

デモンストレーション

ここにアクセスして、デモをご覧ください：https：//next-shopify-storefront.vercel.app/

インストール

ソースコードをコンピューターにクローンします。

git clone https://github.com/maxvien/next-shopify-storefront.git

プロジェクトの依存関係をインストールします。

npm install

使用法

まず、 .envファイルまたは展開プラットフォームに以下の環境変数を設定する必要があります。

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

Shopify StoreFront GraphQL APIドキュメントに従って、StoreFront API情報を取得できます。

開発する

開発モードでプロジェクトを開発します。

npm run dev

建てる

プロジェクトを生産モードで構築します。

npm run build

始める

生産モードでプロジェクトを開始します。

npm run start

糸くず

コードを分析して、 eslintおよびprettier問題を見つけます。

npm run lint

問題を自動的に修正します。

npm run fix

ビジュアルスタジオコード拡張機能

生産性を高速化するには、これらの拡張機能をインストールできます。

• eslint
• きれい
• Visual Studio Intellicode
• Tailwind CSS Intellisense
• PostCSS言語サポート

関連プロジェクト

• Shopify Data Faker •ダミーストアデータを生成するためのShopify開発ツール。
• Bootstrap Shopifyのテーマ•Bootstrap、BEM、Liquid、Sass、ESNext、テーマツール、...、Webpackで構築された無料のShopifyテーマ。
• 次のShopify StoreFront（V2） •TypeScript、Emotion、Next.js、React.jsで構築されたショッピングカート、Reactクエリ、Shopify StoreFront GraphQl API、...およびMaterial UI。
• 次のShopify StoreFront（V1） •TypeScript、NextJS、React、Redux、Apolloクライアント、Shopify StoreFront GraphQL API、およびマテリアルUIで構築されたショッピングカート。

星の歴史