使用 Medusa 和 Next.js 创建您的开源电子商务商店

Medusa是一个开源的无头商务平台，通过我们以 API 为先的引擎，为工程师构建独特且可扩展的数字商务项目奠定了基础。

由于 Medusa 服务器是无头服务器，我们的入门模板可以为您提供良好的基础，让您在几分钟内即可与前端连接。

在本教程中，您将学习如何将 Medusa 服务器连接到Next.js 入门模板。如果您尚未设置 Medusa 服务器，请按照快速入门指南了解如何设置。

创建 Next.js Starter

打开终端，使用以下命令创建您的店铺实例：

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

现在您已经拥有了一个可以与您的 Medusa 服务器一起使用的店铺前端代码库。

将店铺页面链接到您的服务器

默认情况下，店面链接到服务器的 URL localhost:9000。如果需要更改，请.env在 Next.js starter 的根目录下创建一个文件，并添加一个新变量：

NEXT_PUBLIC_MEDUSA_URL=<BACKEND_URL>

请务必将此处替换<BACKEND_URL>为您的 Medusa 服务器的 URL。

更新 STORE_CORS 变量

默认情况下，店面运行在 [此处应填写[localhost:8000](http://localhost:8000)网址]，后端也使用该 URL 以避免 CORS 错误。如果您需要更改 URL 或端口，请在.envMedusa 服务器根目录下的 [此处应填写文件路径] 文件中添加以下新变量：

STORE_CORS=<STOREFRONT_URL>

请务必将替换<STOREFRONT_URL>为您店铺的网址。

开设您的店铺

要启动您的商店，首先需要运行 Medusa 服务器。在 Medusa 服务器所在的目录中运行以下命令：

npm start

然后，在存放 Next.js 商店的目录中，运行以下命令：

npm run dev

现在，打开店铺页面[localhost:8000](http://localhost:8000)（或您指定的网址/端口），您将看到您的商店和产品！

结论

使用 Medusa 将无头电商服务器与店铺前端连接起来非常简单！现在，您可以让整个服务器及其产品、购物车和结账功能正常运行。

如果您想探索 Medusa 生态系统的无限可能性，您可以在我们的文档页面上找到更多有用的资源，  这些资源可以帮助您构建出色的电商项目！

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