Logo

菜单

发布于 2026-01-05 2 阅读
0

我如何使用 Next.js、Paystack 和 Medusa 构建一个食品电商餐厅网站 Medusa Next.js

我如何使用 Next.js、Paystack 和 Medusa 构建一个食品电商餐厅？

美杜莎

Next.js

餐饮业仍然是全球最赚钱的行业之一。由于人们依赖食物生存，餐饮业每天都能获得大量顾客，而且受国家经济的影响较小。

为您的餐厅开辟线上销售渠道，有助于您的企业触达更多无法光顾实体店的顾客，从而提升每日销售额。

在本教程中，您将学习如何使用Medusa电子商务引擎和Paystack集成来构建一个完整的食品电子商务餐厅。

该项目的完整代码位于此GitHub 存储库中。

美杜莎是什么？

GitHub 标志 medusajs /美​​杜莎

全球最灵活的电商平台。

美杜莎标志

美杜莎

文档|网站

数字商务的基石

Medusa 采用 MIT 许可证发布。 欢迎提交公关稿！

关注 @medusajs Discord聊天

入门

请访问文档以设置 Medusa 应用程序。

美杜莎是什么？

Medusa 是一个电子商务平台，内置定制框架，让您无需重新编写核心商务逻辑即可构建自定义商务应用。该框架和模块可用于构建高级 B2B 或 DTC 电商网站、市场、POS 系统、服务型企业，或任何需要基础商务功能的产品。所有商务模块均为开源，可在 npm 上免费获取。

请参阅文档，了解有关Medusa 的架构和商业模块的更多信息。

升级与集成

请遵循发行说明，使您的 Medusa 项目保持最新状态。

查看所有可用的 Medusa 集成。

社区与贡献

社区和核心团队在GitHub Discussions中提供服务，您可以在那里寻求支持、讨论路线图和分享想法。

我们的捐款指南介绍了如何捐款……


在 GitHub 上查看


Medusa为开发者提供定制化的电商基础设施。其可组合的电商引擎解决了现有电商平台面临的挑战：API 提供糟糕的开发者体验、扩展功能不足，以及实现效果不稳定且难以维护。

该解决方案以无头后端的形式提供，包含涵盖订单、产品和客户处理等核心要素的全面功能集。此外，它还提供与促销、多币种处理、RMA流程、客户群管理等相关的高级功能。有关解决方案和集成的完整概述，请参阅Medusa的文档。

如果你喜欢这篇教程，请在 GitHub 上给 Medusa 点个赞🌟

Next.js是什么？

GitHub 标志 vercel / next.js

React框架

Next.js 标志

Next.js

Vercel 标志 NPM 版本 执照 加入 GitHub 社区

入门

Next.js 被世界上一些最大的公司使用，它通过扩展最新的 React 功能并集成强大的基于 Rust 的 JavaScript 工具，使您能够创建全栈 Web 应用程序，从而实现最快的构建速度。

文档

请访问https://nextjs.org/docs查看完整文档。

社区

您可以在GitHub Discussions上找到 Next.js 社区，在那里您可以提出问题、发表想法并与其他人分享您的项目。

要与其他社区成员交流，您可以加入 Next.js Discord服务器。

请注意，我们的行为准则适用于所有 Next.js 社区渠道。强烈建议用户阅读并遵守该准则，以免受到处罚。

贡献

我们欢迎并非常感谢您对 Next.js 的贡献。不过，在您开始贡献之前，我们希望您先阅读我们的……

在 GitHub 上查看

Next.js是一个开源的 JavaScript 框架，用于使用 React 构建速度极快且极其用户友好的前端网站。它是一个服务器端渲染、轻量级且灵活的 React 框架，使用过程中几乎不需要任何配置。

使用 Medusa 商务引擎构建您的在线商店，您将有机会使用 Medusa Next.js 店面启动器，该启动器可以通过 CLI 命令轻松安装。

Medusa Next.js 店面是一个 100% 即用型的 Medusa 店面模板。它具备所有电商店面功能，例如产品展示、特色产品、购物车、结账、多种支付方式等等。

Paystack是什么？

