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

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

初学者笔记：该命令的选项将设置一个 Typescript 项目，这是我经常喜欢的。键入系统有助于防止许多运行时错误和活泼的错误。从长远来看，它还允许更好的重构！--typescript

// 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>
    )
}

// components/Footer.tsx

export default function Footer(){
    return (
        <footer>
            <p>
                Next.js app with a&nbsp;<a href="<https://snipcart.com>">Snipcar        t</a>&nbsp;- powered store
                <div >
                    <a href="<https://github.com/snipcart/snipcart-nextjs>-spa">Github</a>
                </div>
            </p>
        </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
function MyApp({ Component, pageProps }: AppProps) {
  return <>
    <Layout>
      <Component {...pageProps} />
    </Layout>
    </>
}

// 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>
    )
}

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

<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 存储库中的组件。

// 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>

// pages/index.tsx
<script src="https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>

// In pages/api/products/index.ts

import {NextApiRequest, NextApiResponse} from "next";
import {products} from "../../index";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json(products);
}

import {NextApiRequest, NextApiResponse} from "next";
import {products} from "../../index";
import {IProduct} from "../../../components/Product";

export interface ISnipcartProduct {
    id: string
    name: string
    price: number
    url: string
    description: string
    image: string // Hack to pass the image URL instead of the StaticImage object we required
}

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const {productId} = req.query;
    const product: IProduct | undefined = products.find(p => p.id === productId);
    if (!product) {
        res.status(404).json({});
        return ;
    }
    const snipcartProduct: ISnipcartProduct = {...product, image: product?.image.src ?? ""}

    res.status(200).json(snipcartProduct);
}

// in pages/_app.tsx

import "../styles/globals.scss";

import styles from '../styles/Product.module.scss';
(...)

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>
      (...)
  )
}