cleanup nested links to avoid hydration errors

carbonplan · Dec 18, 2024 · 5021602 · 5021602
1 parent 8e0cf41
commit 5021602
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 45 deletions.
diff --git a/src/footer.js b/src/footer.js
@@ -145,21 +145,20 @@ const Footer = () => {
               pt: [2],
             }}
           >
-            <NextLink href='/terms' passHref>
-              <Box
-                as='a'
-                sx={{
-                  textDecoration: 'none',
-                  fontSize: [1, 1, 1, 2],
-                  color: 'secondary',
-                  fontFamily: 'mono',
-                  letterSpacing: 'mono',
-                  display: 'block',
-                }}
-              >
-                READ OUR TERMS
-              </Box>
-            </NextLink>
+            <Link
+              as={NextLink}
+              href='/terms'
+              sx={{
+                textDecoration: 'none',
+                fontSize: [1, 1, 1, 2],
+                color: 'secondary',
+                fontFamily: 'mono',
+                letterSpacing: 'mono',
+                display: 'block',
+              }}
+            >
+              READ OUR TERMS
+            </Link>
           </Box>
         </Column>
         <Column

diff --git a/src/header.js b/src/header.js
@@ -70,17 +70,17 @@ const Nav = ({ link, mode, nav, first, setExpanded }) => {
 
   if (mode === 'homepage' || (mode === 'local' && nav === url)) {
     return (
-      <NextLink href={href} passHref>
-        <Link
-          onClick={() => {
-            if (nav === url) setExpanded(false)
-          }}
-          sx={sx.link(nav, url, first)}
-        >
-          <HoverArrow />
-          {display}
-        </Link>
-      </NextLink>
+      <Link
+        as={NextLink}
+        href={href}
+        onClick={() => {
+          if (nav === url) setExpanded(false)
+        }}
+        sx={sx.link(nav, url, first)}
+      >
+        <HoverArrow />
+        {display}
+      </Link>
     )
   } else {
     return (
@@ -126,22 +126,22 @@ const Header = ({ status, mode, nav, menuItems }) => {
           sx={{ pointerEvents: 'all', display: 'block', width: 'fit-content' }}
         >
           {(mode == 'homepage' || mode == 'local') && (
-            <NextLink href='/' passHref>
-              <Link
-                aria-label='CarbonPlan Homepage'
+            <Link
+              as={NextLink}
+              href='/'
+              aria-label='CarbonPlan Homepage'
+              sx={{
+                display: 'block',
+              }}
+            >
+              <Logo
+                id='logo'
                 sx={{
-                  display: 'block',
+                  cursor: 'pointer',
+                  color: 'primary',
                 }}
-              >
-                <Logo
-                  id='logo'
-                  sx={{
-                    cursor: 'pointer',
-                    color: 'primary',
-                  }}
-                />
-              </Link>
-            </NextLink>
+              />
+            </Link>
           )}
           {(mode == null || mode == 'remote') && (
             <Link

diff --git a/src/link.js b/src/link.js
@@ -21,11 +21,9 @@ const Link = (
 ) => {
   if (internal || (href && href.startsWith('/'))) {
     return (
-      <NextLink href={href} passHref>
-        <ThemedLink ref={ref} {...props}>
-          {children}
-        </ThemedLink>
-      </NextLink>
+      <ThemedLink as={NextLink} href={href} ref={ref} {...props}>
+        {children}
+      </ThemedLink>
     )
   } else if (tracking) {
     let action