Next Js Commerce - 概述和指南

已发表: 2021-07-01

作为开发人员，我们有这种不屈不挠的需要追随最新的技术。我们被这种永不满足的渴望所驱使，学习一切，绝对是一切，关于每一项重大的创新技术。我们渴望获得对未来的独家一瞥——这种渴望让我们继续前进。我们对最新电子商务技术的追求将我们引向了 Next Commerce。

Next Commerce 是 BigCommerce 与 Next.js 和 Vercel 团队合作推出的最新产品。借助 Next Commerce，电子商务开发人员可以在几分钟内安装与 BigCommerce 集成的完全无头应用程序。这是 Next 和 BigCommerce 的首次此类尝试。

无头商务可能是电子商务的未来最有可能的样子。无头商务使开发人员可以轻松设计和开发创新应用程序，进入更广阔的全球市场，并帮助电子商务商店的销售图表指向北方。

根据网站性能报告，在对 120 位电子商务高管的调查中，62% 的人认为无头商务可以显着提高转化率和客户参与度。

我们很高兴向您展示 BigCommerce 和 Next 的最新产品的安装和使用是多么的轻松和令人难以置信。此分步指南是您开始使用 Next Commerce 所需的一切。

我们将从概述开始。

Next Commerce概述

Next.js 是一个广泛使用的开源 Web 框架，您可以使用它构建自己的应用程序——服务器端渲染和使用 React 的静态应用程序。目前，该框架为我们带来了 Next.js Commerce。它是一个开发工具包，我们可以使用它来构建高性能、可定制和引人入胜的电子商务网站。与 BigCommerce 等强大的开放式 SaaS 平台一起提供，Next Commerce 的可能性和潜力是巨大的。

为什么市场走向无头电子商务？

Next.js 是构建电子商务网站的强大工具。它是一个完整且强大的架构，可以针对各种电子商务实施进行扩展、定制和配置。

尽管 Next.js 扩展了许多好处，但以下是一些重要的好处：

服务器渲染
在将 HTML 发送到客户端之前，可以在服务器端渲染 React 组件。
热代码重载
每次 Next.js 检测到更改时，页面都会重新加载。任何 URL 都会自动路由到文件系统。这不需要您具备任何配置技能。但是，您始终可以根据自己的需要进行自定义。
生态系统兼容性
Next.js 与 React、Node，当然还有 JavaScript 高度兼容。
自动拆分代码
页面只包含库和 JavaScript——没有别的。代替生成包含所有应用程序代码的单个 JavaScript，Next.js 实际上将应用程序分解为各种资源，从而使整个过程更容易。

Next Js Commerce - 概述和指南 1

打字稿支持
由于 Next.js 是用 TypeScript 编写的，因此它提供了完整的支持。
预取
Link 组件支持预取道具，它自动获取页面资源——甚至是自动代码吐出的资源。
混合应用
可以使用 Next.js 在单个项目中同时使用 SSR 和静态 Web 应用程序。
无需配置
这个生产就绪框架非常适合试图为电子商务商店提供可扩展性和易用性的工程团队。它带有自动编译和捆绑、内置 CSS 支持、文件系统路由、自动代码拆分和 API 创建。

如何部署的概述

现在对 Next Commerce 有了基本的了解，让我们快速进入更有趣的细节——部署。让我们从先决条件开始。 Next.js 不是很粘人，因此它具有最低要求。

先决条件

一个IDE
TypeScript 代替 JavaScript
BigCommerce API 的基本知识
/pages 和 /public 的目录。 /pages 的目录将有一个 _app.tsx 和 index.tsx
/public 的目录将包含可以静态提供的媒体。
此外，/pages 还将有电子商务商店页面及其路线。
任何 Git 提供商——无论是 Bitbucket、GitHub 还是 GitLab。
新PM

这些是 Next Commerce 功能的基本要求。您以后可以随时重新组织其余目录。

包和配置

除了 NPM 和 Yarn，Next Commerce 运行还使用 .env 和 .config 文件来启动。

为了使应用程序正常工作，您需要使用 BigCommerce Storefront Data Hooks 包。 Hooks 可以根据组件的需要重复使用。您可以在 /components 目录中找到组件，并将这些组件呈现到页面。从钩子到组件和页面的链接需要来自店面的大量数据。如果您不想在开发人员成本上花费一大笔钱，您可以轻松利用 BigCommerce Storefront Data Hooks 包来发挥您的优势。

