如何在Next.js中从对象数组生成单产品页面

根据你的需求，下面分别针对Next.js的**App Router（13+）和Pages Router（12及以下）**两种架构给出实现方案：

方案一：App Router（Next.js 13+） #

1. 整理产品数据 #

先把产品数组抽离到单独文件中复用，比如创建lib/products.js：

export const products = [
  {
    url: "item-1",
    id: 1,
    name: "Item 1",
    description: "lorem...",
    price: 10
  },
  {
    url: "item-2",
    id: 2,
    name: "Item 2",
    description: "lorem...",
    price: 20
  },
  {
    url: "item-3",
    id: 3,
    name: "Item 3",
    description: "lorem...",
    price: 30
  },
];

2. 创建动态路由页面 #

在app目录下创建products/[url]文件夹，并添加page.js文件：

import { products } from "@/lib/products";

// 可选：预先生成所有静态页面（SSG），提升加载性能
export async function generateStaticParams() {
  return products.map(product => ({
    url: product.url,
  }));
}

export default function ProductPage({ params }) {
  // 根据URL参数匹配对应产品
  const product = products.find(p => p.url === params.url);

  // 处理产品不存在的情况
  if (!product) {
    return <div>产品不存在</div>;
  }

  // 渲染产品详情
  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p>产品ID：{product.id}</p>
      <p>{product.description}</p>
      <p>价格：${product.price}</p>
    </div>
  );
}

3. 生成产品列表链接（可选） #

如果需要展示产品列表，创建app/products/page.js：

import { products } from "@/lib/products";
import Link from "next/link";

export default function ProductsList() {
  return (
    <div className="products-list">
      <h1>产品列表</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <Link href={`/products/${product.url}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

方案二：Pages Router（Next.js 12及以下） #

1. 整理产品数据 #

同样创建lib/products.js存放产品数组（内容同App Router方案）。

2. 创建动态路由页面 #

在pages目录下创建products/[url].js文件：

import { products } from "../../lib/products";

// 预先生成所有静态路径（SSG）
export async function getStaticPaths() {
  const paths = products.map(product => ({
    params: { url: product.url },
  }));

  return { paths, fallback: false }; // fallback: false 表示未预生成的路径返回404
}

// 获取当前路径对应的产品数据
export async function getStaticProps({ params }) {
  const product = products.find(p => p.url === params.url);

  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product }, // 将产品数据传递给页面组件
    revalidate: 60, // 可选：每60秒自动更新页面内容（增量静态再生）
  };
}

export default function ProductPage({ product }) {
  // 渲染产品详情
  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p>产品ID：{product.id}</p>
      <p>{product.description}</p>
      <p>价格：${product.price}</p>
    </div>
  );
}

3. 生成产品列表链接（可选） #

创建pages/products.js作为列表页：

import { products } from "../lib/products";
import Link from "next/link";

export default function ProductsList() {
  return (
    <div className="products-list">
      <h1>产品列表</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <Link href={`/products/${product.url}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者marko2304