expose next/link prefetch behavior, similar to what getImageProps does for next/image

[stefanprobst]

Goals

i want to be able to use next/link's prefetch behavior (incl. the intersection observer) with components where i cannot (for a11y reasons) use next/link's <Link> directly.

one example would be building a menu with links using react aria components. i need to use <MenuItem> instead of <NextLink> here, but still want to be able to easily apply next/link's prefetch behavior to these navigation links.

Non-Goals

No response

Background

see e.g. the discussion on framework routing support in react aria components:

• React Aria Components: rendering as custom components adobe/react-spectrum#5476 (comment)
• React Aria Components: rendering as custom components adobe/react-spectrum#5476 (comment)

Proposal

// returns `onTouchStart` and `onMouseEnter` handlers, and optionally sets up an intersection observer attached to `ref.current`
const nextLinkProps = useNextLinkProps(props, ref)

<MenuItem ref={ref} {...nextLinkProps} />