探索下一代电商:Next.js + Tailwind CSS + 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:]。