next shopify storefront

？下一個Shopify店面

一輛由打字稿，尾風CSS，無頭UI，Next.js，React.js，Shopify Hydrogen React ...和Shopify StoreFront GraphQL API建造的購物車。

教程

• 如何組織一個可持續的下一步項目？
• 如何處理Next.js中的typesafe模塊化數據獲取？
• 如何在Next.js中與GraphQl API安全互動？
• 如何在Next.js中為Shopify實現動態變體選擇器？

經驗

這些是我從事這個項目的經驗：

• 從頭開始設計和建造店面。
• 為類型安全的模塊化數據獲取創建下一個實用程序。
• 創建Shopify實用程序來簡化變體選擇。
• 使用GraphQl Zeus與店面API進行交互。
• 使用Shopify氫來實現店面功能。
• 使用尾風CSS和無頭UI來構建店面UI。
• 使用next.js進行增量靜態再生。
• 使用下一個SEO實現搜索引擎優化。
• 使用打字稿安全地創建React鉤子和組件。
• 使用React使用鉤子加快組件開發。
• 使用swiper創建美麗，可觸摸，響應靈敏的滑塊。
• 使用ESLINT，更漂亮的是遵循Next.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文檔以獲取店面API信息。

發展

在開發模式下開發項目。

npm run dev

建造

在生產模式下構建項目。

npm run build

開始

以生產模式啟動項目。

npm run start

皮棉

分析代碼以發現eslint和prettier問題。

npm run lint

自動解決問題。

npm run fix

視覺工作室代碼擴展

為了加快生產率，您可以安裝這些擴展名：

• eslint
• 更漂亮
• Visual Studio Intellicode
• 尾風CSS Intellisense
• PostCSS語言支持

相關項目

• Shopify Data Faker •用於生成虛擬商店數據的Shopify開發工具。
• Bootstrap Shopify主題•由Bootstrap，Bem，Liquid，Sass，Esnext，主題工具等建造的免費Shopify主題...和WebPack。
• 下一個Shopify Storefront（V2） •用打字稿，Emotion，Next.js，React.js，React Query，Shopify StoreFront GraphQL API和Material UI建造的購物車。
• Next Shopify Storefront（V1） •用打字稿，NextJS，React，Redux，Apollo客戶端，Shopify StoreFront GraphQL API和Material UI建造的購物車。

星曆史