feat: add forward-compatibility support for Next v13 Link (#808)

hashicorp · Nov 14, 2022 · 45fe15e · 45fe15e · vercel · Nov 14, 2022
1 parent 5d29cc1
commit 45fe15e
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 9 deletions.
diff --git a/.changeset/silver-cars-care.md b/.changeset/silver-cars-care.md
@@ -0,0 +1,14 @@
+---
+'@hashicorp/react-button': minor
+'@hashicorp/react-card': minor
+'@hashicorp/react-docs-sidenav': minor
+'@hashicorp/react-error-view': minor
+'@hashicorp/react-link-wrap': minor
+'@hashicorp/react-next-steps': minor
+'@hashicorp/react-pricing-features': minor
+'@hashicorp/react-pricing-tiers': minor
+'@hashicorp/react-search': minor
+'@hashicorp/react-standalone-link': minor
+---
+
+Use `legacyBehavior` prop for `next/link` to support Next v13
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
@@ -115,7 +115,13 @@ function Button({
     </Elem>
   )
 
-  return url ? <Link href={url}>{content}</Link> : content
+  return url ? (
+    <Link href={url} legacyBehavior>
+      {content}
+    </Link>
+  ) : (
+    content
+  )
 }
 
 function Icon({

diff --git a/packages/card/primitives.tsx b/packages/card/primitives.tsx
@@ -33,7 +33,7 @@ const Card = React.forwardRef<HTMLAnchorElement, BaseCardProps>(
             {withArrow ? <IconArrowRight24 /> : null}
           </div>
 
-          <Link href={link}>
+          <Link href={link} legacyBehavior>
             {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
             <a ref={ref} className={s.link} aria-label={heading} />
           </Link>

diff --git a/packages/docs-sidenav/index.tsx b/packages/docs-sidenav/index.tsx
@@ -284,7 +284,7 @@ function NavLeaf({ title, url, isActive, isHidden }: NavLeafProps) {
   // if the item has a path, it's a leaf node so we render a link to the page
   return (
     <li className={isHidden ? s.hiddenNode : ''}>
-      <Link href={url}>
+      <Link href={url} legacyBehavior>
         <a className={s.navItem} data-is-active={isActive}>
           <InlineSvg
             src={svgBullet}

diff --git a/packages/error-view/index.tsx b/packages/error-view/index.tsx
@@ -30,7 +30,7 @@ function ErrorPage({ statusCode }: ErrorPageProps): React.ReactElement {
       <h1 className={s.heading}>{heading}</h1>
       <p>{message}</p>
       <p>
-        <Link href="/">
+        <Link href="/" legacyBehavior>
           <a className={s.link}>Back to Home</a>
         </Link>
       </p>

diff --git a/packages/link-wrap/index.js b/packages/link-wrap/index.js
@@ -22,6 +22,7 @@ export default function LinkWrap({
         replace={replace}
         scroll={scroll}
         shallow={shallow}
+        legacyBehavior
       >
         <a data-testid="a" {...props}>
           {children}

diff --git a/packages/next-steps/index.tsx b/packages/next-steps/index.tsx
@@ -76,7 +76,7 @@ export default function NextSteps({
 function Tile({ variant, heading, description, cta }) {
   const [isHovered, setIsHovered] = React.useState(false)
   return (
-    <Link href={cta.url}>
+    <Link href={cta.url} legacyBehavior>
       <a
         className={classNames(s.tile, s[variant])}
         onMouseOver={() => {

diff --git a/packages/pricing-features/components/sticky-tiers/index.tsx b/packages/pricing-features/components/sticky-tiers/index.tsx
@@ -47,7 +47,7 @@ export default function StickyTiers({
           <div key={title} className={s.tier}>
             <p className={s.tierName}>{title}</p>
             <div className={s.cta}>
-              <Link href={cta.url}>
+              <Link href={cta.url} legacyBehavior>
                 {/* links should not be tabbable since they are in other locations on the page (see tier cards in hero) */}
                 <a onClick={cta.onClick} tabIndex={-1}>
                   {cta.title}

diff --git a/packages/pricing-tiers/index.tsx b/packages/pricing-tiers/index.tsx
@@ -82,7 +82,7 @@ export default function PricingTiers({ tiers }: PricingTiersProps) {
                         onClick={cta.onClick}
                       />
                     ) : (
-                      <Link href={cta.url}>
+                      <Link href={cta.url} legacyBehavior>
                         <a className={s.textLink} onClick={cta.onClick}>
                           {cta.title}
                         </a>

diff --git a/packages/search/hits.js b/packages/search/hits.js
@@ -186,7 +186,7 @@ const Hit = forwardRef(
         id={`hit-${hit.__position}`}
         data-testid="hit-item"
       >
-        <Link {...hitLink} passHref>
+        <Link {...hitLink} passHref legacyBehavior>
           <LinkWithClick
             ref={ref}
             className={classNames(s.hitLinkWrapper, { [s.isActive]: isActive })}

diff --git a/packages/standalone-link/index.tsx b/packages/standalone-link/index.tsx
@@ -15,7 +15,7 @@ export default function StandaloneLink({
   const [isHovered, setIsHovered] = React.useState(false)
   const { onMouseOver, onMouseOut } = restProps
   return (
-    <Link href={href}>
+    <Link href={href} legacyBehavior>
       <a
         className={classNames(s.root, s[appearance], s[theme])}
         onMouseOver={(event) => {