Next.jsReact电商启动器

scalev-storefront-starter — Next.js 电商模板

作者 ramadhanidiwanda-alt

基于 Next.js 与 Scalev Storefront API 的电商店面启动模板，包含商品、购物车、结账与订单跟踪等前台页面。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

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

采集于 2026-10-01查看来源

值得关注的模板亮点

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

01

前端基于 Next.js App Router 与 TypeScript 构建

02

使用 Tailwind CSS 与 shadcn/ui 组织界面组件

03

通过 Scalev Storefront API 获取商品与订单数据

04

包含商品、购物车、结账与订单跟踪页面

05

提供客户登录与注册功能

06

附带环境变量示例与安装、安全等说明文档

模板详细介绍

这是一个电商店面启动模板，前端使用 Next.js（App Router）与 TypeScript 构建，样式基于 Tailwind CSS，界面组件来自 shadcn/ui，状态管理使用 Zustand。商品、购物车、结账与订单跟踪等数据通过 Scalev Storefront API 获取，因此需要自行准备 Scalev 账号、Store ID 与 Storefront API Key 才能运行。

模板覆盖的页面范围包括商品浏览、购物车、结账流程、订单跟踪，以及客户登录与注册。仓库提供了环境变量示例文件、安装与启动命令，并附有安装指南、快速上手、安全与贡献说明等文档。

使用限制方面：代码采用 MIT 许可，可免费使用、修改、商用与分发，但需保留版权与许可声明；演示图片、字体、图标等第三方素材需按各自许可单独核对。域名、托管、数据库或支付等外部服务可能另行收费。模板本身不包含后端实现，业务数据依赖 Scalev 服务。

Next.jsReact电商启动器

适合你的项目吗？

适用场景

  • 需要快速搭建 Scalev 电商前台的店铺
  • 已有 Scalev 账号并希望替换现有店面前端
  • 用于学习 Next.js App Router 与外部电商 API 的集成方式

适合人群

  • 使用 Scalev 作为电商后端的商家或开发者
  • 熟悉 Next.js 与 TypeScript 的前端开发者
  • 需要可自由修改的 MIT 许可电商前端代码的团队

