link component breaks with nextjs link v13

[SkyBulk]

Is your feature request related to a problem? Please describe.
I am trying to wrap nextjs link component inside theme-ui link component in nextjs v13 renders automatically it breaks the code with the following error: Error: Hydration failed because the initial UI does not match what was rendered on the server.

Describe the solution you'd like

add a as prop so that you can use it this way <A {...rest} as={NextLink}>Hello</A>

Describe alternatives you've considered
I am currently using this component to temporary fix my code

<NextLink href={path} legacyBehavior>

Additional context

/** @jsxRuntime classic */
/** @jsx jsx */
import NextLink from 'next/link';
import { jsx, Link as A } from 'theme-ui';

export function Link({ path, label, children, ...rest }) {
  return (
    <NextLink href={path}>
      <A {...rest}>{children ? children : label}</A>
    </NextLink>
  );
}

[Lachlan Campbell]

We don’t make this clear enough in the docs, but you want to use either the JSX pragma or the component library; no need to use both in the same file. So if you’re using the pragma, you can skip using our Link component & the sx prop (including variant inside it) will apply theme-aware styling. You could instead use the component with legacyBehavior, though that’s not ideal since I presume Next will remove it at some point.

[SkyBulk]

exactly. it was my quick fix from now , however I am aware of nextjs will remove it in the future. how can I build the exact thing compatible with the nextjs v13?

[Lachlan Campbell]

Keep the pragma, drop the Theme UI Link component entirely, then on the Next link, add sx={{ variant: "styles.a" }}