”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 使用 Next.js 构建电子商务

使用 Next.js 构建电子商务

发布于2024-10-31
浏览:628

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]删除
最新教程 更多>
  • Go 和 Python 之间的 gRPC 通信
    Go 和 Python 之间的 gRPC 通信
    gRPC 是一个功能强大、高性能的远程过程调用 (RPC) 框架,尽管不如 REST 常用,但在某些场景中提供了显着的优势。 此外,它与语言无关,可以在任何环境中运行,使其成为服务器到服务器通信的理想选择。 我不会深入研究它的完整解释,但这里是 gRPC 的一般链接。我将提供实践教程 ...
    编程 发布于2024-11-08
  • CSS 定位中的position:sticky 和position:fixed 有何不同?
    CSS 定位中的position:sticky 和position:fixed 有何不同?
    浏览 CSS 定位的细微差别:揭开position:sticky 和position:fixed理解 CSS 定位的复杂性可能具有挑战性,尤其是对于 CSS 新手。经常出现的一个特殊困境是position:sticky 和position:fixed 之间的区别。本文深入探讨了显着差异,为那些寻求更...
    编程 发布于2024-11-08
  • 如何使用 JavaScript 将大字符串拆分为 N 大小的块?
    如何使用 JavaScript 将大字符串拆分为 N 大小的块?
    在 JavaScript 中将大字符串拆分为 N 大小的块要有效地将大字符串拆分为大小为 N 的较小块,您可以使用JavaScript 中的 String.prototype.match 方法。此方法使您能够将正则表达式模式应用于字符串并提取匹配的子字符串。使用 String.prototype.m...
    编程 发布于2024-11-08
  • 如何在 C++ 中不使用 getline() 将文件字节读入字符数组?
    如何在 C++ 中不使用 getline() 将文件字节读入字符数组?
    How to Retrieve File bytes into a Char Array in C 要在不使用 getline() 的情况下将文件字节读入 char 数组,请考虑使用 ifstream::read()。请按照下列步骤操作:打开文件:std::ifstream infile("...
    编程 发布于2024-11-08
  • 以下是一些符合条件的标题选项:

**选项 1(关注问题):**

* **如何在 Python 中创建真正不可变的对象:超越基础**

**选项 2(突出显示解决方案)
    以下是一些符合条件的标题选项: **选项 1(关注问题):** * **如何在 Python 中创建真正不可变的对象:超越基础** **选项 2(突出显示解决方案)
    Python 中的不可变对象:超越基本解决方案虽然标准元组类提供了不可变性,但本文探讨了创建不可变对象的更高级技术重写 __setattr__:一种有限的方法一个常见的解决方案是重写 setattr 方法。但是,即使在 init 函数中,这也会阻止属性设置。因此,它可能并不适合所有场景。子类化元组:...
    编程 发布于2024-11-08
  • Spring Boot:如何解决跨源问题
    Spring Boot:如何解决跨源问题
    跨源问题描述 您可能会遇到以下错误消息: 被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头 此错误表示对某个地址的请求已被 CORS 协议阻止,因为资源中缺少 Access-Control-Allow-Origin 标头。 ...
    编程 发布于2024-11-08
  • 处理日期和时区转换:为什么正确的 UTC 转换很重要
    处理日期和时区转换:为什么正确的 UTC 转换很重要
    在检索选定日期范围内的数据时,我们注意到我们的计算存在一定偏差。然而,当我们将日期减少一天时,数据完全匹配! 嗯……我们的代码中处理日期的方式可能存在问题。也许时区处理不正确——是的,我是对的! 当构建涉及来自不同时区的用户的应用程序时,正确处理日期可能很棘手。在 UTC 中存储日期是确保一致性的...
    编程 发布于2024-11-08
  • gRPC:你住在哪里?你吃什么?
    gRPC:你住在哪里?你吃什么?
    A primeira vez que ouvi falar sobre RPC foi em uma aula de sistema distribuídos, ainda quando estava cursando a graduação em Ciência da Computação. Ac...
    编程 发布于2024-11-08
  • 如何为 3D 模型实现平滑的切线空间法线?
    如何为 3D 模型实现平滑的切线空间法线?
    如何实现平滑的切线空间法线修复由于切线、副法线的每面计算而导致的模型的多面外观,和法线向量,必须考虑模型预先提供的法线。每顶点法线平均第一种方法涉及计算每面法线和将其分布在形成面的顶点之间。每个顶点维护一个初始值为零的累加器向量,并且将面法线的 X、Y 和 Z 分量添加到每个涉及顶点的累加器中。此外...
    编程 发布于2024-11-08
  • 通过简单示例了解 JavaScript 中的调用、应用和绑定
    通过简单示例了解 JavaScript 中的调用、应用和绑定
    通过简单示例了解 JavaScript 中的调用、应用和绑定 使用 JavaScript 时,您可能会遇到三种强大的方法:调用、应用和绑定。这些方法用于控制函数中 this 的值,从而更轻松地处理对象。让我们通过简单的示例来分解每种方法,以了解它们的工作原理。 1....
    编程 发布于2024-11-08
  • 大括号放置对 JavaScript 执行有什么影响?
    大括号放置对 JavaScript 执行有什么影响?
    大括号放置和 JavaScript 执行在 JavaScript 中,大括号的放置可以显着改变代码的行为和输出。如提供的代码片段所示,大括号位置的单个更改可能会导致截然不同的结果。自动分号插入和未定义返回当左大括号时被放置在一个新行上,如第一个代码片段中一样,自动分号插入开始。这是 JavaScri...
    编程 发布于2024-11-08
  • 学习弹性搜索
    学习弹性搜索
    Elasticsearch 是一个基于 Apache Lucene 库构建的强大开源搜索和分析引擎。它旨在处理大量数据并有效执行复杂的搜索。 Elasticsearch 的主要特性和功能包括: 分布式架构:Elasticsearch是一个分布式系统,可以水平扩展以处理大量数据和流量。 近实时搜索:E...
    编程 发布于2024-11-08
  • 股息率:基于Python的金融项目的重要指标
    股息率:基于Python的金融项目的重要指标
    股息率:基于Python的金融项目的重要指标 在财务分析领域,股息对许多投资者来说非常重要。特别是如果您正在开发一个处理财务数据或自动化投资策略的Python项目,计算和分析股息率可能是一个关键要素。这篇关于股息率的 Rankia 文章详细解释了该利率的运作方式以及为什么它对投资者...
    编程 发布于2024-11-08
  • 如何通过并行或分布式测试在多个浏览器中执行WebUI功能文件?
    如何通过并行或分布式测试在多个浏览器中执行WebUI功能文件?
    使用并行或分布式测试在多个浏览器中执行 WebUI 功能文件使用并行测试对多个浏览器 (Zalenium) 执行 WebUI 功能文件运行器或分布式测试,使用以下方法:并行运行器和场景大纲:使用场景大纲创建一个表,其中的行代表不同的浏览器配置。向 Karate-config.js 文件添加并行运行器...
    编程 发布于2024-11-08
  • 如何使用 CSS 自定义文本下划线颜色?
    如何使用 CSS 自定义文本下划线颜色?
    使用 CSS 自定义文本下划线颜色在网页设计中,为文本添加下划线是强调或突出显示信息的常见做法。但是,如果您想通过更改下划线的颜色来添加独特的触感该怎么办?这可能吗?是的,可以使用 CSS 更改文本下方线条的颜色。您可以使用以下两种方法:方法 1:使用 text-decoration-color最直...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3