Next.js আপনাকে একটি কাস্টম 404 পেজ তৈরি করার সুবিধা দেয়, যা ব্যবহারকারীরা যদি এমন কোনো পেজে যান যা নেই (404 Error) তখন দেখানো হবে। এই পেজে আপনি নিজের ব্র্যান্ডিং, ডিজাইন এবং ইউজার ফ্রেন্ডলি মেসেজ রাখতে পারেন।
Next.js এ কাস্টম 404 পেজ তৈরি করা খুবই সহজ এবং এতে কোনো অতিরিক্ত কনফিগারেশন প্রয়োজন হয় না। শুধু একটি নতুন ফাইল তৈরি করলেই হবে।
১. Custom 404 পেজ তৈরি করা
Next.js-এ কাস্টম 404 পেজ তৈরি করতে, আপনাকে pages/404.js নামে একটি নতুন ফাইল তৈরি করতে হবে। এই ফাইলটি স্বয়ংক্রিয়ভাবে 404 এরর পেজ হিসেবে কাজ করবে যখন ইউজার কোনো ভুল URL এ প্রবেশ করবে।
404 পেজের উদাহরণ:
pages/404.js:
import Link from 'next/link'
export default function Custom404() {
return (
<div style={{ textAlign: 'center', padding: '50px' }}>
<h1 style={{ fontSize: '72px', color: '#ff0000' }}>404</h1>
<h2>Oops! Page not found</h2>
<p>The page you're looking for does not exist.</p>
<Link href="/">
<a style={{ color: '#0070f3', textDecoration: 'underline' }}>Go back to home</a>
</Link>
</div>
)
}
এখানে pages/404.js ফাইলটি তৈরি করা হয়েছে এবং এটি একটি কাস্টম 404 পেজ হিসেবে কাজ করবে।
Linkকম্পোনেন্ট ব্যবহার করা হয়েছে হোম পেজে ফিরে যাওয়ার জন্য, কারণ Next.js এরLinkকম্পোনেন্ট ক্লায়েন্ট-সাইড রাউটিংয়ের জন্য আরও দ্রুত লোড নিশ্চিত করে।- আপনি এখানে স্টাইলিং, কনটেন্ট এবং ডিজাইন কাস্টমাইজ করতে পারেন।
২. 404 পেজ কাস্টমাইজেশন
কাস্টম 404 পেজটি আপনার অ্যাপ্লিকেশনের শৈলী এবং ব্র্যান্ডিং অনুযায়ী কাস্টমাইজ করা সম্ভব। আপনি চাইলে এখানে:
- এনিমেশন বা আইকন যোগ করতে পারেন।
- সহজ নেভিগেশন বা সার্চ ফিচার প্রদান করতে পারেন যাতে ব্যবহারকারীরা সহজেই আপনার সাইটের অন্যান্য অংশে যেতে পারে।
- ডাইনামিক মেসেজ বা অ্যালটারনেটিভ ইউআরএল প্রদর্শন করতে পারেন।
উদাহরণস্বরূপ, আপনি যদি কিছু সার্চ অপশন বা রিসেন্ট পেজের লিংক দিতে চান:
import Link from 'next/link'
export default function Custom404() {
return (
<div style={{ textAlign: 'center', padding: '50px' }}>
<h1 style={{ fontSize: '72px', color: '#ff0000' }}>404</h1>
<h2>Oops! Page not found</h2>
<p>The page you're looking for does not exist.</p>
<div>
<p>Try searching for something else or go to one of these pages:</p>
<Link href="/">
<a style={{ color: '#0070f3', textDecoration: 'underline' }}>Home</a>
</Link>
<br />
<Link href="/about">
<a style={{ color: '#0070f3', textDecoration: 'underline' }}>About Us</a>
</Link>
</div>
</div>
)
}
এখানে, আপনি Home এবং About Us লিংক দিয়ে ব্যবহারকারীদের সাইটের মূল অংশে নিয়ে আসছেন।
৩. 404 পেজের স্টাইলিং
Next.js আপনাকে কোনো ফাইল ফরম্যাট বা স্টাইলিং ইঞ্জিনের ওপর নির্ভর না করে কাস্টম 404 পেজের স্টাইল করতে সাহায্য করে। আপনি ইমপোর্ট করতে পারেন:
- CSS ফাইল:
import '../styles/404.css'অথবা CSS Modules ব্যবহার করতে পারেন। - Styled-components বা Emotion এর মতো CSS-in-JS লাইব্রেরি ব্যবহার করতে পারেন।
- Tailwind CSS ইত্যাদি।
৪. কাস্টম 404 পেজের SEO
আপনি কাস্টম 404 পেজের SEO নিশ্চিত করতে পারেন:
- Meta Tags:
<meta name="robots" content="noindex, nofollow">ব্যবহার করুন যাতে সার্চ ইঞ্জিন ভুল URL গুলি ইনডেক্স না করে। - Custom Title: 404 পেজের জন্য আলাদা টাইটেল প্রদান করুন, যেমন "Page Not Found"।
import Head from 'next/head'
export default function Custom404() {
return (
<>
<Head>
<title>Page Not Found - My Site</title>
<meta name="robots" content="noindex, nofollow" />
</Head>
<div style={{ textAlign: 'center', padding: '50px' }}>
<h1 style={{ fontSize: '72px', color: '#ff0000' }}>404</h1>
<h2>Oops! Page not found</h2>
<p>The page you're looking for does not exist.</p>
<Link href="/">
<a style={{ color: '#0070f3', textDecoration: 'underline' }}>Go back to home</a>
</Link>
</div>
</>
)
}
এখানে, Head কম্পোনেন্ট ব্যবহার করা হয়েছে যাতে কাস্টম টাইটেল এবং noindex, nofollow মেটা ট্যাগ যুক্ত করা যায়।
৫. 404 পেজের পরিক্ষা
আপনার কাস্টম 404 পেজ তৈরির পর, এটি পরীক্ষা করে দেখতে হবে যে এটি ঠিকভাবে কাজ করছে কি না:
- আপনার অ্যাপ চালু করুন এবং এমন কোনো URL প্রবেশ করুন যা আপনার অ্যাপে নেই (যেমন:
http://localhost:3000/nonexistent-page). - যদি সব কিছু ঠিকঠাক থাকে, তাহলে আপনার কাস্টম 404 পেজটি প্রদর্শিত হবে।
সারাংশ
Next.js এ কাস্টম 404 পেজ তৈরি করা খুবই সহজ এবং এটি আপনার অ্যাপের ইউজার এক্সপিরিয়েন্স উন্নত করতে সহায়তা করে। আপনি কাস্টম 404 পেজে আপনার ব্র্যান্ডিং, নেভিগেশন, এবং অন্যান্য গুরুত্বপূর্ণ ফিচারগুলো অন্তর্ভুক্ত করে ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি পরিবেশ তৈরি করতে পারেন।
Read more
