Effective TypeScript Patterns for Scalable Next.js 15 Logic Architectures (2026)

Introduction

As Next.js 15 continues to evolve, pushing the boundaries of full-stack React development, the demand for robust, scalable logic architectures becomes paramount. TypeScript is an indispensable tool in this landscape, providing the type safety necessary to build complex applications with confidence. This post delves into a practical TypeScript pattern—the "As" prop pattern with Polymorphic Components—designed to enhance component reusability and type safety in your Next.js projects, ensuring your codebase remains maintainable and extensible well into 2026.

1. The `As` Prop Pattern with Polymorphic Components

Building a design system or a set of highly reusable UI components often requires flexibility. A single component, like a Button, might need to render as an HTML <button>, an <a> tag, or even a Next.js Link component, all while preserving its inherent styling and behavior. The "As" prop pattern, leveraging TypeScript's generics and React.ElementType, allows you to create such polymorphic components with full type safety.

This pattern provides:

Enhanced Reusability: A single component can adapt to various semantic HTML elements or React components.
Type Safety: TypeScript correctly infers and validates props based on the dynamically rendered component.
Reduced Boilerplate: Avoid creating separate components for each HTML element variation.

TYPESCRIPT

import React from 'react';
import Link from 'next/link'; // Assuming Next.js environment

// 1. Define the 'as' prop type
type AsProp<C extends React.ElementType> = {
  /**
   * The component to render instead of the default.
   * Can be a string (e.g., 'a', 'div') or a React component type.
   */
  as?: C;
};

// 2. Define a type for the ref to pass to the underlying component
type PolymorphicRef<C extends React.ElementType> =
  React.ComponentPropsWithRef<C>['ref'];

// 3. Define the core polymorphic component props utility type
// This type merges base component props, the 'as' prop,
// and props of the actual element being rendered,
// while avoiding prop clashes.
type PolymorphicComponentProps<
  C extends React.ElementType,
  Props = {}
> = React.PropsWithChildren<Props & AsProp<C>> &
  Omit<React.ComponentPropsWithoutRef<C>, keyof (Props & AsProp<C>)>;

// 4. Combine with PolymorphicRef for components using forwardRef
type PolymorphicComponentPropsWithRef<
  C extends React.ElementType,
  Props = {}
> = PolymorphicComponentProps<C, Props> & { ref?: PolymorphicRef<C> };

// --- Example Component: A Polymorphic Button ---

// Props specific to our Button component
type ButtonProps = {
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
};

// Our Button component, typed to be polymorphic
const Button = React.forwardRef(
  <C extends React.ElementType = 'button'>(
    {
      as,
      variant = 'primary',
      size = 'medium',
      children,
      className, // Allow external classes to be passed
      ...rest
    }: PolymorphicComponentPropsWithRef<C, ButtonProps>,
    ref?: PolymorphicRef<C>
  ) => {
    // Determine the actual component to render
    const Component = as || 'button';

    // Basic styling (e.g., using Tailwind CSS classes for demonstration)
    const baseStyles = 'inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2';
    const variantStyles = variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500' : 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400';
    const sizeStyles = {
      small: 'px-2.5 py-1.5 text-sm',
      medium: 'px-4 py-2 text-base',
      large: 'px-5 py-2.5 text-lg',
    }[size];

    return (
      <Component
        ref={ref}
        className={`${baseStyles} ${variantStyles} ${sizeStyles} ${className || ''}`}
        {...rest}
      >
        {children}
      </Component>
    );
  }
) as <C extends React.ElementType = 'button'>(
  props: PolymorphicComponentPropsWithRef<C, ButtonProps>
) => React.ReactElement | null;

// --- Usage Examples ---

// 1. As a standard HTML button (default behavior)
function App() {
  return (
    <div>
      <Button onClick={() => alert('Hello!')} variant="primary" size="medium">
        Submit Form
      </Button>

      {/* 2. As an HTML anchor tag */}
      <Button as="a" href="/dashboard" variant="secondary" target="_blank" rel="noopener noreferrer">
        Visit Dashboard
      </Button>

      {/* 3. As a Next.js Link component */}
      {/* Note: When 'as' is a component like Link, props like 'href'
          are passed directly to Link, which then renders its own 'a' tag. */}
      <Button as={Link} href="/products" variant="primary" className="mt-4">
        Go to Products Page
      </Button>

      {/* 4. With a custom component */}
      <Button as={(props) => <div {...props} data-custom-attribute="true">My Custom Div</div>} variant="secondary">
        Custom Element
      </Button>
    </div>
  );
}

// Don't forget to export the Button for use in your app
export default Button;

Conclusion

The "As" prop pattern with polymorphic components offers a powerful solution for building flexible, type-safe, and highly reusable UI components in your Next.js 15 applications. By centralizing common logic and styling, while allowing dynamic rendering of underlying elements, this pattern significantly reduces code duplication and improves maintainability. Embracing such advanced TypeScript patterns is fundamental to developing scalable and resilient front-end architectures that can adapt to the evolving demands of modern web development.

---TAGS_START--- TypeScript, Next.js, React, Polymorphic Components, Type Safety, Scalability, React Props, UI Patterns, Component Reusability, Next.js 15 ---TAGS_END---

Search This Blog

React Lab