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

#webdev #javascript #react #typescript

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

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;

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;

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;

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;

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;

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;

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!