title: How to Create Tabs in NextJS
body: <p>I want to create tabs for categories. I get data categories with graphql and I want to display list data by the category selected.</p>
  <p>tabs category</p>
  <pre><code>function a11yProps(index) {
    console.log(index);
    return {
      id: `simple-tab-${index}`,
      &quot;aria-controls&quot;: `simple-tabpanel-${index}`,
    };
  }
  .....
  const [value, setValue] = useState(0);
  
    const handleChange = (event, newValue) =&gt; {
      setValue(newValue);
    };
  ......
  {data.categories.map((category, i) =&gt; (
              &lt;Tab
                key={category.id}
                label={category.name}
                id={`scrollable-prevent-tab-${category.id}`}
                aria-controls={`scrollable-prevent-tabpanel-${category.id}`}
                {...a11yProps(category.id)}
              /&gt;
            ))}
  &lt;ItemNews value={value} index={a11yProps()} /&gt;
  </code></pre>
  <p>ItemNews is component for display list data. And below some code for get list data</p>
  <pre><code>const { value, index } = props;
  const { loading, error, data, refetch } = detailCategory({
      variables: {
        id: index,
      },
    });
  
  </code></pre>