هوک `useLinkStatus` یکی از ویژگیهای جدید در **Next.js 15** است که در بخش **App Router** این فریمورک معرفی شده است. این هوک در تاریخ **اکتبر 2024** همراه با انتشار نسخههای آزمایشی (Canary) Next.js 15 معرفی شد و برای توسعهدهندگانی که به دنبال بهینهسازی تجربه کاربری در برنامههایشان هستند، طراحی شده است.
sLinkStatus در سایتهای طراحی شده با نکست:این هوک به توسعهدهندگان اجازه میدهد تا وضعیت لینکهای داخلی در برنامههای Next.js را به صورت پویا بررسی کنند. به طور خاص، `useLinkStatus` اطلاعاتی درباره اینکه آیا یک لینک (مانند تگ `<Link>`) در حال حاضر در viewport (بخش قابل مشاهده صفحه) قرار دارد یا خیر، ارائه میدهد. همچنین میتواند وضعیتهای دیگری مانند "فعال بودن" یا "در حال بارگذاری" را گزارش کند. این قابلیت برای ایجاد تجربههای کاربری پیشرفته مثل برجستهسازی لینکهای فعال در منوی ناوبری یا اجرای انیمیشنها هنگام ورود لینک به viewport بسیار مفید است.
- این هوک در سمت کلاینت (client-side) اجرا میشود و باید در کامپوننتهایی که با `"use client"` مشخص شدهاند، استفاده شود.
- خروجی آن یک شیء است که شامل اطلاعاتی مثل:
- `isInViewport`: آیا لینک در viewport قابل مشاهده است یا خیر.
- `isActive`: آیا لینک با مسیر فعلی مطابقت دارد (مثلاً در منوی ناوبری).
- سایر ویژگیهای احتمالی که بسته به نسخه Next.js ممکن است اضافه شوند.
- مثال استفاده:
```jsx
"use client";
import { useLinkStatus } from 'next/navigation';
export default function NavLink({ href, children }) {
const { isInViewport, isActive } = useLinkStatus(href);
return (
<a href={href} className={isActive ? 'active' : ''}>
{children} {isInViewport ? '(Visible)' : '(Not Visible)'}
</a>
);
}
```
- بهبود تجربه کاربری با ارائه بازخورد بصری (مثل تغییر رنگ لینک فعال).
- امکان ایجاد انیمیشنهای پویا بر اساس وضعیت لینک.
- بهینهسازی عملکرد با کاهش نیاز به جاوااسکریپت اضافی برای ردیابی وضعیت لینکها.
نکته: این هوک بخشی از APIهای جدید نکست جی اس است و برای استفاده، نیاز به نسخه 15 یا بالاتر دارید. همچنین، چون در نسخههای Canary معرفی شده، ممکن است در آینده تغییراتی در API آن اعمال شود.
