From bea7d30536ac4ed8065ecb53191da14d1830ed2b Mon Sep 17 00:00:00 2001
From: Serhat Arslan <49308319+serhatx1@users.noreply.github.com>
Date: Tue, 14 Oct 2025 21:38:58 +0300
Subject: [PATCH] docs: fix next/link import syntax in component examples
 (#8427)

Fix incorrect named import syntax for Next.js Link component.

Changed from:
  import { Link } from "next/link"

To correct default import:
  import Link from "next/link"

Next.js Link is a default export, not a named export. The incorrect
syntax causes TypeScript error:
'Module "next/link" has no exported member "Link"'

Affected files:
- Button component docs
- Badge component docs
- Breadcrumb component docs (v4 and www)
- Navigation Menu component docs

Fixes issue where users copying code snippets get immediate errors.

Co-authored-by: serhatx1 <armonikadijital@gmail.com>
---
 apps/v4/content/docs/components/badge.mdx           | 2 +-
 apps/v4/content/docs/components/breadcrumb.mdx      | 2 +-
 apps/v4/content/docs/components/button.mdx          | 2 +-
 apps/v4/content/docs/components/navigation-menu.mdx | 2 +-
 apps/www/content/docs/components/breadcrumb.mdx     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/v4/content/docs/components/badge.mdx b/apps/v4/content/docs/components/badge.mdx
index 974eded49d..241d6be23d 100644
--- a/apps/v4/content/docs/components/badge.mdx
+++ b/apps/v4/content/docs/components/badge.mdx
@@ -57,7 +57,7 @@ import { Badge } from "@/components/ui/badge"
 You can use the `asChild` prop to make another component look like a badge. Here's an example of a link that looks like a badge.
 
 ```tsx showLineNumbers
-import { Link } from "next/link"
+import Link from "next/link"
 
 import { Badge } from "@/components/ui/badge"
 
diff --git a/apps/v4/content/docs/components/breadcrumb.mdx b/apps/v4/content/docs/components/breadcrumb.mdx
index 12f9870764..91c0ccbe1c 100644
--- a/apps/v4/content/docs/components/breadcrumb.mdx
+++ b/apps/v4/content/docs/components/breadcrumb.mdx
@@ -180,7 +180,7 @@ To use a custom link component from your routing library, you can use the `asChi
 />
 
 ```tsx showLineNumbers {1,8-10}
-import { Link } from "next/link"
+import Link from "next/link"
 
 ...
 
diff --git a/apps/v4/content/docs/components/button.mdx b/apps/v4/content/docs/components/button.mdx
index caca347950..73bb53644c 100644
--- a/apps/v4/content/docs/components/button.mdx
+++ b/apps/v4/content/docs/components/button.mdx
@@ -278,7 +278,7 @@ To create a button group, use the `ButtonGroup` component. See the [Button Group
 You can use the `asChild` prop to make another component look like a button. Here's an example of a link that looks like a button.
 
 ```tsx showLineNumbers
-import { Link } from "next/link"
+import Link from "next/link"
 
 import { Button } from "@/components/ui/button"
 
diff --git a/apps/v4/content/docs/components/navigation-menu.mdx b/apps/v4/content/docs/components/navigation-menu.mdx
index 2bdfac72db..7b02e27e6b 100644
--- a/apps/v4/content/docs/components/navigation-menu.mdx
+++ b/apps/v4/content/docs/components/navigation-menu.mdx
@@ -83,7 +83,7 @@ import {
 You can use the `asChild` prop to make another component look like a navigation menu trigger. Here's an example of a link that looks like a navigation menu trigger.
 
 ```tsx showLineNumbers title="components/example-navigation-menu.tsx"
-import { Link } from "next/link"
+import Link from "next/link"
 
 export function NavigationMenuDemo() {
   return (
diff --git a/apps/www/content/docs/components/breadcrumb.mdx b/apps/www/content/docs/components/breadcrumb.mdx
index 84a791ba86..22fa23c7f2 100644
--- a/apps/www/content/docs/components/breadcrumb.mdx
+++ b/apps/www/content/docs/components/breadcrumb.mdx
@@ -181,7 +181,7 @@ To use a custom link component from your routing library, you can use the `asChi
 />
 
 ```tsx showLineNumbers {1,8-10}
-import { Link } from "next/link"
+import Link from "next/link"
 
 ...