Scaling SEO: Building 10,000 E-commerce Product Pages with Next.js & Hygraph CMS

Model Name: Product
API ID: product
Plural API ID: products
Display Field: name

# Clone the repository
git clone https://github.com/amirfaisalz/shophub.git
cd shophub

# Install dependencies
npm install

# .env.local
NEXT_PUBLIC_HYGRAPH_URL="https://api-region.hygraph.com/v2/YOUR-PROJECT-ID/master"
HYGRAPH_TOKEN="your-permanent-auth-token-here"
NEXT_PUBLIC_SITE_URL="http://localhost:5555"

npm run dev

// Generate static params at build time
export async function generateStaticParams() {
  const response = await hygraph.request<{ products: Array<{ slug: string }> }>(
      GET_ALL_PRODUCTS_SLUGS
  );

  return response.products.map((product) => ({
      slug: product.slug,
  }));
}

// This function generates unique metadata for EVERY product
export async function generateMetadata({ params }: ProductPageParams): Promise<Metadata> {
  const { slug } = await params;
  const response = await hygraph.request<ProductResponse>(GET_PRODUCT_QUERY, {
      slug,
  });

  if (!response.products || response.products.length === 0) {
      return { title: "Product Not Found" };
  }

  const validProduct = ProductSchema.parse(response.products[0]);

  const title = validProduct.name + ' | Premium ' + validProduct.category
  const baseDescription = validProduct.description.slice(0, 160);
  const description = baseDescription + '... Shop ' + validProduct.name + ' at ShopHub. Free shipping on orders $50+!';
  const image = validProduct.images[0]?.url;

  return {
      title,
      description,
      openGraph: {
          title,
          description,
          type: "website",
          url: process.env.NEXT_PUBLIC_SITE_URL + '/products/' + slug,
          images: image ? [{ url: image }] : [],
      },
      twitter: {
          card: "summary_large_image",
          title,
          description,
          images: image ? [image] : [],
      },
      robots: {
          index: true,
          follow: true,
          googleBot: {
              index: true,
              follow: true,
              "max-video-preview": -1,
              "max-image-preview": "large",
              "max-snippet": -1,
          },
      },
      alternates: {
          canonical: process.env.NEXT_PUBLIC_SITE_URL + '/products/' + slug,
      },
      other: {
          "product:price:amount": validProduct.price.toString(),
          "product:price:currency": "USD",
      },
  };
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://example.com";

  // Fetch all product slugs from Hygraph
  const response = await hygraph.request<{ products: Array<{ slug: string }> }>(
      GET_ALL_PRODUCTS_SLUGS
  );

  // Static pages
  const staticPages: MetadataRoute.Sitemap = [
      {
          url: siteUrl,
          lastModified: new Date(),
          changeFrequency: "daily",
          priority: 1,
      },
  ];

  // Product pages
  const productPages: MetadataRoute.Sitemap = response.products.map(
      (product) => ({
          url: siteUrl + '/products/' + product.slug,
          lastModified: new Date(),
          changeFrequency: "weekly" as const,
          priority: 0.8,
      })
  );

  return [...staticPages, ...productPages];
}

// Calculate price valid date (1 year from now)
const priceValidUntilDate = new Date(
Date.now() + 365 * 24 * 60 * 60 * 1000
).toISOString().split('T')[0];

// Then in your JSX:
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Product",
          name: validProduct.name,
          description: validProduct.description,
          image: validProduct.images.map((img) => img.url),
          brand: {
            "@type": "Brand",
            name: "ShopHub",
          },
          offers: {
            "@type": "Offer",
            price: validProduct.price,
            priceCurrency: "USD",
            availability: "https://schema.org/InStock",
            url: process.env.NEXT_PUBLIC_SITE_URL + '/products/' + slug,
            priceValidUntil: priceValidUntilDate,
          },
        }),
      }}
    />

// app/products/[slug]/page.tsx
export const revalidate = 1800 // Revalidate every 30 minutes

// Pages are:
// 1. Pre-rendered at build time
// 2. Served from cache for 30 minutes
// 3. Revalidated in background after 30 minutes

// app/products/[slug]/page.tsx
export const revalidate = false // No automatic revalidation
export const dynamic = 'force-static' // Pre-render at build

// Then trigger revalidation via API when content changes:
// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request: Request) {
  const { slug } = await request.json()
  revalidatePath('/products/' + slug)
  return Response.json({ revalidated: true })
}

// next.config.ts
const nextConfig = {
images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "ap-south-1.graphassets.com",
    },
    {
      protocol: "https",
      hostname: "*.graphassets.com",
    },
    {
      protocol: "https",
      hostname: "media.graphassets.com",
    },
  ],
},
}

// app/products/[slug]/loading.tsx
export default function Loading() {
  return (
    <div className="container mx-auto px-4 py-8">
      <Skeleton className="h-8 w-64 mb-4" />
      <Skeleton className="h-64 w-full mb-4" />
      {/* More skeletons */}
    </div>
  )
}

shophub/
├── src/
│   ├── app/
│   │   ├── page.tsx                      # Homepage with product grid
│   │   ├── products/[slug]/page.tsx      # Dynamic product pages
│   │   ├── sitemap.ts                    # Auto-generated sitemap
│   │   └── robots.ts                     # SEO crawler instructions
│   ├── components/                       # Reusable UI components
│   └── lib/
│       ├── hygraph.ts                    # GraphQL client & queries
│       └── types.ts                      # TypeScript types
├── .env.example                          # Environment template
└── README.md                             # Full documentation