Invalid <Link> with <a> child

[thany]

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

1. Install JSS using the nextjs and nextjs-styleguide boilerplates
2. Upgrade to Next.js 13
3. Start it
4. Navigate to the styleguide
5. Kaboom

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

• Sitecore Version: 9.3
• JSS Version: 21.0.5
• Browser Name and version: Firefox 109
• Operating System and version (desktop or mobile): Windows 10 (desktop)
• Link to your project (if available): N/A, still poccing it

Screenshots

[thany]

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]

Hi @thany - We don't currently support Next 13, but have plans to in the near future. I've added this to our backlog to make sure it is addressed in the process. Thanks!

[thany]

The most obvious followup question then is, of course: when? 🙂

[ambrauer]

@thany Very soon (#1324) ☺ Planning to release by March.