此软件包可帮助您访问类别、重要客户数据、产品页面、详细信息等。成功安装软件包后，您可以将 .env 变量链接到 BigCommerce 店面中的适当键值对。

.env 文件会自动存储在 Vercel 中。您可以使用“vercel env pull”命令轻松拉取 .env 文件。您现在可以使用 .env.local 文件设置您的 BigCommerce 店面 API 密钥和 GraphQL 令牌。

下一步是 .config 文件配置。 tsconfig.json 让您可以为您的项目编译 JavaScript，而 next.config.js 是节点模块。许多开发人员都忽略了这一点，但如果您希望实现任何特定功能，强烈建议您这样做。

运行项目

在开发环境服务器中运行项目非常简单。您所要做的就是使用以下命令：

纱线开发或 npm 运行开发

部署

构建 Next.js Commerce 也相当容易——访问 nextjs.org/commerce 并单击 Clone and Deploy 按钮。到最后，您应该能够在 Vercel 上启动并运行您自己的应用程序 - 使用您商店的徽标。部署后，您可以根据需要自定义商店。

我们将一步一步地进行集成过程。

步骤1：

一旦你点击了 Clone and Deploy 按钮，你就可以开始使用 Vercel 和 Git 提供程序进行部署。

如果您有 Vercel 帐户，则可以使用您的凭据登录。

如果您没有 Vercel 帐户，系统会提示您使用您选择的任何 Git 提供程序创建一个帐户。

第2步：

第 3 步：

下一步是安装集成。要将您的 BigCommerce 商店连接到您的 Vercel 项目，请点击安装按钮。点击安装按钮后，您应该会看到将 BigCommerce 添加到您的 Vercel 项目屏幕。

第4步：

如果您已经拥有 BigCommerce 商店，您只需使用现有凭据登录即可集成 Vercel 和 BigCommerce。但是，如果您是 BigCommerce 的新手，请单击注册。

注册页面将指导您使用简单的表单创建开发人员沙箱。输入您的详细信息并同意所有条款和条件进行注册。当您在 BigCommerce 集成选项卡旁边看到一个蓝色复选标记时，单击继续。

第 5 步：

现在，您可以通过输入存储库名称来创建 Git 存储库。单击继续。

第 6 步：

进入 Import Project 屏幕后，您应该能够确认您的项目设置并单击 Deploy。整个部署不应超过几分钟。

部署到 Vercel 后，您将能够看到已部署站点的缩略图。

恭喜，您的项目已成功部署！

反应 + Next.js

您可以使用 Next - React 的 SSR 生成器设置您的电子商务商店，然后部署到 Vercel。使用 Crystallize 和 Next.js 样板，您可以轻松构建 Jamstack Web 开发电子商务店面。现在，我们将使用 Crystallize CLI 开发一个新项目。

在终端中键入以下命令。

npx @结晶/cli

使用此命令，您将能够添加您喜欢的样板，选择使用您自己的租户，或者选择一个演示租户并添加服务 API。

为了部署到 Vercel，您需要在计算机上安装这些基本要求。

Vercel CLI
一个 Git 提供者
至少，版本 10 Node.js
通过注册 Crystallize 成为租户

使用以下命令在开发服务器中运行项目：

纱线开发或 npm 运行开发

有了这个，您可以访问开发站点，了解应用程序结构并根据您的要求编辑页面。

为各种项目形状创建页面后，您可以开始部署到 Vercel。

同样，要将您的项目部署到 Vercel，您需要通过 Vercel Github 集成。但是，您也可以轻松地手动部署。使用命令行输入 -vercel login - 使用 Vercel 仪表板设置两个环境变量。

使用 Vercel 部署项目需要 Git 提供程序。将您的项目推送到 Git 提供程序，您就差不多完成了 - 将启动部署。

包起来

无头电子商务时代已经到来。传统的电子商务网站开发主要集中在通过精心设计的前端和后端提供全栈体验。这有助于商店快速启动他们的应用程序。但是，很快您就会遇到性能问题——最重要的是，您将无法随心所欲地扩展。但是对于无头电子商务，您不必费力。

无头设计使您可以自由地从头开始设计自己的前端或使用预先构建的前端。您将能够快速响应市场变化并相应地定制客户体验。最重要的是——您可以在不篡改后端的情况下对前端进行更改。现在您知道为什么，作为开发人员，我们确信电子商务的未来肯定是无头的。