管理API.
目录
顾客
电子邮件模板
新的
命令
订单退款
交付过程
价格清单
定价订单
参考
脚本
设置
船运
小部件
Webhooks.
构建应用程序
快速开始
指导
教程
建筑渠道
快速开始
指导
教程
新的
建筑店面
管理货币
指导
合作伙伴信息
成为合伙人
入门
POS解决方案
ERP解决方案
PIM解决方案
OMS解决方案
营销解决方案
运输解决方案
付款解决方案

Next.js Commerce快速入门指南

概述

BigCommerce提供基于云的多通道电子商务解决方案。我们还提供具有强大的设计工具和功能的主题,允许商店所有者在我们的服务器上构建和托管其店面。

无头BC

BigCommerce的灵活性也允许无头架构,将店面前端与BigCommerce后端集成的能力。一些无头设置具有提供以下优点:

  • 在不迁移数据库的情况下自定义您的前端技术
  • 在切换到BigCommerce作为电子商务发动机时保留您的遗产前端
  • 从单个BigCommerce仪表板上为多个销售渠道提供多个存储。

Next.js Commerce.

Next.js Commerce是对BigCommerce的无头融合。Next.js Commerce展示了与Next.js和Vercel团队合作创建的.JS Commerce ShowCase有多强大。与我们的Open SaaS Ecommerce Platform合作。

观看演示应用程序要了解下一个新的商业提供的强大功能集。

入门

将下一个.js商业连接到BigCommerce

要开始使用Next.js Commerce,您需要直接从Vercel部署Live Version。然后,您可以通过克隆在部署期间创建的新git存储库来源地在本地开发。以下步骤将通过此过程。

先决条件

直接从Vercel部署Next.js商务

  1. 访问nextjs.org/Commerce.然后点击克隆和部署按钮。

    克隆和部署

  2. 出现提示时,使用其中一个支持的Git提供程序登录创建Vercel帐户。您选择的Git提供商是Vercel将克隆下一个新的商务存储库。

    笔记:如果您有现有的Vercel帐户,则可以使用这些凭据登录。

    创建Vercel帐户

    使用现有的Vercel帐户登录

  3. 登录后,一个克隆git存储库对话框将出现一个到commerce repository的链接,一个选择您的Vercel帐户的下拉菜单,以及一个项目名文本域。您可以从默认值更改项目的名称,或者将其留下。点击继续继续。

    克隆git存储库

  4. 在里面安装集成对话框,单击安装ButCommerce集成旁边的按钮将您的BigCommerce商店连接到Vercel项目。

    安装BigCommerce集成

  5. 将BigCommerce添加到Vercel项目中对话将有选择报名登录

    1. 如果您是BigCommerce上的现有开发人员,请选择登录并使用现有的BigCommerce凭据整合BigCommerce和Vercel。按照屏幕上的说明将Vercel应用程序安装到BigCommerce商店。

      现有的BigCommerce商店登录按钮

      登录现有的BigCommerce商店对话

    2. 如果您是BigCommerce的新手,请选择报名创建BigCommerce Developer Sandbox商店并使用示例数据填充它。Vercel将自动将Next.js Commence连接到此沙盒商店。如果您稍后想将沙盒商店升级到直播商店,请通过呼叫联系BigCommerce1-888-248-9325

      注册BigCommerce Store按钮

      注册BigCommerce Store注册表

  6. 集成完成后,您将看到一个蓝色复选标记安装曾经是按钮。点击继续

    BigCommerce集成安装确认

  7. 在里面创建Git存储库对话框,您将看到一个确认,下一个新的商务存储库的主分支将被导入您的Vercel帐户。要完成此过程,请选择Git提供程序,并将存储库命名,您可以在其中克隆和部署到Vercel的Next.js Commerce。点击继续

    创建Git存储库对话

    创建Git存储库继续按钮

  8. 在里面进口项目对话框,确认您的Vercel项目设置,然后单击部署

    将Vercel项目导入Git存储库对话

  9. 完成部署到Vercel后,您将看到您的网站部署在缩略图图像中。

    商业部署确认对话

在Vercel部署后在本地开发

  1. 访问Vercel创建新存储库的Git提供程序。克隆本地存储库。
  2. 导航到本地克隆的项目的根目录并创建.env.template文件的副本。重命名新创建的文件.env.local并使用以下内容作为指南插入正确的环境变量:
