[pull] main from nodejs:main

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;

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';
 

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';
 

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';
 

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';
 

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>;

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';
 

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';
 

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 }) => {

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';
 

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 };
 

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';
 

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';

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;

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 };
 

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 = {

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 = () => {

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

package.json

@@ -93,8 +93,8 @@
     "@testing-library/react": "~14.0.0",
     "@testing-library/user-event": "~14.5.1",
     "@types/jest": "29.5.7",
-    "@types/react": "^18.2.24",
-    "@types/react-dom": "^18.2.9",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "@types/semver": "~7.5.5",
     "@typescript-eslint/eslint-plugin": "6.9.0",
     "@typescript-eslint/parser": "6.9.0",