۱. unauthorized.tsx چیست؟
فایل unauthorized.tsx در Next.js برای نمایش رابط کاربری سفارشی هنگام فراخوانی تابع unauthorized() استفاده می‌شود. این فایل برای نمایش پیام‌های ورود یا هشدار عدم دسترسی به کاربران غیرمجاز کاربرد دارد.
۲. رفتار و کد وضعیت
- با فراخوانی
unauthorized()، فایلunauthorized.tsxرندر می‌شود - پاسخ HTTP به‌صورت خودکار شامل کد وضعیت ۴۰۱ Unauthorized خواهد بود
- این ویژگی در حال حاضر آزمایشی است و برای محیط production توصیه نمی‌شود
۳. تعریف unauthorized.tsx
فایلی در مسیر app/unauthorized.tsx ایجاد کنید و یک کامپوننت React را به‌صورت پیش‌فرض خروجی دهید. این کامپوننت نباید هیچ prop دریافت کند:
// app/unauthorized.tsx
import Login from '@/app/components/Login'
export default function Unauthorized() {
return (
<main>
<h1>401 - Unauthorized</h1>
<p>Please log in to access this page.</p>
<Login />
</main>
)
}۴. فراخوانی unauthorized.tsx
در یک Server Component از تابع unauthorized() برای هدایت کاربران غیرمجاز استفاده کنید:
// app/dashboard/page.tsx
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
export default async function DashboardPage() {
const session = await verifySession()
if (!session) {
unauthorized()
}
return <div>Dashboard</div>
}۵. موارد استفاده
- نمایش فرم ورود برای مسیرهای محافظت‌شده
- شخصی‌سازی تجربه خطای ۴۰۱
- بهبود تجربه کاربری برای کاربران غیرمجاز
۶. محدودیت‌ها
- کامپوننت unauthorized.tsx هیچ prop دریافت نمی‌کند
- ویژگی آزمایشی است و ممکن است در نسخه‌های آینده تغییر کند
- برای استفاده در production باید منطق جایگزین در نظر گرفته شود
جمع‌بندی
فایل unauthorized.tsx در Next.js راهی ساده و مؤثر برای مدیریت دسترسی کاربران غیرمجاز است. با نمایش رابط کاربری سفارشی و بازگرداندن کد وضعیت ۴۰۱، می‌توانید تجربه‌ای حرفه‌ای و قابل کنترل برای کاربران بسازید — حتی اگر هنوز وارد نشده باشند.