خطای 404 نکست جی اس 13، از سیر تا پیاز!

خطا، ارور، باگ... کلماتی منفور اما جدایی ناپذیر از دنیای برنامه نویسی! Next js 13 هم تافته ای جدا بافته نیست و باید فکری به حال خطاهاش بکند؛ در این مقاله نگاهی کوتاه اما مفید به نحوه مدیریت خطای 404 در نکست جی اس خواهیم انداخت. با کدنایت همراه باشید!

قبل از شیرجه زدن به دنیای بی انتهای کد ها، بهتر است کمی اوضاع را برای خودمان شفاف کنیم؛ یعنی مشخص کنیم منظورمان از "خطای 404" در این مقاله چیست؟ پاسخ ساده است! فرض کنید یک اپلیکیشن نکست جی اسی توسعه داده و صفحات مورد نیاز خود را در آن گنجانده ایم و در نهایت، اپلیکیشن ما شامل صفحات زیر است:

// domain.com --> صفحه اصلی
// domain.com/about --> صفحه درباره ما
// domain.com/contact-us --> صفحه تماس با ما

حال میدانیم که اگر کاربر درخواست مشاهده صفحه ای که در این لیست وجود ندارد را نماید، برای مثال "domain.com/courses"، باید با صفحه ای موسوم به 404 مواجه گردد؛ در این مقاله به ساخت و مدیریت این صفحه در نکست جی اس ورژن 13 (App directory) خواهیم پرداخت.

صفحه 404 پیشفرض

همانطور که در مثال بالا ذکر شد، هنگامی که کاربر درخواست مشاهده صفحه ای را داراست که این صفحه در سایت وجود ندارد، باید با صفحه 404 مواجه گردد. خوشبختانه خود نکست جی اس فکر همه جای کار را کرده و یک صفحه 404 پیشفرض در ساختار خود قرار داده که به شکل زیر است:

این صفحه ساده اما کار راه انداز، هر زمان که کاربر قصد مشاهده صفحه ای نامعتبر در سایت را داشته باشد به طور خودکار توسط خود نکست جی اس نمایش داده خواهد شد. همچنین نکته جالب توجه در مورد این صفحه، آن است که خود نکست جی اس، متا تگ های مورد نیاز را برای نادیده گرفته شدن توسط موتور های جست و جو به این صفحه اضافه می نماید:

<meta name="robots" content="noindex">

همانطور که حدس میزنید این کافی نیست و با وجود همه این موارد، باز هم نیاز است که صفحه 404 مطابق با طراحی کلی سایت شخصی سازی شود و ساختار آن تغییر یابد.

شخصی سازی صفحه 404

شاید باورتان نشود، اما نکست جی اس اپ دایرکتوری حسابی دست ما را باز گذاشته و کار را ساده کرده است! برای ساخت یک صفحه 404 شخصی سازی شده، که به صورت هوشمند در موقع نیاز به جای صفحه پیشفرض 404 نکست جی اس نمایش داده شود، تنها کافیست در فولدر app پروژه خود یک فایل با نام not-found ایجاد کنیم و هرطور که دوست داریم آنرا شخصی سازی کنیم:

// app/not-fount.tsx یا app/not-fount.jsx

import Link from 'next/link'

const NotFound = () => {
  return (
    <div>
      <h2>صفحه مورد نظر پیدا نشد!</h2>
      <p>شاید بهتر باشه دنبال صفحه دیگه ای بگردی...</p>
      <Link href="/">بازکشت به صفحه اصلی</Link>
    </div>
  );
};

export default NotFound;

از این به بعد هر زمان که نیازی به نمایش داده شدن صفحه 404 باشد، خود نکست جی اس به صورت خودکار به جای صفحه پیشفرض، از فایل بالا استفاده خواهد کرد؛ به همین سادگی! اما شگفتی های نکست جی اس اپ دایرکتوری به همینجا ختم نمی شود...

ارور 404 خاص برای هر صفحه!

