DEV Community

Sushil
Sushil

Posted on

🌟 Creating Reusable Components with TypeScript in Next.js: A Sidebar Example 📚

Reusable components are crucial for efficiency and maintainability when developing large web applications using Next.js. We'll show you how to use TypeScript to develop a reusable sidebar component in this article. Depending on whether the page is a profile page or the home page, this component will display different content.

Step 1: Setting Up Your Next.js Project 🚀

Set up a new Next.js project:

npx create-next-app@latest my-nextjs-app --ts
cd my-nextjs-app
npm install
Enter fullscreen mode Exit fullscreen mode

Step 2: Creating the Sidebar Component 🧩

We'll create a Sidebar component that takes a type prop to conditionally render different components for the home page and the profile page.

First, create a new directory components/Sidebar and add the following files:

  • Sidebar.tsx
  • LeftSidebar.tsx
  • RightSidebar.tsx

Sidebar.tsx
This will be our main reusable component.

import React from 'react';
import LeftSidebar from './LeftSidebar';
import RightSidebar from './RightSidebar';

type SidebarProps = {
  type: 'home' | 'profile';
};

const Sidebar: React.FC<SidebarProps> = ({ type }) => {
  return (
    <div className="flex">
      <LeftSidebar type={type} />
      <RightSidebar type={type} />
    </div>
  );
};

export default Sidebar;
Enter fullscreen mode Exit fullscreen mode

LeftSidebar.tsx
This component will render different content based on the type prop.

import React from 'react';
import ProfileCard from '../ProfileCard';
import LeftSidebarNav from '../LeftSidebarNav';
import Ad from '../Ad';

type LeftSidebarProps = {
  type: 'home' | 'profile';
};

const LeftSidebar: React.FC<LeftSidebarProps> = ({ type }) => {
  return (
    <div className="flex flex-col gap-6">
      {type === 'home' && <ProfileCard />}
      <LeftSidebarNav />
      <Ad size="sm" />
    </div>
  );
};

export default LeftSidebar;
Enter fullscreen mode Exit fullscreen mode

RightSidebar.tsx
Similarly, this component will render different content based on the type prop.

import React from 'react';
import FriendRequest from '../FriendRequest';
import SuggestedFriends from '../SuggestedFriends';

type RightSidebarProps = {
  type: 'home' | 'profile';
};

const RightSidebar: React.FC<RightSidebarProps> = ({ type }) => {
  return (
    <div className="flex flex-col gap-6">
      {type === 'home' ? <FriendRequest /> : <SuggestedFriends />}
    </div>
  );
};

export default RightSidebar;
Enter fullscreen mode Exit fullscreen mode

Step 3: Using the Sidebar Component 📄

Now, we can use the Sidebar component in our pages and pass the appropriate type prop.

app/page.tsx (Home Page) 🏠

import React from 'react';
import Sidebar from '../components/Sidebar/Sidebar';

const HomePage = () => {
  return (
    <div className="flex">
      <Sidebar type="home" />
      {/* Other content for the home page */}
    </div>
  );
};

export default HomePage;
Enter fullscreen mode Exit fullscreen mode

profile/page.tsx (Profile Page) 👤

import React from 'react';
import Sidebar from '../components/Sidebar/Sidebar';

const ProfilePage = () => {
  return (
    <div className="flex">
      <Sidebar type="profile" />
      {/* Other content for the profile page */}
    </div>
  );
};

export default ProfilePage;
Enter fullscreen mode Exit fullscreen mode

Step 4: Additional Components 🔧

Make sure to create the additional components used in the LeftSidebar and RightSidebar, such as ProfileCard, LeftSidebarNav, Ad, FriendRequest, and SuggestedFriends.

For example, ProfileCard.tsx could look like this:

import React from 'react';

const ProfileCard: React.FC = () => {
  return (
    <div className="p-4 bg-white shadow rounded-lg">
      <div className="text-lg font-semibold">Sushil Magare</div>
      <button className="w-full mt-4 bg-primary text-white font-semibold tracking-wide">
        Profile
      </button>
    </div>
  );
};

export default ProfileCard;
Enter fullscreen mode Exit fullscreen mode

Conclusion 🎉.

By following these steps, we've constructed a reusable Sidebar component in Next.js that changes its content depending on the page type. This strategy promotes a clean and structured codebase, making it easier to manage and scale your application. Feel free to expand on this example by including more features and components as needed for your application. Happy coding!

Top comments (1)

Collapse
 
shaogat_alam_1e055e90254d profile image
Shaogat Alam

Interesting topic! Everything is explained articulately and clearly. For your project, consider checking out this free npm package: select-paginated.