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建造的购物车。

星历史