Reusable components play a crucial role in the development process for several reasons. They are versatile building blocks that can be utilized throughout your application, offering benefits such as easier maintenance and bug fixing. When it comes to creating a reusable component for image or link elements, there are various approaches, but it's essential to explore more optimized and effective methods. Let's delve into this by discussing Image components and how they can be crafted in a more efficient way. Next.js Old Way of Creating Reusable Next.js Image import Image from 'next/image';


interface Props {
width: number,
height: number,
alt: string,
src: string,
styles: string // for styling
// other styling props
}

const NextImage = (props: Props) => {
  return (
    <Image
      src={props.src}
      width={props.width}
      height={props.height}
      alt={props.alt}
      className={props.styles}
    />
  );
};

export default NextImage; In the traditional approach, the component is created with explicit prop definitions. While functional, it can become cumbersome when you need to modify this component for specific use cases. Making modifications could lead to the creation of multiple similar components, making your codebase less organized. NextImage New Way, More Optimized: 'use client';
import Image from 'next/image';

import cn from 'clsx';
import { ComponentProps, useState } from 'react';

const NextImage = (props: ComponentProps<typeof Image>) => {
  const [isLoading, setLoading] = useState(true);

  return (
    <Image
      {...props}
      src={props.src}
      priority={true}
      className={cn(
        props.className,
        'duration-700 ease-in-out',
        isLoading ? 'scale-105 blur-lg' : 'scale-100 blur-0'
      )}
      onLoadingComplete={() => setLoading(false)}
    />
  );
};

export default NextImage; The new approach offers a more optimized and efficient way to create a reusable Next.js component. It utilizes the type, enabling the component to inherit and adapt to a broader range of props. This versatility allows you to make specific modifications as needed without cluttering your codebase with additional components. In addition, you take advantage of Next.js Image component features such as , which optimizes image loading. Image ComponentProps priority To further clarify, the utility library is used to conditionally apply to elements, enhancing the component's styling capabilities. The hook manages the loading state of the image, and you've set up basic styling for the component, including the ability to scale and blur the image based on loading conditions. By adopting this approach, you maintain the flexibility to tailor your Next.js image component while keeping your codebase organized and efficient. clsx CSS classes useState Link Components The traditional way of rendering Next.Js links can be less effective and makes modification difficult, as we’ve seen above, so let me code you the code for a more optimized Link Component: import Link from 'next/link';
import cn from 'clsx';
import { ComponentProps } from 'react';

const NextLink = (props: ComponentProps<typeof Link>) => {
  return (
    <Link
      {...props}
      className={cn(
        props.className,
        `hover:underline font-medium text-black transition-all duration-200 rounded dark:text-gray-300`
      )}
      href={props.href}
      title={props.title}
    >
      {props.children}
    </Link>
  );
};

export default NextLink; Much like the Image Component we discussed earlier, this component comes with basic styling for consistency and usability. However, it offers a more optimized approach to rendering links in your Next.js application. This ensures that your links not only maintain a consistent style but also remain adaptable and easy to modify as your project evolves. Bonus In our pursuit of creating reusable components, it's essential to extend this approach to various other elements like buttons, headers (h1), paragraphs (p), code blocks, or even custom container elements. While we won't be using this time, we can still use the element's interface. Let's explore this by creating a custom button component: ComponentProps Button Components import cn from "clsx";
import { ButtonHTMLAttributes } from "react";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  className?: string;
}

const Button = (props: ButtonProps) => {
  const { className, ...rest } = props;
  return (
    <button {...rest} className={cn(className)}>
      {props.children}
    </button>
  );
};

export default Button; As you can see, we've created an interface called , extending it to inherit all the props from the button attributes. We've also considered the possibility that the can be undefined or have custom styling provided by the user. This allows us to create a custom button component that's both versatile and adaptable, ensuring a consistent structure for your buttons while allowing for easy modifications. ButtonProps className Custom Element (Containers) When creating web pages, maintaining a structured layout is crucial. To achieve this, you might need to design containers for your content. Similar to what we discussed with the Button Component, we can use a similar approach to create these containers. Let's explore how to create a basic container for your web pages that can be used consistently throughout your application. Here's an example of a simple yet versatile container: import cn from "clsx";
import { HTMLAttributes } from "react";

