مدیریت احراز هویت و کش در Next.js — راهنمای توسعه‌دهنده برای امنیت و عملکرد پویا

۱. کنترل دسترسی با unauthorized()

unauthorized() تابعی است که خطای 401 را پرتاب کرده و صفحه unauthorized.tsx را نمایش می‌دهد. این تابع برای محافظت از مسیرهای حساس و هدایت کاربران غیرمجاز به صفحه ورود استفاده می‌شود.

فعال‌سازی:

experimental: {
  authInterrupts: true,
}

مثال در Server Component:

const session = await verifySession()
if (!session) unauthorized()

صفحه سفارشی:

// app/unauthorized.tsx
<main>
  <h1>401 - Unauthorized</h1>
  <p>Please log in to access this page.</p>
  <Login />
</main>

۲. کش هوشمند با unstable_cache()

unstable_cache() برای کش عملیات سنگین مانند کوئری‌های دیتابیس استفاده می‌شود. این تابع یک نسخه memoized از تابع اصلی ایجاد می‌کند که در درخواست‌های بعدی نیز باقی می‌ماند.

مثال:

const getCachedUser = unstable_cache(
  async (id) => fetchUser(id),
  ['user-cache-key'],
  { tags: ['users'], revalidate: 60 }
)

نکات مهم:

• از دسترسی به کوکی یا هدر درون تابع کش‌شده خودداری کنید
• از تگ‌ها برای بازسازی هدفمند استفاده کنید
• از revalidate برای تعیین مدت اعتبار کش استفاده کنید

۳. بازسازی آنی داده‌ها با updateTag()

updateTag() در Server Actions برای باطل‌کردن فوری کش داده‌ها پس از mutation استفاده می‌شود.

مثال:

'use server'
import { updateTag } from 'next/cache'

export async function createPost(formData) {
  const post = await db.post.create({ data: formData })
  updateTag('posts')
  updateTag(`post-${post.id}`)
  redirect(`/posts/${post.id}`)
}

محدودیت‌ها:

• فقط در Server Actions قابل استفاده است
• برای Route Handlers از revalidateTag() استفاده کنید

۴. جلوگیری از کش با unstable_noStore()

unstable_noStore() برای غیرفعال‌کردن کش و اجبار به رندر داینامیک استفاده می‌شود.

مثال:

import { unstable_noStore as noStore } from 'next/cache'

export default async function Component() {
  noStore()
  const data = await db.query(...)
}

۵. مدیریت خطا با unstable_rethrow()

اگر درون try/catch از notFound() یا redirect() استفاده می‌کنید، از unstable_rethrow() برای حفظ رفتار پیش‌فرض Next.js استفاده کنید.

مثال:

try {
  const res = await fetch(...)
  if (res.status === 404) notFound()
} catch (err) {
  unstable_rethrow(err)
}

۶. نمایش وضعیت ناوبری با useLinkStatus()

useLinkStatus() در Client Component برای نمایش وضعیت pending لینک‌ها استفاده می‌شود.

مثال:

'use client'
import { useLinkStatus } from 'next/link'

function Hint() {
  const { pending } = useLinkStatus()
  return <span className={`link-hint ${pending ? 'is-pending' : ''}`} />
}

بهترین شیوه‌ها:

• استفاده با prefetch={false}
• جلوگیری از پرش layout با انیمیشن opacity
• استفاده از fallback در سطح route با loading.js

جمع‌بندی

با استفاده از unauthorized() برای کنترل دسترسی، unstable_cache() برای کش هوشمند، updateTag() برای بازسازی آنی، و useLinkStatus() برای تجربه ناوبری روان، می‌توانید اپلیکیشنی امن، سریع و پویا در Next.js بسازید.