ایجاد یک صفحه سفارشی 404 یافت نشد در Next.js 14

Next.js 14 یک راه آسان برای ایجاد صفحات سفارشی 404 Not Found برای برنامه وب شما ارائه می دهد. در این پست وبلاگ، صفحه 404 را ایجاد و سفارشی می کنیم تا تجربه کاربری شما را افزایش دهیم.

چرا یک صفحه سفارشی 404 ایجاد کنیم؟

یک صفحه سفارشی 404 به شما امکان می دهد:

• برند و طراحی سایت خود را حفظ کنید
• اطلاعات مفیدی را برای کاربرانی که به یک صفحه ناموجود رسیده اند ارائه دهید
• گزینه های پیمایش را برای هدایت کاربران به محتوای معتبر ارائه دهید

مراحل ایجاد یک صفحه سفارشی 404

1. فایل 404 را ایجاد کنید

در Next.js 14، ایجاد یک صفحه سفارشی 404 به سادگی اضافه کردن یک است not-found.js یا not-found.tsx فایل را در فهرست برنامه خود قرار دهید.

app/
├── not-found.js (or not-found.tsx)
└── layout.js

2. صفحه 404 خود را طراحی کنید

بیایید یک صفحه اصلی 404 ایجاد کنیم. در اینجا مثالی از آنچه که not-found.js شما ممکن است شبیه باشد آورده شده است:

import Link from 'next/link'

export default function NotFound() {
  return (
    div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      h1 className="text-6xl font-bold text-gray-800 mb-4">404h1>
      h2 className="text-2xl font-semibold text-gray-600 mb-4">Page Not Foundh2>
      p className="text-gray-500 mb-8">Oops! The page you're looking for doesn't exist.p>
      Link href="https://dev.to/" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
        Go back home
      Link>
    div>
  )
}

این مثال از Tailwind CSS برای استایل سازی استفاده می کند. اگر از Tailwind استفاده نمی کنید، می توانید آن را جایگزین کنید className ویژگی ها با CSS خودتان.

3. صفحه 404 خود را سفارشی کنید

با خیال راحت محتوا و استایل صفحه 404 خود را سفارشی کنید. ممکن است بخواهید اضافه کنید:

• لوگوی شرکت شما
• نوار جستجو برای کمک به کاربران برای یافتن آنچه که به دنبال آن هستند
• پیوندهایی به صفحات محبوب در سایت شما
• فرم تماس یا پیوندی برای گزارش لینک های شکسته
• بازی برای تعامل با کاربران

4. آزمایش صفحه 404 شما

برای آزمایش صفحه 404 سفارشی خود:

1. سرور توسعه Next.js خود را اجرا کنید
2. به مسیری که وجود ندارد بروید (مثلاً http://localhost:3000/this-page-does-not-exist)
3. شما باید به جای صفحه پیش‌فرض Next.js 404، صفحه 404 سفارشی خود را ببینید.

نتیجه گیری

و شما آن را دارید! تنها با چند خط کد، خطای وحشتناک 404 را به فرصتی برای خوشحال کردن کاربران خود تبدیل کرده اید.

برنامه نویسی مبارک، و امیدوارم که کاربران شما هرگز دوباره از دست ندهند! 🚀✨

PS اگر به ایده های جالبی برای صفحه 404 رسیدید، آنها را در نظرات بگذارید. من همیشه به دنبال الهام هستم!