Create safe link primitive

packages/next-docs/package.json

@@ -24,6 +24,10 @@
             "import": "./dist/server/index.mjs",
             "types": "./dist/server/index.d.ts"
         },
+        "./link": {
+            "import": "./dist/link/index.mjs",
+            "types": "./dist/link/index.d.ts"
+        },
         "./*": {
             "import": "./dist/*.mjs",
             "types": "./dist/*.d.ts"
@@ -45,6 +49,9 @@
             ],
             "server": [
                 "./dist/server/index.d.ts"
+            ],
+            "link": [
+                "./dist/link/index.d.ts"
             ]
         }
     },

packages/next-docs/src/link/index.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+import { ComponentPropsWithoutRef } from "react";
+
+/**
+ * A Component that is safe to use in mdx documents, based on `next/link`
+ */
+export const SafeLink = (props: ComponentPropsWithoutRef<"a">) => {
+    const url = props.href ?? "/";
+    const isExternalUrl = !(url.startsWith("/") || url.startsWith("#"));
+
+    return (
+        <Link
+            {...props}
+            href={url}
+            prefetch={!isExternalUrl} //disable prefetch if it's an external link
+            target={isExternalUrl ? "_blank" : "_self"}
+            rel={isExternalUrl ? "noreferrer noopener" : undefined}
+        />
+    );
+};

packages/next-docs/tsup.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from "tsup";
 import tsconfig from "./tsconfig.json";
 
 export default defineConfig({
-    entry: ["src/{server,breadcrumb,sidebar,toc,search}/index.{ts,tsx}"],
+    entry: ["src/{server,breadcrumb,sidebar,toc,search,link}/index.{ts,tsx}"],
     format: "esm",
     dts: true,
     target: tsconfig.compilerOptions.target as "es2016",