电商前端模板

Medusa Next.js Starter Template是一个结合了Medusa电商后端模块和Next.js 15特性的高性能电商前端模板,支持产品展示、购物车、结账、用户账户等功能。

  • by JohnThePenguin
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 JohnThePenguin/medusajs-mcp-shop-storefront

使用说明

Medusa Next.js Starter Template

Combine Medusa's modules for your commerce backend with the newest Next.js 15 features for a performant storefront.

先决条件

要使用 Next.js 起步模板你应该在本地端口9000上运行一个Medusa服务器。 为了快速设置,请运行:

npx create-medusa-app@latest

办理退房 创建 Medusa 应用文档 如需更多详情和故障排除方法,请参阅。

概述

Medusa Next.js 启动模板是基于以下技术构建的:

特点包括:

  • 全面的电子商务支持:
    • 产品详情页
    • 产品概览页面
    • 产品系列
    • 购物车
    • 使用Stripe结账
    • 用户账户
    • 订单详情
  • 全面支持 Next.js 15:
    • App 路由器
    • 接下来获取/缓存
    • 服务器组件
    • 服务器操作
    • 流媒体传输
    • 静态预渲染

快速入门

设置环境变量

导航至您的项目目录,并准备好您的环境变量:

cd nextjs-starter-medusa/
mv .env.template .env.local

安装依赖项

使用 Yarn 安装所有依赖项。

yarn

开始开发

现在你已经准备好启动你的项目了。

yarn dev

打开代码并开始自定义

您的网站现在正在 http://localhost:8000 上运行!

支付集成

默认情况下,此启动器支持以下支付集成方式

为了启用这些集成,您需要在您的(系统/应用中)添加以下内容 .env.local 文件:

NEXT_PUBLIC_STRIPE_KEY=<your-stripe-public-key>

您还需要在您的Medusa服务器上设置集成。请参阅 美杜莎(Medusa)文档 如需有关如何配置的更多信息 Stripe(条纹,或特指一家名为Stripe的支付处理平台公司).

资源

了解更多关于美杜莎的信息

了解更多关于Next.js的信息