docs(nx-dev): Update internal links to use Link tag (#22287)

nx-dev/feature-ai/src/lib/error-message.tsx

@@ -3,6 +3,7 @@ import {
   ExclamationTriangleIcon,
   XCircleIcon,
 } from '@heroicons/react/24/outline';
+import Link from 'next/link';
 
 function ErrorMessage({ error }: { error: any }): JSX.Element {
   try {
@@ -28,12 +29,12 @@ function ErrorMessage({ error }: { error: any }): JSX.Element {
             </h3>
             <div className="mt-2 text-sm text-yellow-700">
               Sorry, I don't know how to help with that. You can visit the{' '}
-              <a
+              <Link
                 href="https://nx.dev/getting-started/intro"
                 className="underline"
               >
                 Nx documentation
-              </a>{' '}
+              </Link>{' '}
               for more info.
             </div>
           </div>

nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx

@@ -7,6 +7,7 @@ import {
   MagnifyingGlassIcon,
   InformationCircleIcon,
 } from '@heroicons/react/24/outline';
+import Link from 'next/link';
 
 export function RelatedDocumentsSection({
   relatedCategories,
@@ -50,13 +51,13 @@ function CategoryBox({ category }: { category: RelatedDocumentsCategory }) {
             key={d.id}
             className="flex justify-between items-center py-1 pl-0 text-sm"
           >
-            <a
+            <Link
               href={d.path}
               className="no-underline hover:underline hover:text-sky-600 dark:hover:text-sky-400 flex-grow flex justify-between items-center"
             >
               <span>{d.name}</span>
               <ArrowRightIcon className="w-4 h-4 text-slate-500 dark:text-slate-400" />
-            </a>
+            </Link>
           </li>
         ))}
       </ul>

nx-dev/feature-package-schema-viewer/src/lib/content.tsx

@@ -125,13 +125,13 @@ export function Content({
           >
             {schemaViewModel.type}
           </div>
-          <a
+          <Link
             className="relative mx-4 inline-flex rounded-md border border-green-100 bg-green-50 px-4 py-2 text-xs font-medium text-green-600 dark:border-green-900 dark:bg-green-900/30 dark:text-green-400"
             href="/recipes/other/rescope"
             title="Nx 16 package name changes"
           >
             Rescope @nrwl to @nx
-          </a>
+          </Link>
           {schemaViewModel.deprecated && (
             <div
               aria-hidden="true"
@@ -159,7 +159,7 @@ export function Content({
           >
             {schemaViewModel.packageName}
           </Link>
-          <a
+          <Link
             href={schemaViewModel.schemaGithubUrl}
             target="_blank"
             rel="noreferrer"
@@ -177,7 +177,7 @@ export function Content({
               ></path>
             </svg>
             See schema
-          </a>
+          </Link>
         </div>
       </div>
 

nx-dev/feature-package-schema-viewer/src/lib/ui/headings.tsx

@@ -1,5 +1,6 @@
 import { LinkIcon } from '@heroicons/react/24/solid';
 import { slugify } from '../slugify.utils';
+import Link from 'next/link';
 
 export const Heading1 = ({ title }: { title: string }) => (
   <h1
@@ -7,12 +8,12 @@ export const Heading1 = ({ title }: { title: string }) => (
     className="group mb-5 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100"
   >
     <span>{title}</span>
-    <a aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
+    <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
         className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
-    </a>
+    </Link>
   </h1>
 );
 
@@ -22,12 +23,12 @@ export const Heading2 = ({ title }: { title: string }) => (
     className="group mb-5 text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200"
   >
     <span>{title}</span>
-    <a aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
+    <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
         className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
-    </a>
+    </Link>
   </h2>
 );
 
@@ -37,11 +38,11 @@ export const Heading3 = ({ title }: { title: string }) => (
     className="group text-xl font-semibold tracking-tight text-slate-700 dark:text-slate-300"
   >
     <span>{title}</span>
-    <a aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
+    <Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
       <LinkIcon
         role="img"
         className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
       />
-    </a>
+    </Link>
   </h3>
 );

nx-dev/feature-package-schema-viewer/src/lib/ui/top.layout.tsx

@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 export function TopSchemaLayout({
   name,
   url,
@@ -15,13 +17,13 @@ export function TopSchemaLayout({
         >
           Package
         </div>
-        <a
+        <Link
           className="relative mx-4 inline-flex rounded-md border border-green-100 bg-green-50 px-4 py-2 text-xs font-medium text-green-600 dark:border-green-900 dark:bg-green-900/30 dark:text-green-400"
           href="/recipes/other/rescope"
           title="Nx 16 package name changes"
         >
           Rescope @nrwl to @nx
-        </a>
+        </Link>
       </div>
       <div className="relative z-0 inline-flex flex-shrink-0">
         <a

nx-dev/nx-dev/pages/_app.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useEffect } from 'react';
 import '../styles/main.css';
+import Link from 'next/link';
 
 export default function CustomApp({
   Component,
@@ -66,14 +67,14 @@ export default function CustomApp({
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <a
+      <Link
         id="skip-to-content-link"
         href="#main"
         tabIndex={0}
         className="absolute top-3 left-8 -translate-y-24 rounded-md bg-green-400 px-4 py-2 text-white transition focus:translate-y-0"
       >
         Skip to content
-      </a>
+      </Link>
       <Component {...pageProps} />
       {/* Global Site Tag (gtag.js) - Google Analytics */}
       <Script

nx-dev/nx-dev/pages/changelog.tsx

@@ -16,6 +16,7 @@ import { useNavToggle } from '../lib/navigation-toggle.effect';
 import { menusApi } from '../lib/menus.api';
 import { MenuItem } from '@nx/nx-dev/models-menu';
 import { getBasicNxSection } from '@nx/nx-dev/data-access-menu';
+import Link from 'next/link';
 
 interface ChangelogEntry {
   version: string;
@@ -269,9 +270,9 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
                       />{' '}
                       v{changelog.version.split('.').slice(0, 2).join('.')}
                     </a>
-                    <a aria-hidden="true" href={`#${changelog.version}`}>
+                    <Link aria-hidden="true" href={`#${changelog.version}`}>
                       <LinkIcon className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
-                    </a>
+                    </Link>
                   </p>
                   <p className="py-0.5 text-xs leading-5 text-slate-400 dark:text-slate-500">
                     <time

nx-dev/nx-dev/pages/nx-api/index.tsx

@@ -110,9 +110,9 @@ export default function Packages({
                     <p>
                       In version 16, we have rescoped our packages to{' '}
                       <code>@nx/*</code> from <code>@nrwl/*</code>.{' '}
-                      <a href="/recipes/other/rescope" className="underline">
+                      <Link href="/recipes/other/rescope" className="underline">
                         Read more about the rescope ≫
-                      </a>
+                      </Link>
                     </p>
                   </section>
                   <section id="packages-section" className="py-12">

nx-dev/ui-common/src/lib/documentation-header.tsx

@@ -251,14 +251,14 @@ export function DocumentationHeader({
               {/*  <span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500 dark:bg-sky-500" />*/}
               {/*</span>*/}Launch Nx
             </Link>
-            <a
+            <Link
               href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu"
               target="_blank"
               title="Contact us"
               className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
             >
               Contact us
-            </a>
+            </Link>
           </nav>
         </div>
         <div className="hidden flex-grow lg:flex">{/* SPACER */}</div>

nx-dev/ui-common/src/lib/header.tsx

@@ -236,7 +236,7 @@ export function Header(): JSX.Element {
       <div className="relative mx-auto flex w-full items-center justify-between p-4 lg:hidden">
         <div className="flex flex-shrink-0">
           {/*LOGO*/}
-          <a
+          <Link
             href="/"
             className="flex items-center text-slate-900 dark:text-white"
           >
@@ -250,7 +250,7 @@ export function Header(): JSX.Element {
               <title>Nx</title>
               <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
             </svg>
-          </a>
+          </Link>
           {/*MENU*/}
           <div className="ml-4 flex flex-shrink-0">
             <Popover className="">

nx-dev/ui-common/src/lib/plugin-card.tsx

@@ -3,6 +3,7 @@ import {
   ClockIcon,
   StarIcon,
 } from '@heroicons/react/24/outline';
+import Link from 'next/link';
 
 export interface PluginCardProps {
   name: string;
@@ -41,7 +42,7 @@ export function PluginCard({
           </svg>{' '}
           <span className="truncate">{name}</span>
         </h3>
-        <a
+        <Link
           href={url}
           target={isOfficial ? undefined : '_blank'}
           rel={isOfficial ? undefined : 'noreferrer'}
@@ -80,7 +81,7 @@ export function PluginCard({
               )}
             </div>
           </div>
-        </a>
+        </Link>
       </div>
     </div>
   );

nx-dev/ui-community/src/lib/connect-with-us.tsx

@@ -1,5 +1,6 @@
 import { EnvelopeIcon } from '@heroicons/react/24/solid';
 import { SectionHeading } from '@nx/nx-dev/ui-common';
+import Link from 'next/link';
 
 export function ConnectWithUs(): JSX.Element {
   return (
@@ -18,9 +19,9 @@ export function ConnectWithUs(): JSX.Element {
           </p>
           <p className="py-4">
             Looking for community plugins? Find them listed in the{' '}
-            <a href="/plugin-registry" className="underline font-semibold">
+            <Link href="/plugin-registry" className="underline font-semibold">
               plugin registry
-            </a>
+            </Link>
             .
           </p>
         </div>

nx-dev/ui-conference/src/lib/launch-week/intro.tsx

@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 export function LaunchNxIntro() {
   return (
     <div className="mx-auto max-w-screen-lg px-5 py-5 xl:max-w-screen-xl">
@@ -39,9 +41,9 @@ export function LaunchNxIntro() {
           </h3>
           <p className="mb-6 sm:text-lg">
             Missed our Launch Nx Conf? Then follow up with the{' '}
-            <a href="#announcements" className="underline">
+            <Link href="#announcements" className="underline">
               announcements
-            </a>{' '}
+            </Link>{' '}
             below or watch the conference recording:
           </p>
 

nx-dev/ui-home/src/lib/hero.tsx

@@ -1,12 +1,8 @@
-import {
-  ChevronRightIcon,
-  ClipboardDocumentCheckIcon,
-  ClipboardDocumentIcon,
-} from '@heroicons/react/24/outline';
 import { ButtonLink } from '@nx/nx-dev/ui-common';
 import { Fragment, useEffect, useState } from 'react';
 import { Transition } from '@headlessui/react';
 import { cx } from '@nx/nx-dev/ui-primitives';
+import Link from 'next/link';
 
 export function Hero(): JSX.Element {
   const [copied, setCopied] = useState(false);
@@ -33,14 +29,14 @@ export function Hero(): JSX.Element {
             Introducing{' '}
             <span className="text-blue-500 dark:text-sky-500">Nx Agents</span>,
             the next leap in CI.{' '}
-            <a
+            <Link
               href="/ci/features/nx-agents"
               title="Discover Nx Agents"
               className="font-semibold text-blue-500 dark:text-sky-500"
             >
               <span className="absolute inset-0" aria-hidden="true"></span>Read
               more <span aria-hidden="true">→</span>
-            </a>
+            </Link>
           </div>
         </div>
         <div className="text-center">

nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx

@@ -113,12 +113,12 @@ export function MigrationsAndCodeGeneration(): JSX.Element {
                   <br />
                   - Run 'yarn nx migrate --run-migrations'
                   <br />- To learn more go to
-                  <a
+                  <Link
                     href="https://nx.dev/features/automate-updating-dependencies"
                     className="ml-2 underline"
                   >
                     https://nx.dev/features/automate-updating-dependencies
-                  </a>
+                  </Link>
                 </p>
               </div>
             </div>

nx-dev/ui-home/src/lib/nx-with-ci.tsx

@@ -8,6 +8,7 @@ import {
   useMotionValue,
   useTransform,
 } from 'framer-motion';
+import Link from 'next/link';
 import { useEffect, useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
 
@@ -145,12 +146,12 @@ export function NxWithCi(): JSX.Element {
                 <div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg blur-sm opacity-25 group-hover:opacity-90 transition duration-1000 group-hover:duration-200"></div>
                 <div className="relative flex gap-4 items-center rounded-lg border border-slate-200 bg-white p-4 text-lg shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 dark:border-slate-800/40 dark:bg-slate-800">
                   <NxCacheIcon className="h-8 w-8" aria-hidden="true" />
-                  <a
+                  <Link
                     href="/ci/features/remote-cache"
                     title="Discover Nx Replay"
                   >
                     <span className="absolute inset-0"></span>Nx Replay
-                  </a>
+                  </Link>
                 </div>
               </div>
             </dt>

nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx

@@ -1,4 +1,5 @@
 import { LinkIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
 import { ReactNode } from 'react';
 
 export function Heading({
@@ -20,9 +21,9 @@ export function Heading({
       className={['not-prose group', className].filter(Boolean).join(' ')}
     >
       {children}
-      <a aria-hidden="true" href={`#${id}`}>
+      <Link aria-hidden="true" href={`#${id}`}>
         <LinkIcon className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
-      </a>
+      </Link>
     </Component>
   );
 }

nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx

@@ -8,6 +8,7 @@ import { frameworkIcons } from '../icons';
 
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { ReactNode } from 'react';
+import Link from 'next/link';
 
 const colsClasses: Record<number, string> = {
   1: 'grid-cols-1',
@@ -79,7 +80,7 @@ export function Cards({
       {children}
       {moreLink && (
         <div className="flex justify-end mt-2 col-span-full">
-          <a
+          <Link
             className="transition-all duration-200 ease-in-out flex items-center no-underline text-sm px-4 py-0 border-transparent hover:text-slate-900 dark:hover:text-sky-400 whitespace-nowrap font-semibold group"
             href={moreLink}
           >
@@ -90,7 +91,7 @@ export function Cards({
             >
               →
             </span>
-          </a>
+          </Link>
         </div>
       )}
     </div>

nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { ReactNode } from 'react';
 
 export function Pill({
@@ -10,13 +11,13 @@ export function Pill({
   return (
     <span className="group inline-flex relative rounded-md border border-slate-200 mr-2 mb-2 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
       <span className="flex flex-col p-3">
-        <a
+        <Link
           href={url}
           className="flex items-center font-semibold no-underline group-hover:underline"
         >
           <span className="absolute inset-0" aria-hidden="true"></span>
           {children}
-        </a>
+        </Link>
       </span>
     </span>
   );