Next.js如何在单个page.js中处理空路由与带参数路由？

针对你的需求——用单个page.js同时处理根路由/（展示随机商品详情）和商品路由/product-xx（展示对应商品），分两种Next.js路由模式给出实现方案：

Pages Router（Next.js 13 及之前的 Pages 目录结构） #

使用可选catch-all动态路由实现，在pages目录下创建[[...productId]].js文件（双层方括号表示路由可匹配空参数）：

import { useRouter } from 'next/router';
import { getProductById, getAllProductIds } from '../lib/products'; // 自定义数据获取工具函数

export async function getServerSideProps(context) {
  const { productId } = context.params;

  // 处理空路由参数（访问 / 的情况）
  if (!productId || productId.length === 0) {
    // 获取所有商品ID并随机选一个
    const allProductIds = await getAllProductIds();
    const randomProductId = allProductIds[Math.floor(Math.random() * allProductIds.length)];
    
    // 方案1：重定向到随机商品路由（地址栏会变为 /product-xx）
    return {
      redirect: {
        destination: `/${randomProductId}`,
        permanent: false,
      },
    };

    // 方案2：直接获取随机商品数据在当前页展示（地址栏保持 /）
    // const product = await getProductById(randomProductId);
    // return { props: { product } };
  }

  // 处理带参数的商品路由（如 /product-01）
  const productIdStr = productId[0];
  const product = await getProductById(productIdStr);

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

  return { props: { product } };
}

export default function ProductPage({ product }) {
  if (!product) {
    return <div>加载中...</div>;
  }

  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 其他商品详情内容 */}
    </div>
  );
}

App Router（Next.js 13+ App 目录结构） #

同样使用可选catch-all动态路由，在app目录下创建[[...productId]]/page.js文件：

import { redirect, notFound } from 'next/navigation';
import { getProductById, getAllProductIds } from '../lib/products'; // 自定义数据获取工具函数

// Server Component 写法
export default async function ProductPage({ params }) {
  const { productId } = params;
  let targetProductId;

  // 处理空路由参数（访问 / 的情况）
  if (!productId || productId.length === 0) {
    const allProductIds = await getAllProductIds();
    targetProductId = allProductIds[Math.floor(Math.random() * allProductIds.length)];

    // 方案1：重定向到随机商品路由（地址栏变化）
    redirect(`/${targetProductId}`);

    // 方案2：直接获取数据展示（地址栏保持 /）
    // const product = await getProductById(targetProductId);
  } else {
    // 处理带参数的商品路由
    targetProductId = productId[0];
  }

  const product = await getProductById(targetProductId);
  if (!product) notFound();

  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 其他商品详情内容 */}
    </div>
  );
}

关键说明 #

• 可选catch-all路由[[...productId]]是核心，它允许路由同时匹配空参数（根路由/）和带参数的商品路由。
• 重定向模式会让用户地址栏显示具体商品路由，更符合SEO和用户认知；直接展示模式保持根路由URL不变，可按需选择。
• SSR数据获取逻辑在Pages Router的getServerSideProps或App Router的Server Component中处理，确保服务端渲染数据。

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