Next.js and Sanity integration for dynamic product categories

Ecom
1

I’m working on an online bakery shop using Next.js and Sanity. I’ve set up dynamic categories like fancy cakes, pastries, and dessert tables. Each category should display its own products.

My project structure is bakery/[category]/[categorySlug]. I think I need to use slugs here.

Here’s what I’ve done so far:

import Image from 'next/image'
import Link from 'next/link'
import { fetchProductData } from '../utils/dataFetcher'

export const dynamic = 'force-dynamic'

async function ProductList({ groupName }) {
  const items = await fetchProductData(groupName)

  return (
    <div className='product-container'>
      <h2>Our {groupName} selection</h2>
      <div className='product-grid'>
        {items.map(item => (
          <div key={item.id} className='product-card'>
            <Image src={item.pic} width={200} height={200} alt={item.title} />
            <h3><Link href={`/item/${item.urlPath}`}>{item.title}</Link></h3>
            <p>{item.group}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

export default function CategoryPage({ params }) {
  return <ProductList groupName={params.category} />
}

Can someone help me make sure I’m on the right track? Is this a good way to fetch and display products for each category?

2

Hey there Mia_17Chess! Your setup looks pretty cool so far. I’m curious about a few things though. Have you thought about how you’ll handle subcategories? Like, what if you want to add ‘Birthday Cakes’ under ‘Fancy Cakes’?

Also, I’m wondering about the user experience. How are you planning to let customers filter or sort products within a category? Maybe by price or popularity?

Oh, and one more thing - are you thinking about adding any special features for each product? Like allergen info or customization options? That could be super helpful for a bakery site!

Keep us posted on how it’s going. I’d love to see how your bakery shop turns out!

3

Your approach looks solid for fetching and displaying products by category. Using dynamic routes with slugs is a good practice for SEO and clean URLs. A few suggestions to enhance your implementation:

Consider adding error handling for cases where the category doesn’t exist or no products are found.

Implement server-side pagination if you have many products per category to improve performance.

Use Next.js’s Image component with proper sizing and optimization for better loading times.

Add metadata for each category page to improve SEO.

Consider implementing a caching strategy to reduce database queries, especially if your product data doesn’t change frequently.

Overall, your current setup provides a solid foundation. Just ensure you’re properly sanitizing inputs and optimizing for performance as you scale.

4

hey mia, ur project looks cool, but caching might speed up static content like product details. also, search function might help find treats easier. good luck with ur bakery!