در مثال قبلی ساخت یک صفحه 404 عمومی شخصی سازی شده را آموختیم، اما نکست جی اس این قابلیت را به ما خواهد داد که برای هر یک از صفحات اپلیکیشن خود، صفحه ی 404 مخصوص به خود آنرا داشته باشیم، برای مثال فرض کنید قسمت مقالات اپلیکیشن نکست جی اسی ما شامل صفحات زیر است:

// domain.com/blogs --> صفحه لیست مقالات
// domain.com/blogs/why-next-js --> صفحه مقاله ای در مورد نکست جی اس
// domain.com/blogs/why-tailwind --> صفحه مقاله ای در مورد تیلویند

در حالت فعلی، اگر کاربر قصد مشاهده مقاله ای که وجود ندارد را داشته باشد، از همان صفحه 404 عمومی ساخته شده در مرحله قبل استفاده خواهد شد، اما نکست جی اس به ما این امکان را می دهد که یک فایل not-found، تنها مخصوص به صفحه مقالات ایجاد کنیم:

// app/blogs/not-fount.tsx یا app/blog/not-fount.jsx

import Link from 'next/link'

const NotFound = () => {
  return (
    <div>
      <h2>مقاله مورد نظر پیدا نشد!</h2>
      <p>شاید بهتر باشه دنبال مقاله دیگه ای بگردی...</p>
      <Link href="/blogs">بازکشت به لیست مقالات</Link>
    </div>
  );
};

export default NotFound;

با انجام این کار، اگر کاربر قصد مشاهده صفحه ای ناموجود در بخش مقالات را داشته باشد، صفحه 404 مخصوص مقالات برای او نمایش داده خواهد شد و در سایر صفحات سایت (خارج از فولدر blogs) از صفحه 404 عمومی استفاده خواهد شد!

اجبار به نمایش صفحه 404

گاهی داده های مربوط به یک صفحه، از سرور دریافت می شود و نیاز است با توجه به پاسخ سرور صفحه 404 نمایش داده شود، در این موقعیت میتوان از فانکشن notFound خود نکست جی اس برای نمایش شرطی صفحه 404 استفاده کرد. برای مثال:

// app/user/[id]/page.js

// ابتدا فانکشن نات فاند را ایمپورت می کنیم
import { notFound } from "next/navigation";

async function fetchUser(id) {
  const res = await fetch(`https://api.domain.com/get-user/${id}`);
  if (!res.ok) return undefined;
  return res.json();
}

export default async function Profile({ params }) {
  // داده های مربوط به یوزر، با توجه به آی دی موجود در یو آر ال از سرور دریافت می شوند
  const user = await fetchUser(params.id);

  // در صورتی که داده ای وجود نداشت، یعنی یوزر ناموجود است و باید صفحه 404 نمایش داده شود
  if (!user) {
    // با کال کردن فانکشن زیر، صفحه 404 به صورت خودکار نشان داده خواهد شد و ادامه کد نادیده گرفته می شد
    notFound();
  }

  // ...
}

همانطور که در مثال بالا مشاهده کردید، این فانکشن نیازی به return شدن ندارد و تنها با کال شدن، صفحه 404 را نمایش خواهد داد.

جمع بندی

نکست جی اس مجموعه ای بی نظیر از انواع فانکشن ها، کامپوننت ها، هوک ها و ... برای تجربه توسعه راحت تر بر بستر ریکت است. همانگونه که دیدید، مدیریت خطای 404 در نکست جی اس به سادگی هرچه تمام تر قابل انجام خواهد بود و نیازی به انجام تنظیمات و کانفیگ های اضافی احساس نمیگردد. در بخش های بعدی مقاله، به مدیریت سایر ارور ها و خطاها در نکست جی اس خواهیم پرداخت. همچنین شما میتوانید در دوره آموزشی جامع نکست جی اس کدنایت شرکت نمایید و علاوه بر تمامی موارد فوق، هرآنچه برای تبدیل شدن به یک توسعه دهنده نکست جی اس نیاز دارید را در کنار کدنایت بیاموزید!

پذیرای نظرات شما در قسمت کامنت ها هستیم، ممنون از همراهی شما!