Paystack是非洲排名第一的支付网关，帮助企业通过其电商平台、网站和应用程序接受在线支付。Paystack还提供其他服务，例如销售点（POS）系统、发票支付等。

Medusa 和 Paystack 的集成可以通过社区插件实现，您将在本教程中学习如何使用该插件。

先决条件

开始之前，请确保您已准备好以下物品：

  • Node.js（版本 14 或更高版本）
  • Paystack账户及其 API 密钥和公钥

使用 Medusa 搭建您的餐饮电商平台

要开始使用 Medusa 进行构建，请按照以下简单步骤操作：

安装 Medusa CLI

npmMedusa CLI 工具可以使用 apt或 apt安装yarn，但本教程基于 apt npm。使用以下命令安装 Medusa CLI：

npm install @medusajs/medusa-cli -g
Enter fullscreen mode Exit fullscreen mode

创建您的新餐饮店服务器

以下命令将为您创建一个新的 Medusa 商店：

medusa new my-food-restaurant --seed
Enter fullscreen mode Exit fullscreen mode

my-food-restaurant这将是您的项目名称，但您可以将其更改为您喜欢的名称。

切换到项目目录：

cd my-food-restaurant
Enter fullscreen mode Exit fullscreen mode

安装 Paystack Medusa 插件

在项目根目录下my-food-restaurant，运行以下命令安装 Medusa Paystack 插件：

npm install medusa-payment-paystack
Enter fullscreen mode Exit fullscreen mode

接下来，您需要在项目中配置 Paystack 插件。为此，首先将 PAYSTACK SECRET KEY 添加到您的.env文件中：

PAYSTACK_SECRET_KEY=example_key_xxxxx
Enter fullscreen mode Exit fullscreen mode

在上述内容中，请替换为从您的Paystack API 密钥example_key_xxxxx中获取的密钥。

在medusa-config.js数组末尾添加以下内容plugins：

{
    resolve: `medusa-payment-paystack`,
    options: {
      secret_key: process.env.PAYSTACK_SECRET_KEY,
    },
  },
Enter fullscreen mode Exit fullscreen mode

以上代码片段将 Medusa Paystack 插件添加到您的项目配置中。

安装 MinIO Medusa 插件

在 Medusa 中管理图片需要一个文件服务插件来上传产品图片。Medusa 提供了多种处理产品图片上传的选项，但本教程将仅重点介绍如何使用MinIO文件服务插件。

MinIO是一款高性能的开源对象存储解决方案，提供 S3 存储功能。您可以参考此文档了解如何安装并创建存储桶。

使用以下命令在 Medusa 服务器目录中安装 MinIO 插件：

npm install medusa-file-minio
Enter fullscreen mode Exit fullscreen mode

接下来，将以下代码块添加到您的文件中.env：

MINIO_ENDPOINT=<ENDPOINT>
MINIO_BUCKET=<BUCKET>
MINIO_ACCESS_KEY=<ACCESS_KEY>
MINIO_SECRET_KEY=<SECRET_KEY>
Enter fullscreen mode Exit fullscreen mode

注意：<ENDPOINT>是您的 MinIO 服务器的 URL，<BUCKET>是您之前创建的存储桶的名称，和<ACCESS_KEY>是<SECRET_KEY>您在上一节中生成的密钥。

最后，在medusa-config.js数组末尾添加以下内容plugins：

{
    resolve: `medusa-file-minio`,
    options: {
        endpoint: process.env.MINIO_ENDPOINT,
        bucket: process.env.MINIO_BUCKET,
        access_key_id: process.env.MINIO_ACCESS_KEY,
        secret_access_key: process.env.MINIO_SECRET_KEY,
    },
  },
Enter fullscreen mode Exit fullscreen mode

如果您已完成上述步骤，请使用以下命令启动您的商店服务器：

medusa develop
Enter fullscreen mode Exit fullscreen mode

您可以导航至localhost:9000/store/products/查看您商店中的可用产品。

为您的餐饮餐厅创建 Medusa 管理后台

要设置您的 Medusa 管理员帐户，请按照以下步骤操作。

  1. 克隆 Medusa Admin 代码库并切换到新创建的文件夹：
