Learn to Create Tabbing Component in Next.js 14

Do you want to create tabbing in Next.JS but don’t know how to do this? Here are the steps in this blog with an example.

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

Here is an example of how you might do this:

import { useState } from 'react';
 
function ArTabbing() {
  const [activeTab, setActiveTab] = useState(1);
 
  return (
    <div>
      <div className="tabs">
        <button className={activeTab === 1 ? 'active' : ''} onClick={() => setActiveTab(1)}>
          Tab One
        </button>
        <button className={activeTab === 2 ? 'active' : ''} onClick={() => setActiveTab(2)}>
          Tab Two
        </button>
        <button className={activeTab === 3 ? 'active' : ''} onClick={() => setActiveTab(3)}>
          Tab Three
        </button>
      </div>
      <div className="tab-content">
        {activeTab === 1 && <div>Content of tab One</div>}
        {activeTab === 2 && <div>Content of tab Two</div>}
        {activeTab === 3 && <div>Content of tab Three</div>}
      </div>
    </div>
  );
}
 
export default ArTabbing;

Read also: Why Should Your Next App Combine a NodeJS Backend With a ReactJS Frontend App?

Related Posts

• FFrontend Development

How to Hire the Right Front-End Developer

• byEditorial Team
• December 6, 2023

This code defines a ArTabbing component that uses the useState hook to manage the state of the activeTab variable and the onClick event handler to switch between tabs. It renders a set of buttons for each tab and uses a ternary operator to apply the active class to the button for the currently active tab. It also renders the content for the active tab using a ternary operator to show the content for the selected tab and hide the content for the other tabs.

Related Posts

• WWeb Development

Which One is Better? Web Developer or Web Development Company in India?

• byEditorial Team
• September 23, 2023

You can style the tabs and content using CSS to create a visually appealing tabbing component.

Conclusion

In this article, we’ve explored how to create tabs in Next.js using the custom component and the styled-jsx library. We’ve also looked at how to handle the active state of the tabs and make the tabs look like they’re part of a traditional tabbed interface. Hope you like this!