【React】MantineのメニューリンクでNext.js13以降のLinkを設定したい場合

概要

MantineのMenuコンポーネントではMenu.Item as Next.js Linkのドキュメントで紹介されている通り、Next.jsのリンクを設定することができます。ただ、このドキュメントの記載（2025年3月時点）では、Next.js 13以降だとNext.js 13系で Link with a or use Link legacyBehavior エラーの解決方法の記事にある通り、aタグが配下にあることでエラーとなります。
ということで、どういうふうに対応すればよいかのメモ書きを残しておきます。

前提

• 使用したNext.jsのバージョンは15.2.3です。
• 使用したMantineのバージョンは7.17.2です。

対応

以下の通り、aタグを削除してothersのpropsとrefをLinkコンポーネントに直接指定すれば大丈夫でした。

import { forwardRef } from "react";
import Link from "next/link";

export const NextLink = forwardRef(
  (
    { href, ...others }: React.ComponentPropsWithoutRef<typeof Link>,
    ref: React.ForwardedRef<HTMLAnchorElement>
  ) => <Link href={href} {...others} ref={ref}></Link>
);
NextLink.displayName = "nextLink";