git clone https://github.com/medusajs/admin medusa-admin
cd medusa-admin
Enter fullscreen mode Exit fullscreen mode
  1. 运行以下命令安装所有必要的依赖项：
npm install
Enter fullscreen mode Exit fullscreen mode
  1. 测试一下：

（注：请确保您的 Medusa 商店服务器正在运行，然后再测试您的管理后台。）

npm start
Enter fullscreen mode Exit fullscreen mode

默认情况下，Medusa Admin 运行在端口 8080 上。您可以在浏览器中7000访问该端口以访问您的管理页面。localhost:7000

图片描述

Medusa Server 附带管理员登录信息，包括admin@medusa-test.com电子邮件地址和supersecret密码。此演示数据是--seed在创建商店服务器时添加的。

您可以访问用户指南，了解有关 Medusa Admin 的更多信息。

将 Paystack 支付提供商添加到您的区域

餐饮企业可以是跨州或国际企业，这意味着您的店铺应该专注于向特定国家/地区销售产品。

本教程将重点介绍如何使用尼日利亚货币，因为它是 Paystack 支持的国家之一。

如果您没有向 Paystack 支持的非洲国家/地区销售产品，您可以轻松地将Medusa Stripe Payment Plugin集成到您的商店中。

要将 Paystack 添加到您的地区，请按照以下步骤设置您的商店货币；

  1. 前往“设置”⇒“货币”。

图片描述

2. 点击“商店货币”部分中的“编辑货币”按钮。

图片描述

3. 在打开的新窗口中，点击“添加货币”按钮，然后选择要添加的所有货币。

图片描述

4. 点击“保存并关闭”按钮。

注意：在完成第 4 步后，请将默认货币设置为尼日利亚奈拉。

您可以了解更多关于如何管理货币的信息。

将 Paystack 添加到您的区域：

  1. 前往设置 ⇒ 区域。

图片描述

2. 点击“区域”部分右上角的加号图标。

图片描述

3. 在打开的表单中，输入区域详细信息。您需要输入餐厅名称、选择货币、输入税率，并选择至少一个餐厅所在国家/地区、支付服务提供商（选择 Paystack）和物流服务提供商。

图片描述

完成后，点击右上角的“创建区域”按钮。

从美杜莎用户指南中了解更多关于区域的信息。

将食品产品添加到您的管理后台

Medusa Admin 支持产品管理，包括添加新产品、编辑、发布、取消发布、复制和删除产品。

默认情况下，Medusa 商店服务器预装了一些产品。您可以根据餐厅的菜单删除现有产品并添加新产品。

图片描述

请访问Medusa 产品概览页面，获取有关如何管理您商店中产品的完整用户指南。

创建 Medusa Next.js 店面

在本教程中，您将使用Medusa Next.js 店面模板来构建您的店面。

Medusa Next.js 店面模板已经包含了您在店面中可能需要的所有功能；当您选择使用 Medusa 作为您的电商引擎时，这有助于加快您的开发过程。

以下步骤将帮助您创建您的餐厅店铺：

  1. 运行以下命令创建一个新的 Next.js 入门项目：
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa food-restaurant-storefront
Enter fullscreen mode Exit fullscreen mode

food-restaurant-storefront代表您的项目名称；您可以根据需要重命名。

  1. 切换到新创建的目录food-restaurant-storefront，并重命名模板环境变量文件，以便在开发环境中使用环境变量：
cd food-restaurant-storefront
mv .env.template .env.local
Enter fullscreen mode Exit fullscreen mode

定制您的店铺

既然您已经成功创建了您的餐厅店面，您可以根据自己的喜好定制店面。

您可以在GitHub 存储库中找到本项目使用的所有图像。

修改首页横幅：找到src/modules/home/components/hero/index.tsx并替换其内容为以下代码：

import UnderlineLink from "@modules/common/components/underline-link"
import Image from "next/image"

