The Link component doesn't seem to forward refs

[alcar]

Description

Passing a ref prop to the Link component causes the following error:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://github.com/alcar/next-intl-ref-issue

Reproduction description

Steps to reproduce:

1. Install the dependencies with npm i.
2. Run the app with npm run dev.
3. Visit the app (defaults to http://localhost:3000).
4. Open the dev tools.
5. See the error in the console.

Expected behaviour

I would expect the ref to be passed all the way down to Next.js's Link.

Since BaseLink already contains a forwardRef, I believe adding a forwardRef to Link would suffice. I've tried the following code locally (npm link) and it seems to fix the issue.

// ...

function Link({locale, ...rest}: Props, ref: Ref<HTMLAnchorElement>) {
  const defaultLocale = useClientLocale();

  return <BaseLink ref={ref} locale={locale || defaultLocale} {...rest} />;
}

export default forwardRef(Link);

I'm happy to open a PR if that solution looks good!

[amannn]

Great point, thanks for the detailed bug report and the analysis! I've just added #300 to address this and will cut a patch release once CI passes. I'll also publish a new RSC beta release on top of this, in case you use that.

I'm happy to open a PR if that solution looks good!

Sorry, I saw this a bit too late! In case you want to contribute in the future you're more than welcome to! 🙂