thany
commented
1 year ago Currently it goes:
// determine if a link is a route or not.
if (internalLinkMatcher.test(href)) {
return (
<NextLink
href={{ pathname: href, query: querystring, hash: anchor }}
key="link"
locale={false}
>
<a
title={value.title}
target={value.target}
className={value.class}
{...htmlLinkProps}
ref={ref}
>
{text}
{children}
</a>
</NextLink>
);
}And it should be something like this:
// determine if a link is a route or not.
if (internalLinkMatcher.test(href)) {
return (
<NextLink
href={{ pathname: href, query: querystring, hash: anchor }}
key="link"
locale={false}
title={value.title}
target={value.target}
className={value.class}
{...htmlLinkProps}
ref={ref}
>
{text}
{children}
</NextLink>
);
}
ambrauer
Description
In the Link component source it is hardcoded with a
<a>inside the<Link>component. There appears to be no way to change/customise how link components are created.Just to cover my bottom, please be adviced that this is a bug in the sitecore-jss-nextjs package, NOT in the nextjs boilerplate project that is installed as part of a JSS installation into Sitecore, despite using it as an example to illustrate the bug.
Expected behavior
For Next.js 13, it should NOT include a
<a>as a child of<Link>.Steps To Reproduce
Possible Fix
This could be done with a switch of some kind, a configuration option somewhere, or anything really that makes it possible to use Next.js as intended. The
<a>should be removed, and its props and contents moved directly onto/into the<Link>component.Your Environment
Screenshots