const Hero = () => {
  return (
    <div className="h-[90vh] w-full relative">
      <div className="text-white absolute inset-0 z-10 flex flex-col justify-center items-center text-center small:text-left small:justify-end small:items-start small:p-32">
        <h1 className="text-2xl-semi mb-4 drop-shadow-md shadow-black">
          Easy Life Food Restaurant
        </h1>
        <p className="text-base-regular max-w-[32rem] mb-6 drop-shadow-md shadow-black">
          Eat heathy and Live heathy | We sale morethan just foods
        </p>
        <UnderlineLink href="/store">Food Menu</UnderlineLink>
      </div>
      <Image
        src="/h2-slide.jpg"
        layout="fill"
        loading="eager"
        priority={true}
        quality={90}
        objectFit="cover"
        alt="homepage banner"
        className="absolute inset-0"
        draggable="false"
      />
    </div>
  )
}

export default Hero
Enter fullscreen mode Exit fullscreen mode

以上代码块将更改横幅图片和文字。

其次，修改您的“特色产品”部分。为此，请找到src/modules/home/components/featured-products/index.tsx并替换其内容为以下代码：

import { useFeaturedProductsQuery } from "@lib/hooks/use-layout-data"
import UnderlineLink from "@modules/common/components/underline-link"
import ProductPreview from "@modules/products/components/product-preview"
import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"

const FeaturedProducts = () => {
  const { data } = useFeaturedProductsQuery()

  return (
    <div className="py-12">
      <div className="content-container py-12">
        <div className="flex flex-col items-center text-center mb-16">
          <span className="text-base-regular text-gray-600 mb-6">
            Enjoy More on
          </span>
          <p className="text-2xl-regular text-gray-900 max-w-lg mb-4">
            Our Today's Food Menu
          </p>
          <UnderlineLink href="/store">Food products</UnderlineLink>
        </div>
        <ul className="grid grid-cols-2 small:grid-cols-4 gap-x-4 gap-y-8">
          {data
            ? data.map((product) => (
                <li key={product.id}>
                  <ProductPreview {...product} />
                </li>
              ))
            : Array.from(Array(4).keys()).map((i) => (
                <li key={i}>
                  <SkeletonProductPreview />
                </li>
              ))}
        </ul>
      </div>
    </div>
  )
}

export default FeaturedProducts
Enter fullscreen mode Exit fullscreen mode

上面的代码片段会将默认文本更改为与您构建商店的目标相匹配的文本。

第三，修改页脚部分。为此，找到您的代码src/modules/**layout**/components/footer-cta/index.tsx并将其内容替换为以下代码：

import UnderlineLink from "@modules/common/components/underline-link"
import Image from "next/image"

const FooterCTA = () => {
  return (
    <div className="bg-gray-800 w-full">
      <div className="content-container flex flex-col-reverse gap-y-8 small:flex-row small:items-center justify-between py-16 relative">
        <div>
          <h3 className="text-3xl-semi text-white">Flavourful Flame</h3>
          <h3 className="text-2xl text-white">Grilled Chicken</h3>
          <p className="text-white">Marinated for 24 hours in our herb-infused traditional marinade, the perfectly grilled chicken on your plate is the healthiest and tastiest in town!</p>
          <div className="mt-6 text-white">
            <UnderlineLink href="/store">Order Now</UnderlineLink>
          </div>
        </div>

        <div className="relative w-full aspect-square small:w-[35%] small:aspect-[28/36]">
          <Image
            src="/more.jpg"
            alt=""
            layout="fill"
            objectFit="cover"
            className="absolute inset-0"
          />
        </div>
      </div>
    </div>
  )
}

export default FooterCTA
Enter fullscreen mode Exit fullscreen mode

以上代码块将更改背景图像和文本。

启用 Paystack 支付

要启用 Paystack 在您的店铺中接收付款，请按照以下步骤操作：

  1. 安装 React Paystack 库：
npm install react-paystack
Enter fullscreen mode Exit fullscreen mode

库安装成功后，它会将 React Paystack 包添加到您的 storefront 项目中。

  1. 将 Paystack 公钥添加到您的.env.local文件中：
NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY=pk_test_xxxxxx
Enter fullscreen mode Exit fullscreen mode

将上述内容替换为从您的Paystack API 密钥pk_test_xxxxxx中获取的密钥。

  1. 修改您的支付按钮，请将以下代码块添加到您的src/modules/checkout/components/payment-button/index.tsx文件中：
