Aggregate rating (average stars and count) displays prominently on product page

An aggregate rating is the single highest-impact trust signal on a product page — multiple e-commerce studies put conversion lift from visible star ratings at 15–40%. Missing or hardcoded aggregates also break schema.org AggregateRating structured data (see ecommerce-reviews.schema-seo.aggregate-rating-schema), eliminating the review-rich snippet in Google SERPs. Beyond conversion, a hardcoded value is a dark-pattern that regulators including the FTC treat as deceptive when it doesn't reflect real buyer sentiment. The aggregate must be dynamically computed from the approved reviews table to be both accurate and legally defensible.

Compute the aggregate from approved reviews in components/ProductHeader.tsx and display at least average rating, visual stars, and review count above the fold.

// components/ProductHeader.tsx
export async function ProductHeader({ productId }: { productId: string }) {
  const reviews = await db.reviews.findMany({
    where: { product_id: productId, status: 'approved' },
    select: { rating: true }
  })

  const count = reviews.length
  const avg = count > 0
    ? (reviews.reduce((s, r) => s + r.rating, 0) / count).toFixed(1)
    : null

  return (
    <div className="product-header">
      {avg && (
        <div className="rating-summary" aria-label={`${avg} out of 5, ${count} reviews`}>
          <StarDisplay rating={Number(avg)} />
          <span>{avg} ({count} {count === 1 ? 'review' : 'reviews'})</span>
        </div>
      )}
    </div>
  )
}

The avg value must flow into the schema.org AggregateRating block on the same page to keep structured data and displayed text in sync.