探索下一代电商：Next.js + Tailwind CSS + Shopify Starter

探索下一代电商：Next.js + Tailwind CSS + Shopify Starter

next-shopify-starterNextjs + Tailwind CSS + Shopify Starter项目地址:https://gitcode.com/gh_mirrors/ne/next-shopify-starter

这款Next.js + Tailwind CSS + Shopify Starter是一个完全功能的电商平台，它前端采用Next.js和Tailwind CSS，并利用Shopify Storefront API与你的Shopify后台无缝对接。实时演示可让你一睹其风采。

项目通过GraphQL查询Shopify数据，并使用localStorage保持用户购物车信息，使用户会话得以持久化。最棒的是，它直接使用Shopify Checkout系统让顾客进行购买。正如展示店所示，这个平台不仅可用，你甚至可以真的购买到贴纸哦！

高性能体验

无论是桌面端还是移动端，项目都表现出优异的性能。

桌面	移动

移动响应式设计

无论是在产品列表页面，还是在购物车界面，都能看到出色的移动适配效果。

商品列表	购物车

技术栈解析

• Next.js + Tailwind CSS：强大的React框架与简洁易用的样式库结合，提供快速且美观的用户体验。
• GraphQL：高效的数据获取工具，优化前后端通信。
• localStorage：本地存储用户会话，增强交互性。
• Shopify：成熟的电商解决方案，提供稳定后端服务。
• Vercel：一键部署，轻松管理你的应用。
• Font Awesome Icons 和 Josefin Sans Google Font：提升视觉吸引力。

使用说明

项目默认显示一个集合的所有产品。你可以扩展查询以覆盖多个集合或整个商店。需要注意的是，GraphQL查询中的产品数量限制为250个。如果需要分页，你需要处理游标字段。

设置环境变量

在根目录创建.env.local文件，填入以下四个变量：

NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=

安装与开发

进入项目目录运行：

yarn && yarn dev

更新站点元数据

在next.config.js中修改网站标题、描述等信息。

调整颜色方案

在tailwind.config.js中更新颜色板。

进行渐进式Web应用（PWA）设置

更新manifest.json文件及图标。

部署

支持Vercel、Netlify等多种部署方式，轻松与GitHub仓库同步。

致敬与许可

本项目灵感来源于Gatsby Swag Store及其他开发者。代码遵循MIT许可证开放，旨在帮助开发者更好地构建JAMStack电商店铺。

表达感谢

如果你觉得这个项目有用并愿意表达支持，可以给我买杯咖啡:coffee:。或者，你也可以直接从我们的商店购买一些可爱的狗狗贴纸[:dog:]。

next-shopify-starterNextjs + Tailwind CSS + Shopify Starter项目地址:https://gitcode.com/gh_mirrors/ne/next-shopify-starter