interface SectionProps extends HTMLAttributes<HTMLElement> {
  className?: string;
}
const Container = (props: SectionProps) => {
  return (
    <section
      {...props}
      className={cn(
        props.className,
        "px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl bg-white mt-8"
      )}
    >
      {props.children}
    </section>
  );
};

export default Container; This Container component, like the previous Button component, doesn't introduce custom props or additional complexities. It simply relies on the for styling, making it adaptable and straightforward for use across various parts of your application. className A little Complex Resuable Component Now, let's consider a more complex scenario where we want to create a dropdown menu or list. In such cases, we need to introduce custom props to handle the menu's visibility. We'll define the and props to manage this. showUserDropdown setShowUserDropdown Here's the initial version of the component: import cn from "clsx";
import { useEffect, useRef } from "react";

interface DropdownWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  showUserDropdown: boolean;
  setShowUserDropdown: React.Dispatch<React.SetStateAction<boolean>>;
}

const DropdownWrapper = (props: DropdownWrapperProps) => {
  const userDropdownRef = useRef<HTMLDivElement | null>(null);
  const { className, ...rest } = props;

  useEffect(() => {
    const handleOutsideClick = (event: any) => {
      if (
        props.showUserDropdown &&
        userDropdownRef.current &&
        !userDropdownRef.current.contains(event.target)
      ) {
        props.setShowUserDropdown(false);
      }
    };
    document.addEventListener("click", handleOutsideClick);
    return () => {
      document.removeEventListener("click", handleOutsideClick);
    };
  }, [props]);
  return (
    <div {...rest} className={cn(className)} ref={userDropdownRef}>
      {props.children}
    </div>
  );
};

export default DropdownWrapper; This component is functional but not entirely correct; why? Because we are passing the and to the div as which will either throw an error in the . So to fix this, we destruct it alongside , then modify to and the same for . showUserDropdown setShowUserDropdown {..rest} server(terminal) or client(UI) className props.showUserDropdown showUserDropdown setShowUserDropdown import cn from "clsx";
import { useEffect, useRef } from "react";

interface DropdownWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  showUserDropdown: boolean;
  setShowUserDropdown: React.Dispatch<React.SetStateAction<boolean>>;
}

const DropdownWrapper = (props: DropdownWrapperProps) => {
  const userDropdownRef = useRef<HTMLDivElement | null>(null);
  const { className, showUserDropdown, setShowUserDropdown, ...rest } = props;

  useEffect(() => {
    const handleOutsideClick = (event: any) => {
      if (
        showUserDropdown &&
        userDropdownRef.current &&
        !userDropdownRef.current.contains(event.target)
      ) {
        setShowUserDropdown(false);
      }
    };
    document.addEventListener("click", handleOutsideClick);
    return () => {
      document.removeEventListener("click", handleOutsideClick);
    };
  }, [props]);
  return (
    <div {...rest} className={cn(className)} ref={userDropdownRef}>
      {props.children}
    </div>
  );
};

export default DropdownWrapper; By making this adjustment, the component functions correctly, ensuring the and props are used in a way that won't cause issues in either the server or the client-side rendering. showUserDropdown setShowUserDropdown Conclusion In this exploration of creating reusable components and handling more complex elements in React, we've seen how to enhance the efficiency and maintainability of your code. By designing components like buttons, containers, and dropdowns, we've shown how you can structure your application for consistency while keeping the flexibility to adapt and modify as needed. : What I’m doing I’m currently building element components for more reusability and accessibility. If you’re interested, then please sign up for my newsletter to be the first to receive a Github link(it’s free). here

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Creating Effective And Optimized Next.JS Reusable Components.

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Calculating the Mean of an Array in Rust

30 Next.js Interview Questions: Get Ready for Your Dream Job

5 reasons to consider Next.js for your next projects

5 Reasons to Convert from React to Next.js

50+ GitHub Repositories Every Front-End Developer Needs

Calculating the Mean of an Array in Rust

30 Next.js Interview Questions: Get Ready for Your Dream Job

5 reasons to consider Next.js for your next projects

5 Reasons to Convert from React to Next.js

50+ GitHub Repositories Every Front-End Developer Needs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps