」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 使用 Next.js 建立電子商務

使用 Next.js 建立電子商務

發佈於2024-10-31
瀏覽:491

Building eCommerce with Next.js

身為開發人員,我不想受到 Shopify 範本的限制,但也不想在自訂應用程式中使用他們的店面 API。我想擁有一個完全可自訂的解決方案,我可以按照我想要的方式進行調整。從ui/ux、db、後端、api、身份驗證、devops 等。因此,我使用 React、Next.js、MongoDB 和 Stripe 建立了一個完全可自訂的支付解決方案。

您可以在這裡找到演示連結:https://wexcommerce.dynv6.net:8002

原始碼在這裡:https://github.com/aelassas/wexcommerce

透過以下解決方案,您可以透過將其託管在具有至少1GB RAM 的Docker Droplet 上,以非常低的成本建立一個針對SEO 進行優化的完全可自訂的電子商務網站,並使用可操作的Stripe支付網關。

此解決方案由前端和管理儀表板組成。從前端,客戶可以搜尋他們想要的產品,將其添加到購物車並結帳。客戶可以透過 Google、Facebook、Apple 或電子郵件註冊,並使用信用卡、貨到付款、電匯、PayPal、Google Pay、Apple Pay、Link 或其他 Stripe 付款方式付款。登入後,他們可以存取其購買歷史記錄並執行訂單。在管理儀表板中,管理員可以管理訂單、付款、產品、類別、客戶和常規設置,例如預設語言、貨幣、交貨、運輸和接受的付款方式。

由於 TypeScript 具有眾多優點,因此做出了使用 TypeScript 的關鍵設計決策。 TypeScript 提供強大的類型、工具和集成,從而產生高品質、可擴展、更具可讀性和可維護性的程式碼,並且易於調試和測試。

特徵

  • 庫存管理
  • 訂單管理
  • 支付管理
  • 客戶管理
  • 多種付款方式(信用卡、貨到付款、電匯、PayPal、Google Pay、Apple Pay、連結)
  • 經營 Stripe 支付網關
  • 多種配送方式(送貨上門、門市提領)
  • 多語言支援(英語、法語)
  • 多種登入選項(Google、Facebook、Apple、電子郵件)
  • 響應式後端與前端

資源

  1. 概述
  2. 安裝(自架)
  3. 安裝(Docker)
    1. Docker 映像
    2. SSL
  4. 設置條紋
  5. 從原始碼運行
  6. 演示資料庫
    1. Windows、Linux 與 macOS
    2. Docker
  7. 更改語言和貨幣
  8. 新增語言
  9. 紀錄

歡迎任何回饋。

