fix: fixed localized links and next links redirection (#5474)

Author: ovflowd

.eslintrc

@@ -6,25 +6,6 @@
     "plugin:storybook/recommended"
   ],
   "overrides": [
-    {
-      "files": ["**/*.{mjs,js,ts,tsx}"],
-      "rules": {
-        "import/order": [
-          "warn",
-          {
-            "groups": [
-              "builtin",
-              "external",
-              "internal",
-              "sibling",
-              "parent",
-              "index",
-              "type"
-            ]
-          }
-        ]
-      }
-    },
     {
       "files": ["**/*.ts?(x)"],
       "plugins": ["@typescript-eslint"],

components/Common/ActiveLocalizedLink/index.tsx

@@ -2,12 +2,12 @@ import { useRouter } from 'next/router';
 import { useState, useEffect, type FC } from 'react';
 import classNames from 'classnames';
 import LocalizedLink from '../../LocalizedLink';
-import type { LinkProps } from 'next/link';
-import type { PropsWithChildren } from 'react';
+import type Link from 'next/link';
+import type { ComponentProps } from 'react';
 
-type ActiveLocalizedLinkProps = PropsWithChildren<
-  LinkProps & { className?: string; activeClassName: string }
->;
+type ActiveLocalizedLinkProps = ComponentProps<typeof Link> & {
+  activeClassName: string;
+};
 
 const ActiveLocalizedLink: FC<ActiveLocalizedLinkProps> = ({
   children,

components/Downloads/DownloadReleasesTable.tsx

@@ -1,5 +1,4 @@
 import { FormattedMessage } from 'react-intl';
-import Link from 'next/link';
 import { getNodejsChangelog } from '../../util/getNodeJsChangelog';
 import { getNodeApiLink } from '../../util/getNodeApiLink';
 import { useNodeReleases } from '../../hooks/useNodeReleases';
@@ -18,7 +17,7 @@ const DownloadReleasesTable: FC = () => {
           <td>V8</td>
           <td>npm</td>
           <td>
-            NODE_MODULE_VERSION<Link href="#ref-1">[1]</Link>
+            NODE_MODULE_VERSION<a href="#ref-1">[1]</a>
             <span id="backref-1"></span>
           </td>
           <td></td>

components/Downloads/DownloadToggle/index.module.scss

@@ -28,7 +28,8 @@
     background: var(--black0);
     border: none;
     border-radius: 32px;
-    box-shadow: inset 1px -1px 1px rgba(0, 0, 0, 0.08),
+    box-shadow:
+      inset 1px -1px 1px rgba(0, 0, 0, 0.08),
       inset 0px 1px 2px rgba(0, 0, 0, 0.08);
     box-sizing: border-box;
     color: var(--black7);
@@ -44,7 +45,8 @@
     width: 133px;
 
     &.current {
-      box-shadow: inset 1px -1px 1px rgba(0, 0, 0, 0.08),
+      box-shadow:
+        inset 1px -1px 1px rgba(0, 0, 0, 0.08),
         inset 0px 1px 2px rgba(0, 0, 0, 0.08);
       margin-left: -30px;
     }

components/Home/Banner.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { useSiteConfig } from '../../hooks/useSiteConfig';
 import { dateIsBetween } from '../../util/dateIsBetween';
 
@@ -17,14 +16,14 @@ const Banner = () => {
     if (showBanner && indexBanner.text) {
       return (
         <p className="home-version home-version-banner">
-          <Link href={indexBanner.link}>{indexBanner.text}</Link>
+          <a href={indexBanner.link}>{indexBanner.text}</a>
         </p>
       );
     }
 
     if (showBanner && indexBanner.html) {
       return (
-        <Link
+        <a
           href={indexBanner.link}
           dangerouslySetInnerHTML={{ __html: indexBanner.html }}
         />

components/Home/HomeDownloadButton.tsx

@@ -21,9 +21,10 @@ const HomeDownloadButton: FC<NodeRelease> = ({
   const nodeDownloadLink = downloadUrlByOS(versionWithPrefix, os, bitness);
   const nodeApiLink = `https://nodejs.org/dist/latest-v${major}.x/docs/api/`;
   const nodeAllDownloadsLink = `/download${isLts ? '/' : '/current'}`;
-  const nodeDownloadTitle =
-    `${labels?.download} ${version}` +
-    ` ${labels?.[isLts ? 'lts' : 'current']}`;
+
+  const nodeDownloadTitle = `${labels?.download} ${version} ${labels?.[
+    isLts ? 'lts' : 'current'
+  ]}`;
 
   return (
     <div className="home-downloadblock">
@@ -44,12 +45,12 @@ const HomeDownloadButton: FC<NodeRelease> = ({
           </LocalizedLink>
         </li>
         <li>
-          <LocalizedLink href={getNodejsChangelog(versionWithPrefix)}>
+          <a href={getNodejsChangelog(versionWithPrefix)}>
             {labels?.changelog}
-          </LocalizedLink>
+          </a>
         </li>
         <li>
-          <LocalizedLink href={nodeApiLink}>{labels?.api}</LocalizedLink>
+          <a href={nodeApiLink}>{labels?.api}</a>
         </li>
       </ul>
     </div>

components/Learn/PreviousNextLink/__snapshots__/index.stories.tsx.snap

@@ -4,7 +4,7 @@ exports[`Learn/PreviousNextLink Default smoke-test 1`] = `
 <ul class="PreviousNextLink_prevNextLink__9SAYu">
   <li>
     <a rel="prev"
-       href="/previous"
+       href="/en/previous"
     >
       <svg stroke="currentColor"
            fill="currentColor"
@@ -23,7 +23,7 @@ exports[`Learn/PreviousNextLink Default smoke-test 1`] = `
   </li>
   <li>
     <a rel="next"
-       href="/next"
+       href="/en/next"
     >
       NEXT
       <svg stroke="currentColor"
@@ -47,7 +47,7 @@ exports[`Learn/PreviousNextLink WithoutNext smoke-test 1`] = `
 <ul class="PreviousNextLink_prevNextLink__9SAYu">
   <li>
     <a rel="prev"
-       href="/previous"
+       href="/en/previous"
     >
       <svg stroke="currentColor"
            fill="currentColor"
@@ -75,7 +75,7 @@ exports[`Learn/PreviousNextLink WithoutPrevious smoke-test 1`] = `
   </li>
   <li>
     <a rel="next"
-       href="/next"
+       href="/en/next"
     >
       NEXT
       <svg stroke="currentColor"

components/Learn/PreviousNextLink/__tests__/index.test.tsx

@@ -2,6 +2,15 @@ import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import PrevNextLink from '..';
 
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      isReady: true,
+      asPath: '/link',
+    };
+  },
+}));
+
 describe('PrevNextLink component', () => {
   test('renders nothing if neither previous nor next are provided', () => {
     render(<PrevNextLink />);
@@ -17,7 +26,7 @@ describe('PrevNextLink component', () => {
       </IntlProvider>
     );
     const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', previous.slug);
+    expect(link).toHaveAttribute('href', `/en${previous.slug}`);
   });
 
   test('renders next link if next is provided', () => {
@@ -28,7 +37,7 @@ describe('PrevNextLink component', () => {
       </IntlProvider>
     );
     const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', next.slug);
+    expect(link).toHaveAttribute('href', `/en${next.slug}`);
   });
 
   test('renders both previous and next links if both are provided', () => {
@@ -40,7 +49,7 @@ describe('PrevNextLink component', () => {
       </IntlProvider>
     );
     const links = screen.getAllByRole('link');
-    expect(links[0]).toHaveAttribute('href', previous.slug);
-    expect(links[1]).toHaveAttribute('href', next.slug);
+    expect(links[0]).toHaveAttribute('href', `/en${previous.slug}`);
+    expect(links[1]).toHaveAttribute('href', `/en${next.slug}`);
   });
 });

components/Learn/PreviousNextLink/index.tsx

@@ -1,10 +1,11 @@
-import Link from 'next/link';
 import { FaAngleDoubleLeft, FaAngleDoubleRight } from 'react-icons/fa';
 import { FormattedMessage } from 'react-intl';
-import styles from './index.module.scss';
+import LocalizedLink from '../../LocalizedLink';
 import type { LinkInfo } from '../../../types';
 import type { FC } from 'react';
 
+import styles from './index.module.scss';
+
 type PreviousNextLinkProps = {
   previous?: LinkInfo;
   next?: LinkInfo;
@@ -19,18 +20,18 @@ const PreviousNextLink: FC<PreviousNextLinkProps> = ({ previous, next }) => {
     <ul className={styles.prevNextLink}>
       <li>
         {previous && (
-          <Link href={previous.slug} rel="prev">
+          <LocalizedLink href={previous.slug} rel="prev">
             <FaAngleDoubleLeft size="1em" style={{ marginRight: '5px' }} />
             <FormattedMessage id="components.learn.previousNextLink.previous" />
-          </Link>
+          </LocalizedLink>
         )}
       </li>
       <li>
         {next && (
-          <Link href={next.slug} rel="next">
+          <LocalizedLink href={next.slug} rel="next">
             <FormattedMessage id="components.learn.previousNextLink.next" />
             <FaAngleDoubleRight style={{ marginLeft: '5px' }} />
-          </Link>
+          </LocalizedLink>
         )}
       </li>
     </ul>

components/LocalizedLink.tsx

@@ -4,27 +4,41 @@ import { useLocale } from '../hooks/useLocale';
 import { linkWithLocale } from '../util/linkWithLocale';
 import type { FC, ComponentProps } from 'react';
 
+// This is a wrapper on HTML's `a` tag
+const HtmlLink: FC<JSX.IntrinsicElements['a']> = ({ children, ...extra }) => (
+  <a {...extra}>{children}</a>
+);
+
+// This is Next.js's Link Component but with pre-fetch disabled
+const NextLink: FC<ComponentProps<typeof Link>> = ({ children, ...extra }) => (
+  <Link {...extra} prefetch={false}>
+    {children}
+  </Link>
+);
+
 const LocalizedLink: FC<ComponentProps<typeof Link>> = ({
   href,
   children,
   ...extra
 }) => {
   const { currentLocale } = useLocale();
 
-  const localizedUrl = linkWithLocale(currentLocale.code);
+  const { Component, finalHref } = useMemo(() => {
+    if (/^https?:\/\//.test(href.toString())) {
+      return { Component: HtmlLink, finalHref: href.toString() };
+    }
 
-  const finalHref = useMemo(
-    () =>
-      /^https?:\/\//.test(href.toString())
-        ? href.toString()
-        : localizedUrl(href),
-    [href, localizedUrl]
-  );
+    const addLocaleToHref = linkWithLocale(currentLocale.code);
+
+    return { Component: NextLink, finalHref: addLocaleToHref(href) };
+    // We only need to check if the toString() variant of URL has changed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentLocale.code, href.toString()]);
 
   return (
-    <Link {...extra} href={finalHref}>
+    <Component {...extra} href={finalHref}>
       {children}
-    </Link>
+    </Component>
   );
 };