使用 Next.js 构建电商购物车

如今，无论你是经验丰富的开发人员还是完全的初学者，你都没有什么不能用 React 做的。

这主要是由于创建了诸如Next.js之类的工具，这些工具成功地简化了React前端开发。

因此，我们将探讨如何快速制作 Next.js 电子商务单页应用程序。

在下面的技术教程中，我将向您展示如何：

• 设置 Next.js 开发环境

• 创建新页面和组件

• 获取数据并导入组件

• 在 Next 中创建无服务器 API 路由

• 将购物车添加到 Next.js 应用

• 设置应用样式

但在我们讨论这个问题之前，让我们确保我们了解Next.js是什么以及它如何改善您的下一个电子商务项目。

设么是Next.js

简而言之，Next.js 是一个用于 React 应用程序的轻量级框架，它允许您轻松地在 React 中构建服务器端渲染和静态应用程序。

它吸收了 React 的所有优点，并使应用程序以优化的渲染性能运行变得更加容易。Next.js 通过多种内置配置（自动代码拆分、文件系统路由、服务器端渲染、静态文件导出和样式解决方案）来实现这一点。

相信我，当我说你可以用 Next.js 构建很多不同的东西时：

• 静态网站——我们已将其列为 2021 年顶级静态网站生成器之一。

• 渐进式 Web 应用 （PWA）

• 服务器呈现的应用程序

• 对 SEO 友好的网站——正如我们在这里所展示的那样。

• 移动应用

它由 Zeit（现为 Vercel）于 2016 年构建，并迅速获得关注，成为同类工具中最受欢迎的工具之一。它被漫威、Netflix、Uber、耐克......使用，这样的例子不胜枚举。

好吧，这一切都很棒，我真的很高兴能在这里玩 Next.js。但这对电子商务有什么好处吗？

Next.js和电子商务

与任何静态网站生成器或 JavaScript 框架一样，与更传统的电子商务平台相比，它最显着的优势之一是它为开发人员提供了创建令人振奋的购物用户体验的选项，同时消除了构建 Web 应用程序所需的许多实现细节的负担。

根据您的需要，您可以使用 Next 轻松构建服务器端或静态渲染应用程序，它会为您实现这些功能，同时还抽象出其他细节，例如应用程序捆绑和转编译。

Jamstack 的力量就在这里！

→ 使用组件以提高灵活性。

基于组件的开发使代码可以通过您的应用程序轻松重用，还可以编写小功能。或者，在我们的例子中，小型电子商务功能。一旦您开始扩展和扩展购物车集成，这就会派上用场。

→ Virtual DOM（文档对象模型）以提高性能。

React 的虚拟 DOM 提供了一种更有效的方式来更新 Web 应用程序中的视图。在电子商务中，性能就是一切;所有毫秒都很重要。

→ 受欢迎程度和庞大的社区。

任何问题都可能已经记录在案，因此您可能会找到解决任何潜在陷阱的方法。

Next.js 功能，如服务器端渲染和静态导出，通过保证您的网站/应用程序对 SEO 友好，进一步推动了这些 React 优势。这对任何电子商务企业都至关重要。

还需要社会证明吗？以下是一些 Next.js 电子商务网站示例。

技术教程：Next.js 电子商务 SPA

好的，