Much nicer and more intuitive Next.js Link abstraction

Link.tsx

// ----------------------------------------------------------------------
// Smart wrapper around Next.js <Link>
//
// This is to improve the default handling of Next.js dynamic links which
// requires both `href` and `as` props.
// This improvement enables the following usage:
//
// <Link page="/users/[id]" params={{ id: user.id }}>{user.name}</Link>
//
// <Link page="/blog/[...slug]" params={{ slug: ['coffee', 'frenchpress'] }}>View Here</Link>
// ----------------------------------------------------------------------
export type LinkProps = {
  // TODO require `page` OR `href`
  href?: string;
  as?: string;
  page?: string;

  children: ReactNode;
  className?: string;
  activeClassName?: string;
  partiallyActive?: boolean;

  params?: Record<string, number | number[] | string | string[]>;

  linkProps?: Omit<ComponentProps<typeof NextLink>, 'href' | 'as'>;
} & ComponentProps<'a'>;

export const Link = ({
  href,
  as,
  page,
  children,
  className,
  activeClassName,
  partiallyActive = false,
  params,
  linkProps = {},
  ...props
}: LinkProps) => {
  const { pathname } = useRouter();

  // If user suppiled href & as, then use those. Otherwise fallback to smart `page` logic
  const finalHref = href || page;
  let finalAs = as || page;

  if (page && params) {
    // We treat the `page` prop as a template for generating the `as` prop
    for (const [key, value] of Object.entries(params)) {
      if (
        finalAs.includes(`[${key}]`) &&
        (typeof value === 'string' || typeof value === 'number')
      ) {
        finalAs = finalAs.replace(`[${key}]`, value.toString());
      } else if (finalAs.includes(`[[...${key}]]`)) {
        const normalizedValue = Array.isArray(value)
          ? value.join('/')
          : value.toString();
        finalAs = finalAs.replace(`[[...${key}]]`, normalizedValue);
      } else if (finalAs.includes(`[...${key}]`)) {
        const normalizedValue = Array.isArray(value)
          ? value.join('/')
          : value.toString();
        finalAs = finalAs.replace(`[...${key}]`, normalizedValue);
      }
    }
  }

  const destPath = finalAs || finalHref;
  const isActive = partiallyActive
    ? pathname.startsWith(destPath)
    : pathname === destPath;

  return (
    <NextLink {...linkProps} href={finalHref} as={finalAs}>
      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- next auto adds href */}
      <a className={cn([className, isActive && activeClassName])} {...props}>
        {children}
      </a>
    </NextLink>
  );
};

What is the cn function?

What is the cn function?

I'm guessing it is https://github.com/JedWatson/classnames

Yeah, that's it. Sorry for the confusion!

Thanks for the clarification!