next-shopify-storefront前端商城模板

next-shopify-storefront 的购物车体验,真挺贴近实战的。用上了NextJSTypeScriptReactRedux还有Apollo Client,这些组合放一块儿,开发效率一下子就上来了。嗯,尤其是和Shopify GraphQL API配合,数据拉得快,组件写得也清爽。

状态管理用的是比较经典的 react-redux 搭配 TypeScript 的静态类型,好处就是代码健壮,属性定义清晰,出了问题也容易排查。你写个 ReducerAction,IDE 就能自动提示类型,少了多瞎猜时间。

Material UI也集成得不错,样式统一,页面观感也比较现代。如果你懒得自己折腾 UI 组件库,那这个搭配算是挺省心的选择。还用了不少高阶组件,比如封装 GraphQL 求逻辑,写起来更干净。

还有一个点我觉得蛮值一提的:它支持服务端渲染(SSR),也就是说 SEO 和首屏加载都比较友好,对做商城前台挺关键的。如果你是做电商类站点,这种架构还挺值得试试的。

代码风格也整得蛮规矩,配好了 ESLintPrettier,格式统一,团队合作时能省不少事。部署方面直接对接 NodeJS 服务,丢到 Vercel 或 Render 上都没啥问题。

如果你平时在搞Next.js全栈项目,又碰巧在研究 Shopify,那可以去逛逛这个仓库,说不定有你用得上的点子。顺手点个 star 支持一下作者也是应有的。

zip
next-shopify-storefront-master.zip 预估大小:50个文件
folder
next-shopify-storefront-master 文件夹
folder
utilities 文件夹
file
index.ts 63B
file
link.utility.ts 429B
folder
pages 文件夹
file
cart.tsx 141B
file
index.tsx 141B
file
_document.tsx 172B
file
products.tsx 1KB
file
product.tsx 510B
file
_app.tsx 559B
file
.eslintrc 326B
folder
services 文件夹
file
checkout.service.ts 4KB
file
index.ts 191B
file
product.service.ts 1KB
file
products.service.ts 2KB
file
apis.service.ts 569B
file
apollo.config.js 396B
folder
hocs 文件夹
file
withLayout.tsx 334B
file
withMui.tsx 2KB
file
withRedux.tsx 1KB
folder
store 文件夹
file
product.slice.ts 778B
file
products.slice.ts 2KB
file
index.ts 593B
file
checkout.slice.ts 1KB
folder
models 文件夹
file
shopify.model.ts 144KB
file
index.ts 33B
file
next.config.js 463B
file
.babelrc 330B
folder
.vscode 文件夹
file
settings.json 530B
folder
components 文件夹
folder
Cart 文件夹
file
Cart.tsx 4KB
folder
Product 文件夹
file
QuantityInput.tsx 488B
file
Product.tsx 3KB
file
VariantSelector.tsx 3KB
folder
Layout 文件夹
file
Layout.tsx 1KB
file
AppBar.tsx 4KB
folder
Products 文件夹
file
Sort.tsx 2KB
file
Search.tsx 805B
file
LoadMore.tsx 1KB
file
Products.tsx 5KB
folder
Home 文件夹
file
Home.tsx 1KB
file
graphql.config.json 385B
file
tsconfig.json 465B
file
LICENSE 1KB
file
.prettierrc 63B
file
README.md 2KB
file
nodemon.json 119B
file
tsconfig.server.json 185B
file
.editorconfig 421B
file
.gitignore 326B
folder
server 文件夹
file
index.ts 858B
file
.eslintignore 64B
file
package.json 2KB
zip 文件大小:58.39KB