Do component static properties get stripped in Next.js somehow?

[stable glen]

I'm trying to assign static properties to components, and I've tried every way imaginable, but nothing seems to work.

Minimal example:

'use client';

export interface LinkProps
  extends Pick<
      ButtonProps,
      | 'variant'
      | 'color'
      | 'size'
      | 'startIcon'
      | 'endIcon'
      | 'loadingIndicator'
      | 'loading'
      | 'tooltip'
      | 'tooltipProps'
      | 'disabled'
      | 'children'
      | 'className'
    >,
    Omit<LinkPrimitiveProps, 'href'>,
    Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'rel'> {
  href: string | UrlObject;

const LinkComponent: React.FC<LinkProps> = ({
  children,
  href,
  color,
  variant,
  ...props
}) => {
  return (
      <NextLink href={href} {...props}>
        {children}
      </NextLink>
  );
};

/**
 * Attach the static properties to the Button component.
 */
const Link = Object.assign(LinkComponent, {
  Colors,
  Sizes,
  Variants
});

export { Link };

Should be able to do this

<Link
  color={Link.Colors.RED}
  variant={Link.Variants.FILL}
  href={href}
>
  Hello
</Link>

[languid pewter]

Hi @stable glen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources provided, there isn't specific information about Next.js stripping static properties from components. However, I can provide some insights and suggestions related to your question about using static properties with components in Next.js.

The issue you're experiencing doesn't seem to be directly related to Next.js stripping static properties. Instead, it might be related to how you're defining and using the component. Here are a few points to consider:

1. Client Components: You've marked your component with 'use client', which is correct if you're using client-side interactivity. This shouldn't affect static properties.

2. Component Definition: Your approach of defining the component and then assigning static properties using Object.assign is a valid pattern in React and should work in Next.js as well.

3. Type Definitions: Make sure your type definitions for Colors, Sizes, and Variants are correctly defined and imported.

4. Usage: The usage example you provided looks correct, assuming Colors, Sizes, and Variants are properly defined.

If you're still experiencing issues, it might be helpful to check:

1. Are you exporting the Link component correctly from its file?
2. Are you importing it correctly where you're using it?
3. Have you tried logging the Link component to the console to see if the static properties are present?

If the problem persists, it might be worth creating a minimal reproducible example and opening an issue on the Next.js GitHub repository, as this behavior is not expected and might be a bug.

For reference, you can look at how the official Next.js Link component is implemented and used:

Next.js Link Component API Reference

This documentation doesn't mention any limitations regarding static properties on components, which further suggests that your approach should work.

If you need more specific help, you might want to provide more details about the exact error or unexpected behavior you're encountering.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@stable glen Kapa.ai is still learning and improving, please let me know how I did by reacting below.