Next.js 电子商务平台

介绍

Next.js 是一个基于 React 的框架，提供了服务器端渲染（SSR）、静态生成（SSG）和客户端渲染（CSR）等功能，非常适合构建高性能的电子商务平台。在本教程中，我们将使用 Next.js 构建一个简单的电子商务平台，涵盖从产品展示到购物车管理的完整功能。

项目初始化

首先，我们需要创建一个新的 Next.js 项目。打开终端并运行以下命令：

npx create-next-app@latest nextjs-ecommerce
cd nextjs-ecommerce

这将创建一个新的 Next.js 项目，并进入项目目录。

项目结构

在开始编写代码之前，让我们先了解一下项目的结构：

nextjs-ecommerce/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
│   └── product/[id].js
├── public/
├── styles/
├── components/
└── package.json

pages/：包含所有的页面和 API 路由。
public/：存放静态资源，如图片、字体等。
styles/：存放 CSS 样式文件。
components/：存放可重用的 React 组件。

创建产品页面

首先，我们需要创建一个页面来展示产品。在 pages/index.js 中，添加以下代码：

import Link from 'next/link';

const products = [
  { id: 1, name: 'Product 1', price: 100 },
  { id: 2, name: 'Product 2', price: 200 },
  { id: 3, name: 'Product 3', price: 300 },
];

export default function Home() {
  return (
    <div>
      <h1>Welcome to Our E-commerce Platform</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link href={`/product/${product.id}`}>
              <a>{product.name} - ${product.price}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

在这个例子中，我们创建了一个简单的产品列表，并为每个产品生成了一个链接，指向产品的详情页面。

创建产品详情页面

接下来，我们需要创建一个动态路由来显示每个产品的详细信息。在 pages/product/[id].js 中，添加以下代码：

import { useRouter } from 'next/router';

const products = [
  { id: 1, name: 'Product 1', price: 100, description: 'This is product 1' },
  { id: 2, name: 'Product 2', price: 200, description: 'This is product 2' },
  { id: 3, name: 'Product 3', price: 300, description: 'This is product 3' },
];

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  const product = products.find((p) => p.id === parseInt(id));

  if (!product) {
    return <div>Product not found</div>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

在这个例子中，我们使用 useRouter 钩子来获取 URL 中的 id 参数，并根据该参数查找对应的产品信息。

添加购物车功能

为了管理购物车，我们需要创建一个简单的购物车组件。在 components/Cart.js 中，添加以下代码：

import { useState } from 'react';

export default function Cart() {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {cart.map((item, index) => (
          <li key={index}>{item.name} - ${item.price}</li>
        ))}
      </ul>
      <button onClick={() => addToCart({ name: 'Product 1', price: 100 })}>
        Add Product 1 to Cart
      </button>
    </div>
  );
}

然后，在 pages/index.js 中引入并使用这个组件：

import Cart from '../components/Cart';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Our E-commerce Platform</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link href={`/product/${product.id}`}>
              <a>{product.name} - ${product.price}</a>
            </Link>
          </li>
        ))}
      </ul>
      <Cart />
    </div>
  );
}

部署到 Vercel

Next.js 项目可以轻松部署到 Vercel。首先，确保你已经安装了 Vercel CLI：

npm install -g vercel

然后，在项目根目录下运行以下命令：

vercel

按照提示操作，你的 Next.js 电子商务平台将被部署到 Vercel。

总结

在本教程中，我们使用 Next.js 构建了一个简单的电子商务平台，涵盖了产品展示、产品详情页面和购物车管理功能。通过这个项目，你应该对如何使用 Next.js 构建实际应用有了更深入的理解。

附加资源

练习

扩展购物车功能，使其能够从产品页面添加产品到购物车。
添加一个结账页面，允许用户输入支付信息并完成购买。
使用 Next.js 的 API 路由创建一个简单的后端，用于管理产品和订单。

提示

在完成这些练习后，你将拥有一个功能更加完善的电子商务平台，并能够更好地理解 Next.js 的实际应用。

介绍​

项目初始化​

项目结构​

创建产品页面​

创建产品详情页面​

添加购物车功能​

部署到 Vercel​

总结​

附加资源​

练习​

介绍