// app/[category]/page.tsx
const ProductListingPage = async ({ params }) => {
  const products = await db.getProductsByCategory(params.category)
}

async Electronics
    await fetch(api/electronics)

const ProductListingPage = async ({ params, searchParams }) => {
  const products = await db.getProductsByCategory(params.category, { filterBy: searcParams })
}

{
  cpu: 'i7',
  minRam: '16' // in GB,
  ...
}

// /app/a/[aId]/b/[bId]/c/[cId]/page.tsx
const DeeplyNestedPage = ({
  params: { aId, bId, cId },
  searchParams: { filter1, filter2 }
}) => {
  // do your stuff
}

// /app/a/[aId]/b/[bId]/c/[cId]/page.tsx
const DeeplyNestedPage = ({
  params: { aId, bId, cId },
  searchParams: { filter1, filter2 }
}) => {
  fetch(a/aId/b/bId?filter=filter1...)
}

// app/artist/[username]/page.tsx
import Albums from './albums'
 
async function getArtist(username: string) {
  const res = await fetch(`https://api.example.com/artist/${username}`)
  return res.json()
}
 
async function getArtistAlbums(username: string) {
  const res = await fetch(`https://api.example.com/artist/${username}/albums`)
  return res.json()
}
 
export default async function Page({
  params: { username },
}: {
  params: { username: string }
}) {
  // Initiate both requests in parallel
  const artistData = getArtist(username)
  const albumsData = getArtistAlbums(username)
 
  // Wait for the promises to resolve
  const [artist, albums] = await Promise.all([artistData, albumsData])
 
  return (
    <>
      <h1>{artist.name}</h1>
      <Albums list={albums}></Albums>
    </>
  )
}

1. user picks a category /category/[cat]
 - fetch gives data based on category fetch(/category/cat

2. user picks a product /category/cat0/product/[prod]
 - fetch gives data based on that category and product fetch(/category/cat/product/prod

3. user picks a comment of product /category/cat0/product/prod0/comments
 - fetch gives data based on that category and product and comment fetch(/category/cat/prod/prod/comments

4. user filters comments based on its picks .../comments?f1=f1&f2=f2 ...
 - fetch gives data based on that comments where filters are true

5. user sees data based on its selection in deepest route at page

// GET: /category/:id
 // 1 - in here i can fetch categories based on id
// GET: /category/:id/product/:id
 // 2 - but i am stuck here
// GET: /category/:id/product/:id/comments?f1=f1&f2=f2

await prisma.category.findMany({
  include: { products: { include: { comments: true } } },
})

Category: {
  id: number;
  products: Product[];
}

Product: {
  id: number;
  categories: Category[];
  comments: Comment[];
}