کامپوننت Link در Next.js و Propهای آن (راهنمای کامل ۲۰۲۶)
آموزش کامل کامپوننت Link در Next.js شامل تمام Propها مانند href، prefetch، replace، scroll، onNavigate و transitionTypes با مثالهای عملی.
کامپوننت Link چیست و چرا نباید از تگ <a> ساده استفاده کنید؟
اگر در Next.js از App Router استفاده میکنید، احتمالاً از همان ابتدا با کامپوننت Link که از next/link ایمپورت میشود آشنا شدهاید. این کامپوننت روی تگ استاندارد <a> ساخته شده، اما دو قابلیت مهم به آن اضافه میکند: Prefetching (پیشبارگذاری) و Client-side Navigation (ناوبری سمت کلاینت بدون رفرش کامل صفحه).
تفاوت اصلی این است که وقتی از <a href="/dashboard"> استفاده میکنید، مرورگر یک درخواست کامل به سرور میفرستد و کل صفحه دوباره لود میشود. اما <Link href="/dashboard"> فقط بخشهایی از صفحه که تغییر کردهاند را بهروزرسانی میکند، دیتای مسیر مقصد را از قبل (پیش از کلیک کاربر) بارگذاری میکند و در نتیجه ناوبری بین صفحات را بسیار سریعتر میکند.
استفاده پایه بسیار ساده است:
app/page.tsxtsx
import Link from 'next/link'export default function Page() { return <Link href="/dashboard">Dashboard</Link>}
نکته مهم: از نسخه ۱۳ Next.js به بعد، دیگر نیازی به قرار دادن تگ <a> بهعنوان فرزند Link نیست؛ کامپوننت بهطور خودکار یک <a> رندر میکند. اگر کدهای قدیمیتر دیدید که ساختار <Link href="..."><a>متن</a></Link> دارند، مربوط به نسخههای قدیمی است.
پراپ href — تعیین مقصد ناوبری
پراپ href تنها پراپ اجباری کامپوننت Link است و میتواند یک رشته ساده یا یک آبجکت باشد. حالت آبجکتی زمانی مفید است که بخواهید Query Parameter اضافه کنید بدون اینکه خودتان رشته را با هم Concatenate کنید:
app/page.tsxtsx
import Link from 'next/link'// هدایت به آدرس /about?name=testexport default function Page() { return ( <Link href={{ pathname: '/about', query: { name: 'test' }, }} > About </Link> )}
برای مسیرهای داینامیک هم میتوانید مستقیماً از Template Literal استفاده کنید، مثلاً هنگام ساخت لیست پستهای بلاگ:
app/blog/post-list.tsxtsx
import Link from 'next/link'interface Post { id: number title: string slug: string}export default function PostList({ posts }: { posts: Post[] }) { return ( <ul> {posts.map((post) => ( <li key={post.id}> <Link href={`/blog/${post.slug}`}>{post.title}</Link> </li> ))} </ul> )}
پراپ prefetch — کنترل پیشبارگذاری مسیرها
یکی از دلایل اصلی سریع بودن ناوبری در Next.js همین پراپ است. وقتی یک Link وارد Viewport کاربر میشود (چه در بارگذاری اولیه، چه هنگام اسکرول)، Next.js دادههای مسیر مقصد را از قبل در پسزمینه بارگذاری میکند. توجه داشته باشید که Prefetching فقط در محیط Production فعال است، پس در حالت توسعه (next dev) این رفتار را نخواهید دید.
سه مقدار قابل تنظیم برای این پراپ وجود دارد:
"auto" یا null (پیشفرض): برای مسیرهای Static کل مسیر (همراه با دیتا) پیشبارگذاری میشود. برای مسیرهای Dynamic، فقط تا نزدیکترین Segment که یک فایل loading.js دارد پیشبارگذاری میشود.
true: کل مسیر برای هر دو نوع Static و Dynamic بهطور کامل پیشبارگذاری میشود.
false: پیشبارگذاری بهطور کامل غیرفعال میشود، نه هنگام ورود به Viewport و نه هنگام Hover.
app/page.tsxtsx
import Link from 'next/link'export default function Page() { return ( <Link href="/dashboard" prefetch={false}> Dashboard </Link> )}
اگر صفحهای دارید که در آن تعداد زیادی لینک (مثلاً یک لیست بلند از محصولات) وجود دارد، غیرفعال کردن Prefetch برای برخی از آنها میتواند از مصرف بیمورد پهنای باند و درخواستهای اضافی جلوگیری کند.
پراپ replace — جایگزینی بهجای اضافهکردن History
بهطور پیشفرض، کلیک روی Link یک ورودی جدید به History Stack مرورگر اضافه میکند (یعنی دکمه Back کاربر را به صفحه قبلی برمیگرداند). اگر میخواهید بهجای Push کردن، وضعیت فعلی History جایگزین شود (کاربر با زدن Back به صفحه فعلی برنگردد)، از replace استفاده کنید:
app/page.tsxtsx
import Link from 'next/link'export default function Page() { return ( <Link href="/dashboard" replace> Dashboard </Link> )}
این پراپ خصوصاً برای صفحاتی مثل فرمهای ورود (Login) یا مراحل یک Wizard کاربرد دارد، جایی که نمیخواهید کاربر با زدن Back به یک مرحله یا صفحهی موقتی برگردد.
پراپ scroll — مدیریت رفتار اسکرول هنگام ناوبری
رفتار پیشفرض Link در Next.js این است که موقعیت اسکرول را حفظ کند، شبیه به رفتار مرورگر در دکمههای Back و Forward. اگر صفحهی مقصد در Viewport قابل مشاهده باشد، موقعیت اسکرول همانجا میماند؛ در غیر این صورت Next.js به بالای اولین المان صفحه اسکرول میکند.
با scroll={false} میتوانید این رفتار خودکار اسکرول به بالا را غیرفعال کنید:
app/page.tsxtsx
import Link from 'next/link'export default function Page() { return ( <Link href="/dashboard" scroll={false}> Dashboard </Link> )}
نکته کاربردی درباره Header چسبان (Sticky): از آنجا که Next.js هنگام پیدا کردن هدف اسکرول، المانهای Sticky و Fixed را نادیده میگیرد، ممکن است محتوای صفحه بعد از ناوبری زیر یک هدر چسبان پنهان شود. راهحل این است که با scroll-padding-top در CSS، ارتفاع هدر را جبران کنید:
app/globals.csscss
html { scroll-padding-top: 64px; /* برابر با ارتفاع هدر چسبان شما */}
این یک ویژگی استاندارد CSS است و هر جایی که Next.js از متد مرورگری scrollIntoView() استفاده کند (از جمله ناوبری با Hash مثل #id) اعمال میشود.
پراپ onNavigate — گرفتن کنترل روی لحظه ناوبری
این پراپ یک Event Handler است که در طول ناوبری سمت کلاینت اجرا میشود و به شما اجازه میدهد با event.preventDefault() مسیر را در صورت نیاز لغو کنید:
app/page.tsxtsx
import Link from 'next/link'export default function Page() { return ( <Link href="/dashboard" onNavigate={(e) => { console.log('در حال ناوبری...') // در صورت نیاز: e.preventDefault() }} > Dashboard </Link> )}
نکتهای که خیلی از توسعهدهندهها با آن اشتباه میگیرند، تفاوت onClick و onNavigate است:
onClick برای هر کلیکی اجرا میشود، حتی وقتی کاربر کلید Ctrl/Cmd را هنگام کلیک نگه داشته باشد (باز شدن در تب جدید).
onNavigate فقط زمانی اجرا میشود که ناوبری واقعاً سمت کلاینت و درون همان دامنه (Same-Origin) باشد؛ برای لینکهای خارجی یا وقتی کاربر تب جدید باز میکند، اجرا نمیشود.
لینکهایی که پراپ download دارند، با onClick کار میکنند اما onNavigate روی آنها اجرا نمیشود.
یک کاربرد بسیار رایج این پراپ، جلوگیری از خروج کاربر از یک فرم دارای تغییرات ذخیرهنشده است. برای این کار میتوانید یک Context برای نگهداری وضعیت "قفل بودن ناوبری" بسازید و یک کامپوننت CustomLink روی Link پیادهسازی کنید که قبل از خروج از صفحه، یک تأییدیه از کاربر بگیرد.
پراپ جدید transitionTypes — انیمیشنهای هوشمند ناوبری
این پراپ که در نسخهی ۱۶.۲ به Next.js اضافه شده، یکی از تازهترین قابلیتهایی است که خیلی از آموزشهای قدیمیتر اصلاً به آن اشاره نمیکنند. با transitionTypes میتوانید فهرستی از نوع Transitionها را مشخص کنید که مستقیماً به متد React.addTransitionType پاس داده میشوند. این کار به کامپوننتهای <ViewTransition> در React اجازه میدهد بسته به نوع ناوبری، انیمیشنهای متفاوتی اجرا کنند:
app/page.tsxtsx
import Link from 'next/link'export default function Page() { return ( <Link href="/about" transitionTypes={['slide-in']}> About </Link> )}
اگر پروژهای دارید که از انیمیشنهای ورودی/خروجی متفاوت بین صفحات استفاده میکند (مثلاً اسلاید از راست هنگام رفتن به جلو و اسلاید از چپ هنگام برگشت)، این پراپ دقیقاً همان چیزی است که برایش طراحی شده.
تشخیص لینک فعال با usePathname
یکی از رایجترین نیازها در ساخت منوهای ناوبری، هایلایت کردن لینک فعال است. برای این کار از هوک usePathname استفاده میشود:
app/ui/nav-links.tsxtsx
'use client'import { usePathname } from 'next/navigation'import Link from 'next/link'export function Links() { const pathname = usePathname() return ( <nav> <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/"> Home </Link> <Link className={`link ${pathname === '/about' ? 'active' : ''}`} href="/about" > About </Link> </nav> )}
دقت کنید که این کامپوننت باید 'use client' باشد، چون usePathname یک هوک سمت کلاینت است.
جمعبندی و جدول مرجع سریع
کامپوننت Link در Next.js بسیار بیشتر از یک <a> ساده است. جدول زیر خلاصهای از تمام Propهای فعلی را نشان میدهد:
پراپ
نوع
پیشفرض
کاربرد اصلی
href
string | object
الزامی
مسیر مقصد
replace
boolean
false
جایگزینی History بهجای Push
scroll
boolean
true
کنترل اسکرول خودکار بعد از ناوبری
prefetch
boolean | null
null (auto)
کنترل پیشبارگذاری مسیر
onNavigate
function
-
اجرای منطق سفارشی هنگام ناوبری
transitionTypes
string[]
-
تعیین نوع انیمیشن View Transition
برای اکثر پروژهها، تنظیمات پیشفرض Link کاملاً کافی است؛ اما وقتی به سراغ سناریوهای پیشرفتهتر مثل فرمهای دارای تغییرات ذخیرهنشده، لیستهای بسیار طولانی، یا انیمیشنهای صفحهبهصفحه میروید، شناخت دقیق این Propها تفاوت بین یک تجربه کاربری معمولی و یک تجربه کاربری حرفهای را رقم میزند.