版本聲明 本文轉載於:https://dev.to/aelassas/building-ecommerce-with-nextjs-3aa4?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 透過簡單範例了解 JavaScript 中的呼叫、應用和綁定
    透過簡單範例了解 JavaScript 中的呼叫、應用和綁定
    透過簡單範例了解 JavaScript 中的呼叫、應用和綁定 使用 JavaScript 時,您可能會遇到三種強大的方法:呼叫、應用和綁定。這些方法用於控制函數中 this 的值,從而更輕鬆地處理物件。讓我們透過簡單的範例來分解每種方法,以了解它們的工作原理。 1...
    程式設計 發佈於2024-11-08
  • 大括號放置對 JavaScript 執行有什麼影響?
    大括號放置對 JavaScript 執行有什麼影響?
    大括號放置和 JavaScript 執行在 JavaScript 中,大括號的放置可以顯著改變程式碼的行為和輸出。如提供的程式碼片段所示,大括號位置的單一變更可能會導致截然不同的結果。 自動分號插入和未定義返回當左大括號時被放置在一個新行上,如第一個程式碼片段一樣,自動分號插入開始。這是 JavaS...
    程式設計 發佈於2024-11-08
  • 學習彈性搜尋
    學習彈性搜尋
    Elasticsearch 是一個基於 Apache Lucene 函式庫所建構的強大開源搜尋和分析引擎。它旨在處理大量數據並有效執行複雜的搜尋。 Elasticsearch 的主要功能與功能包括: 分散式架構:Elasticsearch是一個分散式系統,可以水平擴展以處理大量資料和流量。 近距...
    程式設計 發佈於2024-11-08
  • 股息率:基於Python的金融項目的重要指標
    股息率:基於Python的金融項目的重要指標
    股息率:基於Python的金融項目的重要指標 在財務分析領域,股利對許多投資人來說非常重要。特別是如果您正在開發一個處理財務數據或自動化投資策略的Python專案,計算和分析股息率可能是關鍵要素。這篇關於股息率的 Rankia 文章詳細解釋了該利率的運作方式以及為什麼它對投資者如此...
    程式設計 發佈於2024-11-08
  • 如何透過平行或分散式測試在多個瀏覽器中執行WebUI功能檔?
    如何透過平行或分散式測試在多個瀏覽器中執行WebUI功能檔?
    使用平行或分散式測試在多個瀏覽器中執行WebUI 功能檔案使用並行測試對多個瀏覽器(Zalenium ) 執行WebUI 功能檔案執行器或分散式測試,使用下列方法:並行運行器和場景大綱:使用場景大綱建立一個表格,其中的行代表不同的瀏覽器配置。 在 Karate-config.js 檔案中新增並行運行...
    程式設計 發佈於2024-11-08
  • SOAP 與 REST API:了解主要差異
    SOAP 與 REST API:了解主要差異
    在 Web 服務領域,SOAP(簡單物件存取協定)和 REST(表述性狀態傳輸)是兩種廣泛使用的(soap 與 Rest API)架構。兩者都用作系統之間的通訊協議,但它們在設計、使用和性能方面存在顯著差異。了解這些差異對於開發人員和企業在選擇適合其需求的正確解決方案時至關重要。 什麼是 SOA...
    程式設計 發佈於2024-11-08
  • 如何使用 CSS 自訂文字下劃線顏色?
    如何使用 CSS 自訂文字下劃線顏色?
    使用 CSS 自訂文字下劃線顏色在網頁設計中,為文字添加下劃線是強調或突出顯示訊息的常見做法。但是,如果您想透過更改下劃線的顏色來添加獨特的觸感該怎麼辦?這可能嗎? 是的,可以使用 CSS 來變更文字下方線條的顏色。您可以使用以下兩種方法:方法 1:使用 text-decoration-color方...
    程式設計 發佈於2024-11-08
  • 在 JavaScript 中實現點擊劫持防禦技術
    在 JavaScript 中實現點擊劫持防禦技術
    点击劫持等复杂攻击的出现使安全成为当今网络世界的首要问题。通过欺骗消费者点击与他们最初看到的内容不同的内容,攻击者部署了一种名为“点击劫持”的邪恶方法,这可能会带来灾难性的后果。此类攻击有可能诱骗人们下载恶意软件、发送私人信息,甚至做他们无意的事情,例如购买任何东西。为了防止此类攻击,JavaScr...
    程式設計 發佈於2024-11-08
  • 為什麼我的浮動 Div 不調整後續 Div 的大小?
    為什麼我的浮動 Div 不調整後續 Div 的大小?
    Float 不調整Div 大小之謎當使用CSS float 時,假設後續元素將左對齊而不是流到新的元素上線。然而,在某些情況下,例如提供的範例,下面的 div 繼續跨越整個寬度,而不是從第一個 div 的右側開始。 為了理解這種行為,我們深入研究 float 的複雜性定位。當元素浮動時(在本例中為 ...
    程式設計 發佈於2024-11-08
  • 使用 PYTHON 將資料導入 MYSQL
    使用 PYTHON 將資料導入 MYSQL
    介紹 手動將資料匯入資料庫,尤其是當資料庫中有多個表格時,不僅很煩人,而且還很耗時。透過使用 python 庫可以使這變得更容易。 從kaggle下載繪畫資料集。繪畫資料集由 8 個 csv 檔案組成,我們將使用簡單的 python 腳本將其匯入到資料庫中,而不是手動將資料匯入到...
    程式設計 發佈於2024-11-08
  • MySQL 基本運算子及其應用
    MySQL 基本運算子及其應用
    MySQL 運算子是開發人員的關鍵工具,可實現精確的資料操作和分析。它們涵蓋了一系列功能,包括賦值、資料比較和複雜模式匹配。無論您是處理 JSON 資料還是根據條件過濾記錄,了解這些運算子對於高效的資料庫管理都至關重要。 本指南介紹了最重要的MySQL運算符,並透過實際範例示範如何使用它們,使開發...
    程式設計 發佈於2024-11-08
  • 如何測驗 Cron 作業:完整指南
    如何測驗 Cron 作業:完整指南
    Cron 作业在许多系统中对于调度任务、自动化流程和按指定时间间隔运行脚本至关重要。无论您是维护 Web 服务器、自动备份还是运行例行数据导入,cron 作业都能让您的操作顺利运行。但与任何自动化任务一样,它们必须经过彻底测试以确保可靠性和准确性。 在本文中,我们将探讨如何有效地测试 cron 作...
    程式設計 發佈於2024-11-08
  • Next.js 中間件簡介:它如何運作並提供範例
    Next.js 中間件簡介:它如何運作並提供範例
    我們來談談Nextjs中的路由。今天,我們來談談最強大的事物中間件之一。 Nextjs 中的中間件提供了一種強大且靈活的方法來攔截來自伺服器的請求並控制請求流(重定向、URL 重寫)並全域增強身份驗證、標頭、cookie 持久性等功能。 建立中介軟體 讓我們建立 Middlewar...
    程式設計 發佈於2024-11-08
  • 道具基礎:第 1 部分
    道具基礎:第 1 部分
    這是一個關於如何使用道具的初學者友好教學。在閱讀之前了解什麼是解構以及如何使用/創建元件非常重要。 Props,properties的縮寫,props允許我們從父元件向子元件發送訊息,還需要注意的是它們可以是任何資料類型。 必須了解為任何元件建立 prop 的語法。在 React 中,您必須使用...
    程式設計 發佈於2024-11-08
  • Hibernate 與 Spring Boot 有何不同?
    Hibernate 與 Spring Boot 有何不同?
    Hibernate 與 Spring Boot 有何不同? Hibernate 和 Spring Boot 都是 Java 生態系中流行的框架,但它們有不同的用途並具有不同的功能。 休眠 Hibernate 是一個物件關聯映射 (ORM) 框架,它允許開發人員使用...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3