Next.jsReact电商启动器

openfront-template — Next.js 电商模板

作者 pathtoresiliencebv

基于Openfront的可复用电商模板，集成Next.js、KeystoneJS、GraphQL与Docker，兼容Openship。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

目前只有 1 张可用预览，尚未找到可用演示站，暂无法补充内页和手机端截图。

整体预览

查看源码在新标签页打开

作者提供的预览

查看现有预览图，更多页面尚未采集。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-06查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Openfront 上游项目，保留 MIT 许可，模板改动集中在配置与文档

集成 Next.js 15、KeystoneJS 6、GraphQL、Prisma、Tailwind 和 shadcn/ui

内置管理后台、店面、支付、物流、多区域、礼品卡、折扣等完整电商功能

提供 Docker Compose 和 .env 示例，支持快速本地启动

与 Openship 模板兼容，可组合实现多渠道履约自动化

支持 Vercel 和 Railway 一键部署

模板详细介绍

Openfront Commerce Template 是一个面向生产环境的电商启动模板，基于 openshiporg/openfront 构建，保留了上游的 MIT 许可。它整合了 Next.js 15 前端、KeystoneJS 6 后端、GraphQL API 和 PostgreSQL 数据库，并预置了 Docker Compose 配置和 .env 示例，旨在简化自托管部署流程。模板包含完整的电商功能，如产品目录、订单管理、支付（Stripe、PayPal）、物流（Shippo）、多区域支持、礼品卡、折扣和 AI 助手，并提供了 78 个以上的数据模型。

该模板的独特之处在于与 Openship 的兼容性。README 指出，可以将其与 openship-template 并排运行，实现自动化的多渠道履约，两者默认使用不同的端口和数据库，并提供了 OAuth、webhook 和部署契约的兼容性指南。模板还提供了 Vercel 和 Railway 的一键部署按钮，以及一个演示站点，方便快速体验。

需要注意的是，模板虽然声称“生产就绪”，但实际部署时仍需自行配置支付密钥、数据库连接等环境变量，并仔细阅读文档以确保安全性和合规性。此外，AI 助手功能依赖 MCP，其实际效果和权限控制需在真实环境中验证。

Next.js电商启动器

适合你的项目吗？

适用场景

需要快速搭建自托管电商平台的中小型项目
希望基于 Openfront 进行二次开发的团队
需要与 Openship 集成实现自动化订单履约的电商项目
作为学习 Next.js + KeystoneJS 全栈开发的参考模板

适合人群

熟悉 JavaScript/TypeScript 和 React 的开发者
需要完整电商功能（支付、物流、多区域）的项目
偏好自托管或使用 Docker 部署的团队
希望保留上游更新同步的模板用户

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆后需复制 .env.example 为 .env，配置 DATABASE_URL 和 SESSION_SECRET（至少32字符），并可选配置支付、物流、存储等密钥。
2
运行 docker compose up -d postgres 启动数据库，然后 npm ci 和 npm run dev。
3
首次访问 /dashboard/init 创建管理员，再通过引导流程设置店铺。
4
部署前请核对环境变量和文档。

查看仓库使用说明