既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
→ 受欢迎程度和庞大的社区。
任何问题都可能已经记录在案，因此您可能会找到解决任何潜在陷阱的方法。
Next.js 功能，如服务器端渲染和静态导出，通过保证您的网站/应用程序对 SEO 友好，进一步推动了这些 React 优势。这对任何电子商务企业都至关重要。
还需要社会证明吗？以下是一些 Next.js 电子商务网站示例。
技术教程：Next.js 电子商务 SPA
好的，是时候跳入代码并在 Snipcart 的帮助下创建我们自己的手工制作的 Next.js 电子商务应用程序了。对于鱼类爱好者——或者任何等待任何很酷的软件库测试版的人来说——请放心，因为我们今天将制作一家斗鱼商店。
先决条件
- 基本了解单页应用程序 （SPA）
- 一个 Snipcart 帐户（在测试模式下永久免费）
- 已安装 Npm 和 node.js
React 和 TypeScript 的基本知识也会在这里帮助你，但不是强制性的。
1. 设置开发环境
首先，让我们设置我们的环境，以便我们可以开始构建。
打开终端并键入以下命令：npx create-next-app --typescript
将出现一个提示，询问您输入项目的名称。然后，它将为您安装所有项目依赖项，并创建文件和文件夹。在本教程中，我们将进一步研究这些内容。
初学者笔记：该命令的选项将设置一个 Typescript 项目，这是我经常喜欢的。键入系统有助于防止许多运行时错误和活泼的错误。从长远来看，它还允许更好的重构！
--typescript
然后，运行 npm run dev.应用现在应在 localhost:3000运行。
2. 定义布局
准备好环境后，让我们为商店创建布局。它将包括一个页眉和一个页脚，其中包含指向我们购物车和联系信息的链接。
我们会将此布局添加到应用的主入口点。在 Next 中，此入口点位于 pages/_app.tsx。您可以看到该函数返回 MyApp.我们将使用此函数来创建应用程序的布局：pageProps
在项目的根目录下，创建components一个目录——你猜对了——我们将在其中创建我们的组件。
1. 创建组件
现在让我们创建我们需要的组件。
在components目录中，创建一个包含以下内容的文件：Header.tsx
// components/Header.tsx
import Link from "next/link";
export default function Header() {
return (
<header >
<Link href="/">
<img src="/static/logo.svg" alt="" >
</Link>
<Link href="/">
<h1 >FishCastle</h1>
</Link>
<a href="#" style={{textDecoration: "none"}}>
<svg width="31" height="27" viewBox="0 0 31 27" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path d="" fill="#9094FF"/>
</svg>
<span></span>
</a>
</header>
)
}
Next.js 中的组件允许我们将大多数 HTML 元素转换为网站内链接。Link
仍在components目录中，创建一个包含以下内容的文件：Footer.tsx
// components/Footer.tsx
export default function Footer(){
return (
<footer>
<p>
Next.js app with a <a href="<https://snipcart.com>">Snipcar t</a> - powered store
<div >
<a href="<https://github.com/snipcart/snipcart-nextjs>-spa">Github</a>
</div>
</p>
</footer>
)
}
2. 集成组件
现在，让我们将这些组件集成到我们的Layout应用程序中。首先，创建一个组件并将 Header和 Footer放入其中：
import Header from "./Header";
import Footer from "./Footer";
import {PropsWithChildren} from "react";
export default function Layout({ children }: PropsWithChildren<any>) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
)
}
创建布局组件后，剩下要做的就是将其添加到_app.tsx文件中：
// _app.tsx
function MyApp({ Component, pageProps }: AppProps) {
return <>
<Layout>
<Component {...pageProps} />
</Layout>
</>
}
如果运行应用的开发模式并转到 localhost 页面，现在应该会看到已创建应用的布局。在本教程的后面部分，我们将看到如何为它添加样式并赋予它drip。
但首先，让我们为我们的主页提供它应得的内容。
3. 自定义您的主页
由于我们需要显示有关我们商店和我们将销售的产品的信息，因此我们将创建一些不同的组件以保持模块化和可维护性。然后，我们将看看如何组装它们：
3. 创建所需的组件
产品组件
由于这是电子商务应用程序的Next.js教程，因此您需要一个Product组件才能显示在主页上。
该组件将输出您需要显示的有关我们特定产品的任何信息。您可以创建一个与 Snipcart 的产品定义相匹配的接口IProduct``IProductProps，以及一个定义我们道具类型的接口，这些道具将作为参数传递给函数。
// components/Product.tsx
export interface IProduct {
id: string
name: string
price: number
url: string
description: string
image: StaticImageData
}
在界面下方，添加以下组件：
// components/Product.tsx
interface IProductProps {
product: IProduct
}
const Product = (props: IProductProps) => {
return (
<div className={styles.product}>
<h2 className={styles.product__title}>{props.product.name}</h2>
<p className={styles.product__description}>{props.product.description}</p>
<div className={styles.product__image}>
<Image src={props.product.image} alt={props.product.image.src} />
</div>
<div className="product__price-button-container">
<div className={styles.product__price}>${props.product.price.toFixed(2)}</div>
<button
className={`snipcart-add-item ${styles.product__button}`}
data-item-id={props.product.id}
data-item-name={props.product.name}
data-item-price={props.product.price}
data-item-url={props.product.url}
data-item-image={props.product.image.src}>
Add to cart
</button>
</div>
</div>
)
}
关于 Image 组件的说明
请注意，在下面的块中，我们使用的是 Next.js 的 Image 组件，而不是一个好的 ol’ 标签。前者实际上是后者的延伸。它允许自动图像优化，默认延迟加载，并在浏览器允许时以 WebP 格式提供图像，从而将图像优化到客户端设备。此外，该组件会根据请求优化图像，从而节省您的构建时间。这有助于减少您的网站加载时间，从而保持用户的兴趣！img
4. 产品列表组件
我们将此产品组件集成到一个ProductList组件中，其名称不言自明ProductList.tsx。该组件将用于在主页上显示我们的产品列表。因此，您可以创建一个接口IProductListProps来描述一个数组IProduct，该数组最终将由我们的网站传递：
import Product, {IProduct} from "./Product";
interface IProductListProps {
products: IProduct[]
}
const ProductList = (props: IProductListProps) => {
return (
<div className="product-list">
{props.products.map((product, index) => <Product product={product} key={index}/>)}
</div>
)
}
export default ProductList
5. 预渲染数据和导入组件
在此阶段，您可能希望将产品填充到 ProductList 组件中。在纯 React 中，你可以在 ProductList中使用 React 的 useEffect 生命周期来填充数据。但是，在静态或服务器端呈现期间，不会在服务器上调用此方法。
值得庆幸的是，Next.js 添加了两种预呈现数据的方法：getStaticProps，getServerSideProps。在构建时获取数据，以及在每个请求上获取数据。例如，后者对于价格可能快速波动的拍卖店可能很有用。在我们的用例中，由于产品不经常更改，我们将使用前者，因为预渲染将通过保存用户请求来减少加载时间。
<main className="main">
<Jumbotron />
<ProductList products={products}/>
<Contact/>
</main>
export const products: IProduct[] = [
{
id: "halfmoon",
name: "Halfmoon Betta",
price: 25.00,
image: halfmoonBettaPicture,
description: "The Halfmoon betta is arguably one of the prettiest betta species. It is recognized by its large tail that can flare up to 180 degrees.",
url: '/api/products/halfmoon'
},
(...)
{
id: "veiltail",
name: "Veiltail Betta",
price: 5.00,
image: veiltailBettaPicture,
description: "By far the most common betta fish. You can recognize it by its long tail aiming downwards.",
url: '/api/products/veiltail'
}
]
export const getStaticProps: GetStaticProps = async (context) => {
return {
props: {
products
}
}
}
Jumbotron&Contact添加组件是为了完成页面，但它们对于演示不是必需的。可以在此处查看 GitHub 存储库中的组件。
6. 导入 Snipcart
现在，让我们将 Snipcart 安装到我们的网站中。首先，您需要从 index.tsx 页面内的 next/head 导入组件Head，这将允许您在<Head>元素中添加 HTML。
为此，可以在 Index 函数 return 子句中添加以下代码：
// pages/index.tsx
<Head>
<title>My awesome store</title>
<link rel="preconnect" href="<https://app.snipcart.com>"/>
<link rel="preconnect" href="<https://cdn.snipcart.com>"/>
<link rel="stylesheet" href="<https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.css>"/>
<link rel="shortcut icon" href="../public/favicon.ico" />
</Head>
我们现在需要加载 Snipcart 的脚本内容。Next.js 在 next/script模块中提供了一个脚本组件来执行此操作。它允许通过提供不同的加载策略来优化性能。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
在 next/script模块中提供了一个脚本组件来执行此操作。它允许通过提供不同的加载策略来优化性能。
[外链图片转存中…(img-Yr5vnKKw-1715663598194)]
[外链图片转存中…(img-7xnza9hd-1715663598194)]
[外链图片转存中…(img-2O6Ba9pW-1715663598194)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
1638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
