Add full support to the Link component for Next.js app router with basePath set

[cbodin]

Provide your feedback here.

If a basePath is configured with Next.js the next Link component will handle this by:

• Prepending the basePath to the rendered link. E.g. basePath = "next", href = "/" will generate the anchor with href="/next".
• Pushing to the router without the basePath, as the app router also prepends this.

If the spectrum Link component is used and we don't include the basePath in the href, the rendered link will be invalid as it's missing the basePath. However, client navigation will work correctly. If the basePath is specified in the href, the link will be correct but client navigation will go to a 404 page.

Related to:

• React Aria Components: rendering as custom components #5476

🔦 Context

I'm trying to use the Link component with Next.js when a basePath is specified.

💻 Code Sample

https://codesandbox.io/p/devbox/wizardly-waterfall-xg9gdj?file=%2Fapp%2Fpage.tsx

Version

1.0.0

What browsers are you seeing the problem on?

No response

If other, please specify

No response

What operating system are you using?

No response

[morleytatro]

#5335

[snowystinger]

closing as dupe