fix: use html links when needed (nodejs#6103)

ovflowd · web-flow · commit 195dbfb64d01 · 2023-11-11T04:07:13.000Z
diff --git a/components/Common/ActiveLocalizedLink/index.tsx b/components/Common/ActiveLocalizedLink/index.tsx
@@ -3,7 +3,8 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 
-import { Link, usePathname } from '@/navigation.mjs';
+import Link from '@/components/Link';
+import { usePathname } from '@/navigation.mjs';
 
 type ActiveLocalizedLinkProps = ComponentProps<typeof Link> & {
   activeClassName: string;
diff --git a/components/Common/Badge/index.tsx b/components/Common/Badge/index.tsx
@@ -1,7 +1,7 @@
 import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 import styles from './index.module.css';
 
diff --git a/components/Common/Banner/index.tsx b/components/Common/Banner/index.tsx
@@ -1,7 +1,7 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
 import type { FC } from 'react';
 
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 import styles from './index.module.css';
 
diff --git a/components/Common/Breadcrumbs/BreadcrumbLink/index.tsx b/components/Common/Breadcrumbs/BreadcrumbLink/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 import styles from './index.module.css';
 
diff --git a/components/Common/CrossLink/index.tsx b/components/Common/CrossLink/index.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import PrevNextArrow from '@/components/Common/PrevNextArrow';
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 import styles from './index.module.css';
 
diff --git a/components/Common/MetaBar/index.stories.tsx b/components/Common/MetaBar/index.stories.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image';
 
 import AvatarGroup from '@/components/Common/AvatarGroup';
 import MetaBar from '@/components/Common/MetaBar';
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 type Story = StoryObj<typeof MetaBar>;
 type Meta = MetaObj<typeof MetaBar>;
diff --git a/components/Common/MetaBar/index.tsx b/components/Common/MetaBar/index.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl';
 import { Fragment, useMemo } from 'react';
 import type { FC } from 'react';
 
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 import styles from './index.module.css';
 
diff --git a/components/Common/Pagination/PaginationListItem/index.tsx b/components/Common/Pagination/PaginationListItem/index.tsx
@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 import styles from './index.module.css';
 
diff --git a/components/Downloads/DownloadList.tsx b/components/Downloads/DownloadList.tsx
@@ -1,8 +1,8 @@
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
+import Link from '@/components/Link';
 import { useSiteNavigation } from '@/hooks/server';
-import { Link } from '@/navigation.mjs';
 import type { NodeRelease } from '@/types';
 
 const DownloadList: FC<NodeRelease> = ({ versionWithPrefix }) => {
diff --git a/components/Downloads/PrimaryDownloadMatrix.tsx b/components/Downloads/PrimaryDownloadMatrix.tsx
@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import type { FC } from 'react';
 import semVer from 'semver';
 
+import Link from '@/components/Link';
 import { WithCurrentOS } from '@/components/withCurrentOS';
 import { useClientContext } from '@/hooks';
-import { Link } from '@/navigation.mjs';
 import { DIST_URL } from '@/next.constants.mjs';
 import type { NodeRelease } from '@/types';
 
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 type FooterProps = { className?: string };
 
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -6,8 +6,9 @@ import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { useState } from 'react';
 
+import Link from '@/components/Link';
 import { useIsCurrentPathname, useSiteNavigation } from '@/hooks';
-import { Link, usePathname } from '@/navigation.mjs';
+import { usePathname } from '@/navigation.mjs';
 import { BASE_PATH } from '@/next.constants.mjs';
 import { availableLocales } from '@/next.locales.mjs';
 
diff --git a/components/Home/HomeDownloadButton.tsx b/components/Home/HomeDownloadButton.tsx
@@ -3,8 +3,8 @@
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
+import Link from '@/components/Link';
 import { useDetectOS } from '@/hooks';
-import { Link } from '@/navigation.mjs';
 import { DIST_URL } from '@/next.constants.mjs';
 import type { NodeRelease } from '@/types';
 import { downloadUrlByOS } from '@/util/downloadUrlByOS';
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import type { FC, ComponentProps, HTMLAttributes as Attributes } from 'react';
+
+import { Link as LocalizedLink } from '@/navigation.mjs';
+
+// This is a wrapper on HTML's `a` tag
+const Html: FC<Attributes<HTMLAnchorElement>> = ({ children, ...p }) => (
+  <a {...p}>{children}</a>
+);
+
+// This is Next.js's Link Component but with pre-fetch disabled
+const Next: FC<ComponentProps<typeof Link>> = ({ children, ...p }) => (
+  <LocalizedLink {...p}>{children}</LocalizedLink>
+);
+
+const Link: FC<ComponentProps<typeof LocalizedLink>> = ({
+  children,
+  ...props
+}) => {
+  const Component = useMemo(
+    // Uses a different Link element/tag based on the nature of the Link
+    // as we don't want prefetch/rsc or etc for external links
+    () =>
+      !props.href || props.href.toString().startsWith('http') ? Html : Next,
+    [props.href]
+  );
+
+  return <Component {...props}>{children}</Component>;
+};
+
+export default Link;
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import { Link } from '@/navigation.mjs';
+import Link from '@/components/Link';
 
 type PaginationProps = { prev?: number; next?: number };
 
diff --git a/components/SideNavigation.tsx b/components/SideNavigation.tsx
@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
+import Link from '@/components/Link';
 import { useIsCurrentPathname, useSiteNavigation } from '@/hooks';
-import { Link } from '@/navigation.mjs';
 import type { NavigationKeys } from '@/types';
 
 type SideNavigationProps = {
diff --git a/layouts/BlogCategoryLayout.tsx b/layouts/BlogCategoryLayout.tsx
@@ -3,9 +3,9 @@ import { useMemo } from 'react';
 import type { FC } from 'react';
 
 import { Time } from '@/components/Common/Time';
+import Link from '@/components/Link';
 import Pagination from '@/components/Pagination';
 import { useClientContext, useBlogData } from '@/hooks/server';
-import { Link } from '@/navigation.mjs';
 import type { BlogPost } from '@/types';
 
 const BlogCategoryLayout: FC = () => {
diff --git a/next.mdx.use.mjs b/next.mdx.use.mjs
@@ -4,8 +4,8 @@ import NodeApiVersionLinks from './components/Docs/NodeApiVersionLinks';
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import Banner from './components/Home/Banner';
 import HomeDownloadButton from './components/Home/HomeDownloadButton';
+import Link from './components/Link';
 import { WithNodeRelease } from './components/withNodeRelease';
-import { Link } from './navigation.mjs';
 
 /**
  * A full list of React Components that we want to passthrough to MDX
