{"id":6916,"date":"2023-01-06T04:24:19","date_gmt":"2023-01-06T04:24:19","guid":{"rendered":"https:\/\/www.ardorsys.com\/blog\/?p=6916"},"modified":"2023-01-06T16:51:47","modified_gmt":"2023-01-06T16:51:47","slug":"learn-to-create-tabbing-component-in-next-js-14","status":"publish","type":"post","link":"https:\/\/www.ardorsys.com\/blog\/learn-to-create-tabbing-component-in-next-js-14\/","title":{"rendered":"Learn to Create Tabbing Component in Next.js 14"},"content":{"rendered":"

Do you want to create tabbing in Next.JS but don\u2019t know how to do this? Here are the steps in this blog with an example.<\/p>\n

To create a tabbing component in Next.js, you can use the useState<\/code> hook to manage the state of the selected tab and the onClick<\/code> event handler to switch between tabs.<\/p>\n

Here is an example of how you might do this:<\/p>\n

import { useState } from 'react';\r\n\r\nfunction ArTabbing() {\r\n  const [activeTab, setActiveTab] = useState(1);\r\n\r\n  return (\r\n    
\r\n      
\r\n