上手与定制指南

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

  1. 1

    需要 Node.js 18 及以上版本

  2. 2

    需注册 Scalev 账号并获取 Store ID 与 Storefront API Key

  3. 3

    复制 .env.example 为 .env.local 并填入上述凭据

  4. 4

    运行 npm install 安装依赖，npm run dev 启动开发服务器

  5. 5

    部署到 Vercel 或其他平台时需配置相同的环境变量

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 运行模板需要注册 Scalev 账号，属于外部服务依赖，账号注册可能涉及服务条款与费用。
  • 必须自行获取 Scalev 的 Store ID 与 Storefront API Key 才能连接数据，缺少凭据则无法正常使用。
  • 需在环境变量中配置 Scalev Storefront API Key，密钥由外部服务提供。
  • 商品、购物车、结账与订单数据依赖 Scalev Storefront API，模板不含后端实现，需依赖该外部服务。
  • 核心电商能力由第三方 Scalev API 提供，使用受其服务条款与可能的费用约束。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Scalev account ([Sign up](https://dashboard.scalev.com))

README 原文

Store ID and Storefront API Key

README 原文

NEXT_PUBLIC_SCALEV_STOREFRONT_API_KEY=your_api_key

README 原文

Powered by [Scalev Storefront API v3](https://scalev.com)

README 原文

- [Scalev](https://scalev.com) - E-commerce API

README 原文
https://github.com/ramadhanidiwanda-alt/scalev-storefront-starter/blob/main/LICENSEhttps://github.com/ramadhanidiwanda-alt/scalev-storefront-starter/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 85 / 100
技术栈
Next.js · React
网站类型
电商 · 启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-05-29
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 30622e602e229285c6ec90ea92bee44c2a4a7a8a7ccc1ed3f373943212092a60

2026-10-01T01:31:39.497Z

来源文件 / 仓库
# 🛍️ Scalev Storefront Starter

[![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Next.js](https://img.shields.io/badge/Next.js-16.2-black)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.0-38bdf8)](https://tailwindcss.com/)

Production-ready e-commerce storefront template built with Next.js 16, TypeScript, Tailwind CSS 4, and shadcn/ui. Powered by [Scalev Storefront API v3](https://scalev.com).

## ✨ Features

- 🛒 **Complete E-commerce**: Products, Cart, Checkout, Order Tracking
- 🎨 **Modern UI**: Meta/Facebook Blue theme with shadcn/ui components
- 🔐 **Authentication**: Customer login & registration
- 📦 **Order Management**: Real-time order tracking
- 🚀 **Performance**: Next.js 16 with Turbopack
- 📱 **Responsive**: Mobile-first design
- 🎯 **Type-safe**: Full TypeScript support
- 🔒 **Secure**: Environment-based configuration

## 🚀 Quick Start

### Prerequisites

- Node.js 18+ 
- Scalev account ([Sign up](https://dashboard.scalev.com))
- Store ID and Storefront API Key

### Installation

```bash
# Clone repository
git clone https://github.com/YOUR_USERNAME/scalev-storefront-starter.git
cd scalev-storefront-starter

# Install dependencies
npm install

# Setup environment
cp .env.example .env.local

# Add your Scalev credentials to .env.local
# NEXT_PUBLIC_SCALEV_STORE_ID=your_store_id
# NEXT_PUBLIC_SCALEV_STOREFRONT_API_KEY=your_api_key

# Run development server
npm run dev
```

Open [http://localhost:3000](http://localhost:3000)

## 📖 Documentation

- [Setup Guide](SETUP_GUIDE.md) - Detailed setup instructions
- [Quick Start](QUICK_START.md) - Get started in 5 minutes
- [Security](SECURITY.md) - Security best practices
- [Contributing](CONTRIBUTING.md) - How to contribute

## 🏗️ Tech Stack

- **Framework**: Next.js 16 (App Router)
- **Language**: TypeScript 5
- **Styling**: Tailwind CSS 4
- **UI Components**: shadcn/ui
- **State Management**: Zustand
- **API**: Scalev Storefront API v3
- **Fonts**: Rubik, Nunito Sans

## 📁 Project Structure

```
scalev-storefront-starter/
├── src/
│   ├── app/              # Next.js app router pages
│   ├── components/       # React components
│   ├── lib/
│   │   ├── api/         # Scalev API client
│   │   └── stores/      # Zustand stores
│   └── styles/          # Global styles
├── .env.example         # Environment template
├── .env.local          # Your credentials (gitignored)
└── ...
```

## 🔐 Environment Variables

Required variables in `.env.local`:

```bash
NEXT_PUBLIC_SCALEV_API_BASE=https://api.scalev.com
NEXT_PUBLIC_SCALEV_STORE_ID=your_store_id
NEXT_PUBLIC_SCALEV_STOREFRONT_API_KEY=your_api_key
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_SITE_NAME=Your Store Name
```

## 🚢 Deployment

### Vercel (Recommended)

1. Push to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

### Other Platforms

```bash
npm run build
npm start
```

## 🤝 Contributing

Contributions welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) first.

## 📄 License

MIT License - see [LICENSE](LICENSE) file

## 🙏 Acknowledgments

- [Scalev](https://scalev.com) - E-commerce API
- [shadcn/ui](https://ui.shadcn.com) - UI components
- [Vercel](https://vercel.com) - Hosting platform

## 📞 Support

- 📖 [Scalev Documentation](https://docs.scalev.com)
- 💬 [GitHub Issues](https://github.com/YOUR_USERNAME/scalev-storefront-starter/issues)
- 📧 [Scalev Support](https://scalev.com/support)

---

**Made with ❤️ for the Scalev community**
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

ai-website-cloner-template

ai-website-cloner-template

Clone any website with one command using AI coding agents

Next.js · 启动器

Next.js SaaS Starter

Next.js SaaS Starter

Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板，定位介于学习资源和可直接部署的脚手架之间。

Next.js · SaaS

Next.js Commerce

Next.js Commerce

Next.js Commerce 是 Vercel 团队维护的电商启动模板，基于 Next.js App Router 构建，采用服务端渲染、React Server Components、Server Actions …

Next.js · 电商

Next-js-Boilerplate

Next-js-Boilerplate

Next-js-Boilerplate 是一个面向 Next.js 16、Tailwind CSS 4 和 TypeScript 的启动器，核心定位是开发者体验优先。

Next.js · 启动器

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…

Next.js · 博客

next-forge

next-forge

Production-grade Turborepo template for Next.js apps.

Next.js · 启动器