Next Js Commerce - 概述和指南

作為開發人員，我們有這種不屈不撓的需要追隨最新的技術。 我們被這種永不滿足的渴望所驅使，學習一切，絕對是一切，關於每一項重大的創新技術。 我們渴望獲得對未來的獨家一瞥——這種渴望讓我們繼續前進。 我們對最新電子商務技術的追求將我們引向了 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 是用 TypeScript 編寫的，因此它提供了完整的支持。

• 預取

  自動獲取頁面資源的鏈接組件支持預取道具——甚至是自動代碼吐出的。

• 混合應用

  可以使用 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步：

登錄 Vercel 帳戶後，您將能夠看到帶有下拉列表的 Clone Git Repository 對話框。 選擇您的 Vercel 帳戶並在提供的字段中輸入您的項目名稱，然後點擊繼續。

第 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 提供程序，您就差不多完成了 - 將啟動部署。

包起來

無頭電子商務時代已經到來。 傳統的電子商務網站開發主要集中在通過精心設計的前端和後端提供全棧體驗。 這有助於商店快速啟動他們的應用程序。 但是，很快您就會遇到性能問題——最重要的是，您將無法隨心所欲地擴展。 但是對於無頭電子商務，您不必費力。

無頭設計使您可以自由地從頭開始設計自己的前端或使用預先構建的前端。 您將能夠快速響應市場變化並相應地定制客戶體驗。 最重要的是——您可以在不篡改後端的情況下對前端進行更改。 現在您知道為什麼，作為開發人員，我們確信電子商務的未來肯定是無頭的。