bigcommerce_storefront_api_url.=https:// store-$ {store_id}.mybigcommerce.com / graphql bigcommerce_storefront_api_token=$ {storefront_token}bigcommerce_store_api_url.=https://api.bigcommerce.com/store/$ {store_id}bigcommerce_store_api_token.=$ {store_token}bigcommerce_store_api_client_id.=$ {store_client}
  • store_id.:您的商店ID可以从BigCommerce Store控制面板URL中检索到的格式https:// store- $ {store_id} .mybigcommerce.com / manage / dashboard

    网址中的存储ID位置

  • Store_Token | Store_Client.:有关生成商店API凭据的说明,请访问获取商店API凭据

  • StoreFront_Token.:有关如何生成StoreFront API令牌的说明,请访问创建一个令牌

  1. 一旦你救了你的.env.local.带有环境变量的文件,在存储库的根目录中打开终端。安装项目的依赖项,运行NPM安装

  2. 当依赖关系完成安装时,运行npm运行dev.在你的终端里。下一个.js将加载env.env.local.,启动本地服务器,并编译项目。

  3. 访问localhost:3000在您的浏览器中,以查看您的Next.js Commerce StoreFront在本地运行。

注意:您向Git存储库推出的任何已保存的更改将触发Vercel的重新部署。还可以通过Vercel Dashboard手动触发重新部署。

应用

商业的架构是下一个问题的标准。要进行复习或了解Next.js函数的函数,请访问下一个.js教程:https://nextjs.org/learn/basics/create-nextjs-app.

要了解商务如何在店面生成页面并更新产品信息,我们将进一步探索几个概念。

预渲染页面

Next.js的主要优点之一是您可以通过预呈现内容来实现的快速页面加载时间。默认情况下,Next.js预先渲染所有页面。

Next.js允许您选择页面如何预先呈现:

  • 静态生成:Next.js在构建时间和每个请求上生成HTML。
  • 服务器端呈现:Next.js在每个请求上生成HTML。

Next.js Commerce静态生成页面,同时使用增量静态再生更新存储信息。

静态页面生成

Next.js通过调用静态内容getStaticProps ()在服务器端构建时的功能。自从getStaticProps ()不在客户端运行,您可以执行Direct Database查询或运行其他功能而不将其暴露给客户端。要验证来自客户端捆绑包的Next.js,您可以使用Vercel的代码消除工具。

增量静态regen.

getStaticProps (),您仍然可以在静态生成的页面上使用动态内容。当站点流量在设定的超时时间之后触发时,增量静态再生(ISR)通过在后台重新呈现现有页面来更新它们。默认情况下,数据重新验证最多每四小时运行一次,不过您可以自定义此频率。

有关更多信息和ARR工作方式的示范,请访问Vercel静态反应演示

默认情况下,下一个.JS商务将每四个小时重新撤消和更新来自BigCommerce的产品信息。

获取和填充商店数据

下一个.JS商务用途StoreFront-Data-Hooks使用BigCommerce后端连接您的Next.js前端。该软件包包含用于使用数据的代码拆分恢复挂钩SWR.(陈旧 - 重新验证)。SWR是一层在反应钩子上,自动化缓存管理。数据可以是过度陈旧的,但SWR将始终重新获取和同步来自BigCommerce的正确数据。

StoreFront数据挂钩具有帮助程序功能,用于处理常见的用户操作,如登录,注销和注册。

SWR使用fetch以获取数据获取:Vercel / fetch:自本文获取(带重试和DNS缓存)优化用于MicroServices内部

应用程序设置

下一个SEO.

Next.js商业包括下一个SEO.插件以简化SEO设置,以便在搜索结果中正确显示下一个新的商业,并且在社交媒体上更容易分享。要了解如何配置下一个SEO设置,请访问下一个SEO Github存储库

组件造型

下一个.JS商务用途尾风用于造型组件。Next.js Commerce的根目录包含Tailwind.config.js文件,您可以在其中自定义项目的大部分造型。有关如何配置tailwind.config.js文件,请访问的更多信息Tailwind CSS - 配置

国际化的路线

Next.js支持国际化(I18N)路由和商业使用子路径路由将Locale放入URL路径中。默认情况下,Next.config.js文件具有我们英语(Zh-US)和Spanish(ES)设置为带有ZH-US设置为默认区域设置的语言环境。

I18N.{地狱['en-US''es']defaultlocale.'en-US'}

有关I18N路由的详细信息,请参阅下一个文档国际化的路线

伟德棋牌大全