title: In Sanity/Nextjs, how do I make a page of categories that can open a new page with the selected categories subcategories?
body: <p>I'm using nextjs for my frontend, and sanity for my backend. I have a page that shows a list of categories (e.g., sketches, paintings, exhibitions) and each have their own subcategories (e.g., exhibitions -&gt; place a, place b, place c; sketches -&gt; set a, set b, set c, set d). When you select one of those subcategories (e.g., place b), it will open a page with everything in that chosen subcategory.</p>
  <p>I want to make it so that if the user clicks a category on one webpage, it will open a new webpage with its specific subcategories (children?).</p>
  <p>Here are my schemas for the categories ('category') and subcategories ('set'):</p>
  <pre><code>// category.js    
  export default {
          name: 'category',
          type: 'document',
          title: 'Category',
          fields: [
              {
                  name: 'category_name',
                  type: 'string',
                  title: 'Category Name'
              },
              {
                  name: 'category_image',
                  type: 'image',
                  title: 'Category Image'
              },
              {
                  name: 'categoryImage_alt',
                  title: 'Alt',
                  type: 'string'
              },
              {
                  name: 'contained_sets',
                  type: 'array',
                  title: 'Contained Sets',
                  of: [{
                      type: 'reference',
                      to: [{type: 'set'}] 
                  }]
              }
          ]
      }
  
  
  
  // setsSchema.js
  export default {
      name: 'set',
      type: 'document',
      title: 'Set',
      fields: [
          {
              name: 'set_name',
              type: 'string',
              title: 'Set Name',
          },
          {
              name: 'set_images',
              type: 'array',
              title: 'Set Images',
              of: [
                  {
                      name: 'image',
                      type: 'image',
                      title: 'Image',
                      options: {
                          hotspot: true,
                      },
                      fields: [
                          {
                              name: 'alt',
                              type: 'string',
                              title: 'Alternative Text',
                              options: {
                                  isHighlighted: true
                              }
                          },
                          {
                              name: 'name',
                              type: 'string',
                              title: 'Name',
                              options: {
                                  isHighlighted: true
                              }
                          },
                          {
                              name: 'date',
                              type: 'string',
                              title: 'Date',
                              options: {
                                  isHighlighted: true
                              }
                          },
                          {
                              name: 'size',
                              type: 'string',
                              title: 'Size',
                              options: {
                                  isHighlighted: true
                              }
                          },
                          {
                              name: 'materials',
                              type: 'string',
                              title: 'Materials',
                              options: {
                                  isHighlighted: true
                              }
                          },
                      ]
                  },
              ]
          },
          {
              name: 'slug',
              title: 'Slug',
              type: 'slug',
              options: {
                  source: 'set_name'
              }
          }
      ]
  }
  </code></pre>
  <p>This is my webpage with the categories:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { client, urlFor } from '../lib/client';
  import { Header, Footer } from '../components';
  import Link from 'next/link';
  
  const gallery = () =&gt; {
  
     // fetches sanity data
  
     const [categoryData, setCategories] = useState(null);
  
     useEffect(() =&gt; {
         client.fetch(
             `*[_type==&quot;category&quot;]{
                 categoryImage_alt,
                 category_image{
                 asset-&gt;{
                     _id,
                     url
                     }
                 },
                 category_name,
                 contained_sets
             }`)
             .then((data) =&gt; setCategories(data))
             .catch(err =&gt; console.error(err));
     }, [] );
  
    return (
      &lt;div&gt;
      &lt;Header /&gt;
      &lt;main className=&quot;main-gallery&quot;&gt; 
        &lt;div className=&quot;title&quot;&gt;
            &lt;div className=&quot;title-line-left&quot;&gt;&lt;/div&gt;
            &lt;h2&gt;categories&lt;/h2&gt; 
            &lt;div className=&quot;title-line-right&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div className=&quot;categories&quot;&gt;
            &lt;ul className=&quot;categories-container&quot;&gt;
              {categoryData &amp;&amp; categoryData.map((category, index) =&gt; (
                  &lt;li&gt;
                      &lt;Link href=&quot;/sets&quot;&gt;&lt;img src={urlFor(category.category_image).auto('format').url()} alt={category.categoryImage_alt}/&gt;&lt;/Link&gt;
                  &lt;/li&gt;
              ))}
            &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/main&gt;
      &lt;Footer /&gt;
      &lt;/div&gt;
    )
  }
  
  export default gallery
  </code></pre>
  <p>This page is for sets, which currently shows all of the sets/subcategories, and not just the selected categories subcategories. I've tried a couple things but nothing has worked.</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { client, urlFor } from '../lib/client';
  import { Header, Footer } from '../components';
  
  const sets = () =&gt; {
     // fetches sanity data
  
     const [galleryData, setGalleryData] = useState(null);
  
     useEffect(() =&gt; {
         client.fetch(
             `*[_type==&quot;set&quot;]{
                 set_name,
                 slug,
                 set_images,
                 image{
                  asset-&gt;{
                      _id,
                      url
                      }
                  },
             }`)
             .then((data) =&gt; setGalleryData(data))
             .catch(err =&gt; console.error(err));
     }, [] );
  
    return (
      &lt;div&gt;
      &lt;Header /&gt;
      &lt;main className=&quot;main-gallery&quot;&gt; 
        &lt;div className=&quot;title&quot;&gt;
            &lt;div className=&quot;title-line-left&quot;&gt;&lt;/div&gt;
  
              &lt;h2&gt;&lt;/h2&gt; 
  
            &lt;div className=&quot;title-line-right&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div className=&quot;categories&quot;&gt;
            &lt;ul className=&quot;categories-container&quot;&gt;
              {galleryData &amp;&amp; galleryData.map((set, index) =&gt; (
                  &lt;li&gt;
                      &lt;img src={urlFor(set.set_images[0]).auto('format').url()} alt={set.set_name}/&gt;
                  &lt;/li&gt;
              ))}
            &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/main&gt;
      &lt;Footer /&gt;
      &lt;/div&gt;
    )
  }
  
  export default sets
  </code></pre>