test new next/link behavior

components/Footer/Footer.tsx

@@ -35,7 +35,7 @@ const Row = styled("div", {
   },
 });
 
-const Link = styled("a", {
+const Link = styled(NextLink, {
   color: "$mediumDark",
   textDecoration: "none",
 });
@@ -88,13 +88,13 @@ const Footer = ({ ...rest }: FooterProps) => (
     <Row>
       <div>
         Content{" "}
-        <NextLink href="/license/" prefetch={false} passHref={true}>
+        <Link href="/license/" prefetch={false} title="Creative Commons Attribution 4.0 International">
-          <Link title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</Link>
+          licensed under CC-BY-4.0
-        </NextLink>
+        </Link>
         ,{" "}
-        <NextLink href="/previously/" prefetch={false} passHref={true}>
+        <Link href="/previously/" prefetch={false} title="Previously on...">
-          <Link title="Previously on...">2001</Link>
+          2001
-        </NextLink>{" "}
+        </Link>{" "}
         – {new Date(process.env.NEXT_PUBLIC_RELEASE_DATE).getUTCFullYear()}.
       </div>
 

components/Link/Link.tsx

@@ -4,7 +4,7 @@ import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 import type { LinkProps as NextLinkProps } from "next/link";
 
-const FancyLink = styled("a", {
+const StyledLink = styled(NextLink, {
   color: "$link",
   textDecoration: "none",
 
@@ -34,29 +34,20 @@ const FancyLink = styled("a", {
   },
 });
 
-export type LinkProps = Omit<ComponentProps<typeof FancyLink>, "href"> &
+export type LinkProps = Omit<ComponentProps<typeof StyledLink>, "href"> &
   NextLinkProps & {
     underline?: boolean;
     forceNewWindow?: boolean;
   };
 
-const Link = ({
+const Link = ({ href, prefetch = false, target, rel, underline = true, forceNewWindow, ...rest }: LinkProps) => {
-  href,
-  prefetch = false,
-  passHref = true,
-  target,
-  rel,
-  underline = true,
-  forceNewWindow,
-  ...rest
-}: LinkProps) => {
   // this component auto-detects whether or not we should use a normal HTML anchor externally or next/link internally,
   // can be overridden with `forceNewWindow={true}`.
   const isExternal = isAbsoluteUrl(href.toString());
 
   if (forceNewWindow || isExternal) {
     return (
-      <FancyLink
+      <StyledLink
         href={href.toString()}
         target={target ?? "_blank"}
         rel={[rel, "noopener", isExternal ? "noreferrer" : ""].join(" ").trim()}
@@ -64,13 +55,9 @@ const Link = ({
         {...rest}
       />
     );
-  } else {
-    return (
-      <NextLink href={href} prefetch={prefetch} passHref={passHref}>
-        <FancyLink target={target} rel={rel} underline={underline} {...rest} />
-      </NextLink>
-    );
   }
+
+  return <StyledLink {...{ href, prefetch, target, rel, underline, ...rest }} />;
 };
 
 export default Link;

components/MenuItem/MenuItem.tsx

@@ -1,7 +1,7 @@
 import NextLink from "next/link";
 import { styled } from "../../lib/styles/stitches.config";
 
-const Link = styled("a", {
+const Link = styled(NextLink, {
   display: "inline-block",
   color: "$mediumDark",
   textDecoration: "none",
@@ -67,11 +67,9 @@ const MenuItem = ({ icon: ItemIcon, href, text, current, className }: MenuItemPr
   // allow both navigational links and/or other interactive react components (e.g. the theme toggle)
   if (href) {
     return (
-      <NextLink href={href} prefetch={false} passHref={true}>
+      <Link href={href} prefetch={false} className={className} current={current} title={text} aria-label={text}>
-        <Link className={className} current={current} title={text} aria-label={text}>
+        {linkContent}
-          {linkContent}
+      </Link>
-        </Link>
-      </NextLink>
     );
   } else {
     return linkContent;

components/NoteMeta/NoteMeta.tsx

@@ -22,7 +22,7 @@ const MetaItem = styled("div", {
   whiteSpace: "nowrap",
 });
 
-const MetaLink = styled("a", {
+const MetaLink = styled(NextLink, {
   color: "inherit",
   textDecoration: "none",
 });
@@ -62,20 +62,17 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
   <>
     <Wrapper>
       <MetaItem>
-        <NextLink
+        <MetaLink
           href={{
             pathname: "/notes/[slug]/",
             query: { slug },
           }}
-          passHref={true}
         >
-          <MetaLink>
+          <span>
-            <span>
+            <Icon as={DateIcon} />
-              <Icon as={DateIcon} />
+          </span>
-            </span>
+          <Time date={date} format="MMMM D, YYYY" />
-            <Time date={date} format="MMMM D, YYYY" />
+        </MetaLink>
-          </MetaLink>
-        </NextLink>
       </MetaItem>
 
       {tags.length > 0 && (

components/NoteTitle/NoteTitle.tsx

@@ -18,7 +18,7 @@ const Title = styled("h1", {
   },
 });
 
-const Link = styled("a", {
+const Link = styled(NextLink, {
   color: "$text",
   textDecoration: "none",
 });
@@ -27,15 +27,13 @@ export type NoteTitleProps = Pick<NoteFrontMatter, "slug" | "htmlTitle"> & Compo
 
 const NoteTitle = ({ slug, htmlTitle, ...rest }: NoteTitleProps) => (
   <Title {...rest}>
-    <NextLink
+    <Link
       href={{
         pathname: "/notes/[slug]/",
         query: { slug },
       }}
-      passHref={true}
+      dangerouslySetInnerHTML={{ __html: htmlTitle }}
-    >
+    />
-      <Link dangerouslySetInnerHTML={{ __html: htmlTitle }} />
-    </NextLink>
   </Title>
 );
 

components/PageTitle/PageTitle.tsx

@@ -14,7 +14,7 @@ const Title = styled("h1", {
   },
 });
 
-const Link = styled("a", {
+const Link = styled(NextLink, {
   color: "$text",
   textDecoration: "none",
 });
@@ -26,9 +26,7 @@ const PageTitle = ({ children, ...rest }: PageTitleProps) => {
 
   return (
     <Title {...rest}>
-      <NextLink href={router.pathname} passHref={true}>
+      <Link href={router.pathname}>{children}</Link>
-        <Link>{children}</Link>
-      </NextLink>
     </Title>
   );
 };

components/Selfie/Selfie.tsx

@@ -20,7 +20,7 @@ const Image = styled(NextImage, {
   },
 });
 
-const Link = styled("a", {
+const Link = styled(NextLink, {
   display: "inline-flex",
   alignItems: "center",
   color: "$mediumDark",
@@ -48,15 +48,13 @@ const Name = styled("span", {
   },
 });
 
-export type SelfieProps = ComponentProps<typeof Link>;
+export type SelfieProps = Omit<ComponentProps<typeof Link>, "href">;
 
 const Selfie = ({ ...rest }: SelfieProps) => (
-  <NextLink href="/" passHref={true}>
+  <Link href="/" rel="author" title={authorName} {...rest}>
-    <Link rel="author" title={authorName} {...rest}>
+    <Image src={selfieJpg} alt={`Photo of ${authorName}`} width={50} height={50} quality={60} layout="raw" priority />
-      <Image src={selfieJpg} alt={`Photo of ${authorName}`} width={50} height={50} quality={60} layout="raw" priority />
+    <Name>{authorName}</Name>
-      <Name>{authorName}</Name>
+  </Link>
-    </Link>
-  </NextLink>
 );
 
 export default Selfie;

next.config.js

@@ -43,6 +43,7 @@ module.exports = (phase, { defaultConfig }) => {
         // allow forgoing the mess of `<span>`s around statically imported images
         layoutRaw: true,
       },
+      newNextLinkBehavior: true, // https://github.com/vercel/next.js/pull/36436
     },
     webpack: (config) => {
       // this lets us statically import webfonts like we would images, allowing cool things like preloading them