import clsx from "clsx"
import { PaystackButton } from "react-paystack"
Enter fullscreen mode Exit fullscreen mode

上述代码将从react-payment库中导入您的 Paystack 按钮，以及clsxPaystack 按钮样式库。

接下来，PaystackPaymentButton在支付会话的 switch case 中添加以下内容：

case "paystack":
      return (
        <PaystackPaymentButton notReady={notReady} session={paymentSession} />
      )
Enter fullscreen mode Exit fullscreen mode

最后，将以下代码块添加到同一文件的最后一行代码之前：

const PAYSTACK_PUBLIC_KEY = process.env.NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY || ""

const PaystackPaymentButton = ({
  session,
  notReady,
}: {
  session: PaymentSession
  notReady: boolean
}) => {
  const { cart } = useCart()
  const { onPaymentCompleted } = useCheckout()

  const txRef = String(session.data?.paystackTxRef)
  const total = cart?.total || 0
  const email = cart?.email || ""
  const currency =
    cart?.region.currency_code.toUpperCase() // Update this to your currency

  return (
    <PaystackButton
      amount={total}
      publicKey={PAYSTACK_PUBLIC_KEY}
      email={email}
      currency={currency}
      reference={txRef}
      text="Pay with Paystack"
      onSuccess={onPaymentCompleted}
      className={clsx(
        "w-full uppercase flex items-center justify-center min-h-[50px] px-5 py-[10px] text-small-regular border transition-colors duration-200 disabled:opacity-50",
        "text-white bg-[#3bb75e] border-[#3bb75e] hover:bg-white hover:text-[#3bb75e] disabled:hover:bg-gray-900 disabled:hover:text-white"
      )}
    />
  )
}
Enter fullscreen mode Exit fullscreen mode

以上代码块会将 Paystack 按钮添加到您店铺的支付选项中。

PaystackButton当用户点击您店铺页面上的结账付款按钮时，该按钮将触发付款处理。

为了确保你正确理解了以上两个代码块，你可以参考这里。

  1. 修改您的支付容器，将代码块添加到集合中PaymentInfoMap。文件路径如下src/modules/checkout/component/payment-container/index.tsx：
paystack: {
    title: "Paystack",
    description: "Secure payment with Paystack",
  }
Enter fullscreen mode Exit fullscreen mode

上述代码使得 Paystack 可以作为支付选项的一部分出现在您的店铺中。

为了确保您正确理解了上面的代码块，您可以参考这里。

测试您的店铺

请确保您的 Medusa 服务器正在运行，然后运行以下命令：

npm run dev
Enter fullscreen mode Exit fullscreen mode

如果您访问该网站localhost:8000，您将看到您的店铺首页。

图片描述

点击“食物菜单”，即可查看美杜莎服务器上的所有食物。

图片描述

点击任何食品，即可查看单个产品页面和“添加到购物车”选项。

图片描述

将商品添加到购物车后，点击“我的购物车” ，即可看到购物车页面。

图片描述

如果您点击“前往结账”，您将看到结账页面，您可以在该页面提供您的送货信息。

图片描述

如果您点击“使用 Paystack 付款”，您将看到 Paystack 付款弹出窗口：

图片描述

如果您选择“成功”并点击“付款”按钮，您的付款将被处理，您将看到订单收据页面；

图片描述

您可以在 Medusa 管理面板中确认此项目的订单。

结论

在本教程中，您学习了如何使用 Medusa 商务引擎作为您的食品餐厅电子商务商店，如何使用 Medusa 的 Next.js 店面模板以及如何将 Paystack 支付网关集成到 Medusa 中。

您可以了解更多关于如何使用 Medusa 构建出色的电子商务商店的信息；请查看Medusa 的文档以获取更多指南。

如果您对 Medusa 有任何疑问或问题，请随时通过Discord联系 Medusa 团队 。

文章来源：https://dev.to/medusajs/how-i-built-a-food-ecommerce-restaurant-with-nextjs-paystack-and-medusa-2oh0
NestJS 和项目结构——该怎么做？
如何使用 Python 和 Hug...