基于 Next.js 15 App Router 和 React 19,使用 TypeScript 开发
restaurant-storefront-starter — 其他 电商模板
作者 craveup
基于Next.js 15和CraveUp SDK的餐厅点餐前端模板,含菜单、购物车与结账流程。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。 本截图因高度限制未包含整页。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
集成 CraveUp Storefront SDK,支持实时菜单、购物车与结账交接
提供明暗主题、品牌色令牌,基于 Tailwind CSS 可快速定制
UI 组件基于 shadcn/ui 和 Radix,注重可访问性
包含粘性分类导航、特色轮播、商品对话框与抽屉、购物车侧栏等典型点餐界面
使用 Zustand 管理状态,项目结构清晰,便于扩展
模板详细介绍
restaurant-storefront-starter 是一个面向餐厅点餐场景的 Next.js 15 前端模板,由 CraveUp 团队维护。它围绕 CraveUp Storefront SDK 构建,提供实时菜单、购物车变更和结账交接能力,并内置了菜单展示、商品详情、购物车侧栏等典型电商点餐界面。项目结构清晰,组件基于 shadcn/ui 和 Radix UI,支持键盘导航和屏幕阅读器,适合作为餐厅品牌官网或独立点餐页的起点。
模板的视觉部分包含粘性分类导航、特色轮播、响应式商品卡片,以及桌面端对话框和移动端抽屉共用的商品内容组件。购物车支持数量调整、备注和结账按钮,并配有推荐位。主题通过 Tailwind 的明暗色板与品牌令牌实现,易于调整字体和颜色。项目使用 Zustand 管理状态,代码组织在 app、components、hooks、lib、store 等目录下,扩展或替换业务逻辑相对直接。
需要注意的是,该模板依赖 CraveUp 的云端服务,需要配置 NEXT_PUBLIC_CRAVEUP_API_KEY、NEXT_PUBLIC_LOCATION_ID 和 Google Maps API 密钥才能完整运行。README 声称已在多门店部署,但未提供具体案例或性能数据,上线前应自行验证与 CraveUp 服务的集成稳定性,并检查许可证状态。
适合你的项目吗?
适用场景
- 需要快速搭建餐厅在线点餐前端的开发者或团队
- 希望基于 CraveUp 平台构建品牌化点餐体验的项目
- 需要参考现代 React 技术栈(Next.js、Tailwind、shadcn/ui)实现的点餐界面
- 作为学习或内部原型,探索餐厅电商前端结构
适合人群
- 使用或计划使用 CraveUp 服务的餐厅
- 熟悉 Next.js 和 Tailwind 的前端开发者
- 需要可访问、响应式点餐界面的项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后使用 pnpm 安装依赖,复制 .env.example 为 .env.local 并填写 CraveUp API 密钥、Location ID 和 Google Maps API 密钥。
- 2
运行 pnpm dev 开始开发。
- 3
自定义品牌时替换 public/images 图片并修改 src/app/globals.css 中的颜色令牌
- 4
菜单数据通过 CraveUp 后台管理,模板会实时拉取。
- 5
部署到 Vercel 时需在项目设置中配置相同的环境变量。
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明MIT许可证允许免费使用、修改、分发和商用,仅需保留版权与许可声明。README中的品牌替换、文案调整等属技术建议,非额外授权义务。
使用时需要遵守
- 保留原作者版权声明和 MIT 许可证声明。
- 保留版权声明和许可声明于所有副本或实质性部分
额外费用与待核对事项
- README未明确说明public/images中图片素材的授权来源,第三方图片可能需自行确认
查看原文依据
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software
许可证原文
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
许可证原文
https://github.com/craveup/restaurant-storefront-starter/blob/master/LICENSEhttps://github.com/craveup/restaurant-storefront-starter/blob/HEAD/README.mdPermission is hereby granted, free of char
许可证原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-09-24。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 77 / 100
- 技术栈
- 其他
- 网站类型
- 电商 · 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-08-24
- 截图检查日期
- 2026-09-06
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 其他。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
当前版本没有可核对的编辑审核记录;旧的应用时间不代表已完成事实审核。
这条历史介绍未保存固定版本的来源快照。请对照当前仓库,发现不一致可反馈。
反馈内容错误看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

trendy-resume
trendy-resume 是一个将个人简历包装成购物网站界面的 Next.js 模板,由韩国开发者 Junho Yeo 制作。
其他 · 电商

ProjectHive
ProjectHive 是一个为 Hacktoberfest 设计的开源学习平台,核心是让开发者通过提交真实可运行的代码来学习,而不是只写文档。
其他 · 排行榜

tanstack-shadcn-admin-dashboard
Studio Admin 是一个面向现代后台界面的开源模板,技术栈选用了 TanStack Start、React 19、TypeScript 与 Tailwind CSS v4,UI 组件则基于 Shadcn UI。
其他 · 后台

BlazorShop
BlazorShop 是一个面向 .NET 10 与 Blazor 的电商起步项目,代码结构清晰,适合作为学习参考或直接用于搭建小型商店。
其他 · 后台

unipin-parody
unipin-parody 是一个模仿 Unipin 官网的电商与后台管理模板,由开发者 Ferry Hasan 出于兴趣制作,目前仍标注为开发中。
其他 · 后台

Flask-Tailwind-SAAS-Starter-Template
这是一个用 Flask 搭配 TailwindCSS 的 SaaS 起步模板,仓库作者在 README 开头直接写明「THIS TEMPLATE IS A WORK IN PROGRESS」,因此它更适合被当作一个正在成…
其他 · SaaS
