React/Next.js电商应用指定URL结构的动态路由实现需求

Hey there! Since you can't modify your existing URL structure (super crucial for keeping your SEO intact and preserving user links with that 30K daily traffic), let's break down how to set up these dynamic routes in both Next.js Pages Router and App Router—whichever you're using.

Using Next.js Pages Router #

The Pages Router relies on file-based routing, so we'll create a single dynamic route file that handles both category and product slugs by checking which type the slug belongs to.

Step 1: Create the Dynamic Route File #

In your pages directory, create a file named [slug].js — this will match any root-level URL like /my-category-page-url or /my-product-detail-page-url.

Step 2: Fetch Data and Render the Correct Page #

Here's how to distinguish between categories and products, with pre-rendering support for better performance:

import CategoryPage from '../components/CategoryPage';
import ProductPage from '../components/ProductPage';
import NotFound from './404';

// Server-side data fetching (swap with getStaticProps for static generation)
export async function getServerSideProps({ params }) {
  const { slug } = params;
  
  // First check if the slug belongs to a category
  let categoryData = await fetchCategoryBySlug(slug); // Replace with your actual API/db call
  if (categoryData) {
    return { props: { data: categoryData, type: 'category' } };
  }

  // If not a category, check for a product
  let productData = await fetchProductBySlug(slug); // Replace with your actual API/db call
  if (productData) {
    return { props: { data: productData, type: 'product' } };
  }

  // If neither, return a 404
  return { notFound: true };
}

export default function DynamicPage({ data, type }) {
  switch(type) {
    case 'category':
      return <CategoryPage category={data} />;
    case 'product':
      return <ProductPage product={data} />;
    default:
      return <NotFound />;
  }
}

Optional: Static Generation (for faster load times) #

If your catalog doesn't update frequently, use getStaticProps + getStaticPaths to pre-render all pages:

export async function getStaticPaths() {
  // Fetch all category and product slugs from your database/API
  const categories = await fetchAllCategories();
  const products = await fetchAllProducts();

  const paths = [
    ...categories.map(cat => ({ params: { slug: cat.slug } })),
    ...products.map(prod => ({ params: { slug: prod.slug } }))
  ];

  return { paths, fallback: 'blocking' }; // 'blocking' renders new slugs on first request
}

export async function getStaticProps({ params }) {
  // Same data-fetching logic as getServerSideProps above
}

Using Next.js App Router #

The App Router uses React Server Components by default, which simplifies data fetching directly in the page component.

Step 1: Create the Dynamic Route Folder #

In your app directory, create a folder named [slug], then add a page.js file inside it.

Step 2: Fetch Data and Render the Correct Page #

Here's the implementation that checks if the slug is a category or product, with static generation support:

import CategoryPage from '@/components/CategoryPage';
import ProductPage from '@/components/ProductPage';
import NotFound from '@/components/NotFound';

// Helper to fetch and identify the slug type
async function getSlugData(slug) {
  // Check category first
  const categoryRes = await fetch(`https://your-api-url.com/categories/${slug}`, { cache: 'force-cache' });
  if (categoryRes.ok) {
    return { type: 'category', data: await categoryRes.json() };
  }

  // Check product next
  const productRes = await fetch(`https://your-api-url.com/products/${slug}`, { cache: 'force-cache' });
  if (productRes.ok) {
    return { type: 'product', data: await productRes.json() };
  }

  return { type: 'notFound' };
}

export default async function DynamicSlugPage({ params }) {
  const { slug } = params;
  const result = await getSlugData(slug);

  switch(result.type) {
    case 'category':
      return <CategoryPage category={result.data} />;
    case 'product':
      return <ProductPage product={result.data} />;
    default:
      return <NotFound />;
  }
}

// Pre-generate static paths for existing categories/products
export async function generateStaticParams() {
  const categories = await fetchAllCategories();
  const products = await fetchAllProducts();

  return [
    ...categories.map(cat => ({ slug: cat.slug })),
    ...products.map(prod => ({ slug: prod.slug }))
  ];
}

Key Notes to Keep in Mind #

• Unique Slugs: Ensure no category and product share the same slug—this is critical to avoid routing conflicts. Enforce this rule at the database level when creating new categories or products.
• SEO Optimization: Use next/head (Pages Router) or next/metadata (App Router) to set unique titles, descriptions, and OG tags for category vs product pages. This helps search engines understand each page's purpose.
• 404 Handling: Always return a proper 404 page when a slug doesn't match any category or product—don't leave users with a blank or broken page.
• Performance: With 30K daily visitors, pre-rendering (SSG/ISR) is highly recommended to reduce server load and improve page load times. Adjust caching strategies based on how often your catalog updates.

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