Next.js Custom Error Pages | 404 සහ 500 හැදීම | Sinhala Guide
හායි යාළුවනේ! කොහොමද ඉතින්? අද අපි කතා කරන්න යන්නේ Next.js applications වලදී ගොඩක් වැදගත් වෙන, ඒ වගේම අපේ user experience එක ඊළඟ මට්ටමට අරගෙන යන පුංචි දෙයක් ගැන. ඒ තමයි Custom Error Pages හදන එක. අපි දන්නවානේ website එකකදී Error එකක් ආවම, විශේෂයෙන්ම page එකක් හොයාගන්න බැරි වුණාම (404 Not Found) හෝ server එක පැත්තේ අවුලක් ආවම (500 Server Error) user ට අප්සෙට් යනවා. නිකම්ම සුදු page එකක පේන Error message එකක් වෙනුවට, ලස්සනට design කරපු, user ට තේරෙන message එකක් එක්ක, ආපහු home page එකට යන්න පුළුවන් විකල්පයක් දුන්නොත් user ඒ ගැන ගොඩක් සතුටු වෙනවා. ඒක අපේ application එකේ professional look එකත් වැඩි කරනවා.
අද මේ article එකෙන් අපි බලමු Next.js වලදී Custom 404 Not Found Page එකක් සහ Custom 500 Server Error Page එකක් හදන්නේ කොහොමද කියලා. ඒ වගේම ඒවා Test කරන්නේ කොහොමද, හොඳම practices මොනවද කියලත් අපි කතා කරමු. Next.js එක්ක වැඩ කරන ඔයාට මේක ගොඩක් ප්‍රයෝජනවත් වෙයි!
Error Pages ඇත්තටම වැදගත් වෙන්නේ ඇයි?
අපි හිතමු ඔයා ලස්සනට website එකක් හදලා තියෙනවා කියලා. User කෙනෙක් ඒකට ආවාම, මොකක් හරි වැරදීමකින් නැති page URL එකකට ගියොත්, මොකද වෙන්නේ? සාමාන්‍යයෙන් ඔයාට දකින්න ලැබෙන්නේ browser එකෙන් පෙන්නන default 'Not Found' error එකක්. නැත්නම් Next.js එකෙන් එන white screen එකක්, '404 - This page could not be found' කියලා. ඒක user ට එච්චර ලස්සන අත්දැකීමක් නෙවෙයි නේද? සමහර වෙලාවට user හිතන්නත් පුළුවන් website එක වැඩ කරන්නේ නෑ කියලා.
- User Experience (UX) වැඩි දියුණු කිරීම: Custom error page එකක් කියන්නේ user ට 'අප්පෝ මේක වැඩ නෑ' කියලා හිතනවා වෙනුවට 'ආහ් මේ page එක නැතුව ඇති, මෙතනින් ආපහු home එකට යන්න පුළුවන්' කියලා හිතන්න පුළුවන් අවස්ථාවක්. ඒක user ට අපේ application එක ගැන තියෙන විශ්වාසය වැඩි කරනවා.
- Brand Consistency: ඔයාගේ website එකේ design එකට සහ brand එකට ගැලපෙන විදියට error pages හදන්න පුළුවන්. එතකොට website එකේ ඕනෑම තැනකදී user ට දැනෙන්නේ එකම brand එක ඇතුලේ ඉන්නවා වගේ හැඟීමක්.
- ප්‍රයෝජනවත් තොරතුරු සැපයීම: Error page එක ඇතුලේ user ට ආපහු home page එකට යන්න link එකක්, contact us page එකට link එකක් වගේ දේවල් දාන්න පුළුවන්. එතකොට user ට තමන්ගේ ගමන එතනින්ම නවතින්නේ නැහැ.
- SEO (Search Engine Optimization) සඳහා: Google වගේ search engines වලටත් custom 404 pages වැදගත් වෙනවා. වැරදි page එකක් තිබුණත්, 'soft 404' එකක් වෙනුවට නිවැරදිව 404 status code එකක් එක්ක custom page එකක් පෙන්නුවොත්, ඒක SEO වලට හොඳයි.
Custom 404 (Not Found) Page එකක් හදමු
Next.js වලදී Custom 404 page එකක් හදන එක ඇත්තටම ගොඩක් ලේසියි. ඔයාගේ pages directory එක ඇතුලේ 404.js කියන නමින් file එකක් හැදුවම වැඩේ ඉවරයි! Next.js automatically මේ file එක detect කරලා ඕනෑම නැති page URL එකකට ගියාම මේක පෙන්නනවා.
pages/404.js File එක හදමු
මුලින්ම ඔයාගේ Next.js project එකේ pages folder එකට ගිහින් 404.js කියලා file එකක් හදන්න. ඊට පස්සේ ඒක ඇතුලට ඔයාට ඕන විදියට design එකක් දාලා, user ට පේන්න ඕන message එක දාන්න පුළුවන්. සරල උදාහරණයක් පහතින් තියෙනවා:
// pages/404.js
import Link from 'next/link';
import Head from 'next/head';
export default function Custom404() {
return (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
textAlign: 'center',
backgroundColor: '#f8f8f8',
color: '#333'
}}>
<Head>
<title>404 - පිටුව සොයාගත නොහැක | Next.js Sinhala Guide</title>
</Head>
<h1 style={{ fontSize: '4em', margin: '0.5em 0' }}>404</h1>
<h2 style={{ fontSize: '1.5em', marginBottom: '1em' }}>අප්සෙට්! ඔයා හොයපු page එක හොයාගන්න බැරි වුණා.</h2>
<p style={{ fontSize: '1.1em', marginBottom: '2em' }}>හැබැයි අවුලක් නෑ, ආපහු අපේ main page එකට යමු.</p>
<Link href="/">
<a style={{
padding: '10px 20px',
backgroundColor: '#0070f3',
color: 'white',
textDecoration: 'none',
borderRadius: '5px',
fontSize: '1.1em'
}}>Home Page එකට යන්න</a>
</Link>
</div>
);
}
මේ code එක ඇතුලේ අපි කරලා තියෙන්නේ:
Linkcomponent එක පාවිච්චි කරලා home page එකට යන්න link එකක් දුන්නා.Headcomponent එකෙන් page එකට custom<title>එකක් දුන්නා.- සරල
inline stylesපාවිච්චි කරලා page එකට පොඩි design එකක් දුන්නා. ඔයාට පුළුවන් මේකට CSS Modules, Tailwind CSS, හෝ Styled Components වගේ කැමති දෙයක් පාවිච්චි කරන්න.
කොහොමද Test කරන්නේ?
මේක Test කරන්න හරිම ලේසියි. ඔයාගේ Next.js dev server එක (npm run dev or yarn dev) run කරලා, browser එකේ address bar එකට ඔයාගේ website URL එකට පස්සේ නැති page එකක නමක් දෙන්න. උදාහරණයක් විදියට: http://localhost:3000/this-page-does-not-exist. එතකොට ඔයාට මේ custom 404 page එක දකින්න පුළුවන් වෙයි.
Dynamic 404 Pages සහ notFound: true
සමහර වෙලාවට අපිට ඕන වෙන්නේ dynamic route එකකදී, දත්ත (data) හොයාගන්න බැරි වුණාම 404 page එකක් පෙන්නන්න. උදාහරණයක් විදියට, /products/[id] වගේ route එකකදී, දීලා තියෙන id එකට අදාළ product එක database එකේ නැත්නම්. ඒ වෙලාවට getStaticProps හෝ getServerSideProps function එක ඇතුලේ notFound: true return කරන්න පුළුවන්.
// pages/products/[id].js
import { useRouter } from 'next/router';
export default function ProductDetail({ product }) {
const router = useRouter();
// if fallback is true and product is not yet available
if (router.isFallback) {
return <div>Loading product...</div>;
}
if (!product) {
// This case should ideally not be reached if notFound: true redirects properly
return <div>Product not found locally after fallback.</div>; // Fallback for client-side routing if necessary
}
return (
<div>
<h1>{product.name}</h1>
<p>Price: ${product.price}</p>
<p>{product.description}</p>
</div>
);
}
export async function getStaticPaths() {
// Dummy product IDs for demonstration
const productIds = ['1', '2'];
const paths = productIds.map(id => ({ params: { id } }));
return {
paths,
fallback: true, // or 'blocking'
};
}
export async function getStaticProps({ params }) {
const { id } = params;
// Simulate fetching data
const products = {
'1': { id: '1', name: 'Laptop', price: 1200, description: 'Powerful laptop' },
'2': { id: '2', name: 'Mouse', price: 25, description: 'Wireless gaming mouse' },
};
const product = products[id];
if (!product) {
return {
notFound: true, // මේකෙන් තමයි custom 404 page එක පෙන්නන්නේ!
};
}
return {
props: { product },
revalidate: 60, // optional: ISR for fresh data
};
}
මේ උදාහරණයේදී id එකට අදාළ product එකක් හොයාගන්න බැරි වුණොත්, getStaticProps function එක notFound: true return කරනවා. එතකොට Next.js ස්වයංක්‍රීයව (automatically) අපේ pages/404.js page එක පෙන්නනවා. මේක ගොඩක් වැදගත් වෙන්නේ dynamic content එක්ක වැඩ කරනකොට.
Custom 500 (Server Error) Page එකක් හදමු
404 වගේම 500 errors කියන්නෙත් user ට අපහසුතාවයක් ඇති කරන්න පුළුවන් තත්වයක්. 500 errors සාමාන්‍යයෙන් එන්නේ server එකේ මොකක් හරි ගැටලුවක් (exception එකක්) ආවම. Next.js වලදී getServerSideProps, getStaticProps (fallback or revalidation process වලදී) වගේ server-side code execute වෙන තැන්වලදී හෝ API routes වලදී error එකක් ආවොත්, ඒක handle කරන්න pages/500.js file එක පාවිච්චි කරන්න පුළුවන්.
pages/500.js File එක හදමු
pages directory එක ඇතුලේ 500.js කියලා file එකක් හදන්න. මේකත් 404.js වගේම තමයි, නමුත් මේක පෙන්නන්නේ server-side error එකක් ආවොත්.
// pages/500.js
import Link from 'next/link';
import Head from 'next/head';
export default function Custom500() {
return (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
textAlign: 'center',
backgroundColor: '#f8f8f8',
color: '#333'
}}>
<Head>
<title>500 - Server Error | Next.js Sinhala Guide</title>
</Head>
<h1 style={{ fontSize: '4em', margin: '0.5em 0' }}>500</h1>
<h2 style={{ fontSize: '1.5em', marginBottom: '1em' }}>අප්පෝ! Server එකේ පොඩි අවුලක් වෙලා වගේ.</h2>
<p style={{ fontSize: '1.1em', marginBottom: '2em' }}>අපේ කට්ටිය මේක හදනකන් පොඩ්ඩක් ඉවසන්න. ආපහු Home එකට යමුද?</p>
<Link href="/">
<a style={{
padding: '10px 20px',
backgroundColor: '#dc3545',
color: 'white',
textDecoration: 'none',
borderRadius: '5px',
fontSize: '1.1em'
}}>Home Page එකට යන්න</a>
</Link>
</div>
);
}
මේකත් 404 page එක වගේම තමයි, වෙනසකට තියෙන්නේ message එක සහ සමහරවිට color scheme එක. 500 error එකක් කියන්නේ server එකේ අපිට control කරන්න බැරි (හෝ අපි බලාපොරොත්තු නොවූ) දෙයක් වුණා කියන එකනේ. ඒ නිසා user ට message එකක් දෙන එක වැදගත්.
කොහොමද Test කරන්නේ?
500 page එක Test කරන්න නම් අපි හිතාමතාම server-side error එකක් ඇති කරන්න ඕනේ. මේකට හොඳම ක්‍රම දෙකක් තියෙනවා:
1. getServerSideProps ඇතුලේ Error එකක් දාමු
pages folder එක ඇතුලේ error-test.js වගේ file එකක් හදලා ඒක ඇතුලේ getServerSideProps function එකට error එකක් දාමු.
// pages/error-test.js
export default function ErrorTestPage({ data }) {
return (
<div>
<h1>This page would show data</h1>
<p>If there were no server error!</p>
<p>Data: {data}</p>
</div>
);
}
export async function getServerSideProps() {
console.log('Fetching data...');
// මේකෙන් අපි හිතාමතාම server error එකක් ඇති කරනවා
throw new Error('This is a simulated server-side error!');
// මේ ටික execute වෙන්නේ නෑ error එක නිසා
return {
props: { data: 'Some data' },
};
}
දැන් ඔයා http://localhost:3000/error-test කියන URL එකට ගියාම ඔයාට Custom 500 page එක දකින්න පුළුවන් වෙයි. Console එකේ බලන්න, server side එකේ Error message එක පෙන්නනවා.
2. API Route එකක Error එකක් දාමු
API routes වලදීත් error එකක් ආවම Custom 500 page එක පෙන්නන්න පුළුවන්. pages/api folder එක ඇතුලේ simulate-error.js වගේ file එකක් හදමු.
// pages/api/simulate-error.js
export default function handler(req, res) {
console.log('API route hit, simulating error...');
// මේකෙන් අපි හිතාමතාම API route එකක error එකක් ඇති කරනවා
throw new Error('API route එකේදී simulation error එකක් ආවා!');
// මේ ටික execute වෙන්නේ නෑ
res.status(200).json({ message: 'Success' });
}
දැන් ඔයාට පුළුවන් මේ API route එක browser එකේ Call කරන්න (http://localhost:3000/api/simulate-error). එතකොටත් ඔයාට Custom 500 page එක දකින්න පුළුවන් වෙයි.
සැලකිය යුතුයි: Next.js client-side errors (browser එකේදී JavaScript crash වෙනවා වගේ ඒවා) pages/500.js එකෙන් handle කරන්නේ නෑ. ඒ සඳහා ඔයාට React Error Boundaries හෝ external error monitoring tools (Sentry වගේ) පාවිච්චි කරන්න වෙනවා. pages/500.js කියන්නේ server-side rendering (SSR) හෝ API routes වලදී සිදුවන errors සඳහා විතරයි.
හොඳම භාවිතයන් (Best Practices) සහ පොදු ගැටළු
Custom error pages හදනකොට අපි පොඩි දේවල් ටිකක් ගැන හිතුවොත් අපේ application එකේ quality එක තවත් වැඩි කරගන්න පුළුවන්.
1. User-Friendly Messages
Error pages වලදී කවදාවත් technical jargon පාවිච්චි කරන්න එපා. 'Error Code: 0x000000F' වගේ දේවල් user ට තේරෙන්නේ නෑ. සරලව, කරුණාවන්ත විදියට (friendly tone) message එක දෙන්න. මොකක්ද වුණේ, ඒකට හේතුව මොකක්ද වෙන්න ඇත්තේ, ඊළඟට මොකද කරන්න ඕනේ කියන දේවල් පැහැදිලි කරන්න.
404 Page: 'ඔයා හොයපු පිටුව හොයාගන්න බැරි වුණා. URL එක හරිද කියලා ආපහු බලන්න. නැත්නම් Home Page එකට යන්න.' වගේ දෙයක්.
500 Page: 'Server එකේ පොඩි අවුලක් ආවා වගේ. මේක අපේ කට්ටිය හදනකන් පොඩ්ඩක් ඉවසන්න. Home Page එකට ගිහින් බලන්න පුළුවන්.' වගේ දෙයක්.
2. Navigation Options
Error page එකක ඉඳන් user ට සිර වෙන්න දෙන්න එපා. හැම error page එකකම home page එකට යන්න link එකක්, contact us page එකට link එකක්, හෝ search bar එකක් වගේ navigation options තියන්න. ඒක user ට නැවත application එක ඇතුලට එන්න උදව් කරනවා.
3. Error Logging
500 errors කියන්නේ server එකේ අපිට විසඳන්න ඕන ගැටලු. ඒ නිසා 500 error එකක් ආවම, ඒක Log කරන්න (record කරන්න) අමතක කරන්න එපා. Sentry, DataDog, New Relic වගේ services පාවිච්චි කරන්න පුළුවන්, නැත්නම් Next.js built-in logger එක පාවිච්චි කරන්න පුළුවන්. මේකෙන් අපිට පුළුවන් error එක ඉක්මනට හොයාගෙන fix කරන්න.
// pages/500.js - improved with basic logging
import { useEffect } from 'react';
import Link from 'next/link';
import Head from 'next/head';
export default function Custom500() {
useEffect(() => {
// Client-side logging, useful for generic errors, but server-side errors are caught server-side
// In a real application, you'd send this to a dedicated logging service (e.g., Sentry)
console.error('500 Error page displayed to user');
}, []);
return (
<div style={{
/* ... styles as before ... */
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
textAlign: 'center',
backgroundColor: '#f8f8f8',
color: '#333'
}}>
<Head>
<title>500 - Server Error | Next.js Sinhala Guide</title>
</Head>
<h1 style={{ fontSize: '4em', margin: '0.5em 0' }}>500</h1>
<h2 style={{ fontSize: '1.5em', marginBottom: '1em' }}>අප්පෝ! Server එකේ පොඩි අවුලක් වෙලා වගේ.</h2>
<p style={{ fontSize: '1.1em', marginBottom: '2em' }}>අපේ කට්ටිය මේක හදනකන් පොඩ්ඩක් ඉවසන්න. ආපහු Home එකට යමුද?</p>
<Link href="/">
<a style={{
padding: '10px 20px',
backgroundColor: '#dc3545',
color: 'white',
textDecoration: 'none',
borderRadius: '5px',
fontSize: '1.1em'
}}>Home Page එකට යන්න</a>
</Link>
</div>
);
}
// Note: For true server-side logging of errors, you would ideally capture the error
// within `getServerSideProps` or API routes themselves before it cascades to the 500 page.
// A global error handler might be set up in a production environment.
4. Client-side vs. Server-side Errors
අපි මේ කතා කරපු 404.js සහ 500.js කියන්නේ server-side generated errors සහ client-side navigation (නැති routes වලට යනකොට) වලදී තමයි වැඩ කරන්නේ. JavaScript runtime errors (e.g., `ReferenceError` client-side එකේදී) වගේ ඒවාට මේවා වැඩ කරන්නේ නෑ. ඒවට React Error Boundaries පාවිච්චි කරන්න වෙනවා. නමුත් Next.js app එකක වැඩිපුරම errors එන්නේ server-side processes වලදී නිසා මේ pages දෙක අත්‍යවශ්‍යයි.
අවසාන වශයෙන්
ඉතින් යාළුවනේ, අපි දැක්කා Next.js project එකක Custom 404 (Not Found) සහ 500 (Server Error) pages හදන එක කොච්චර ලේසිද කියලා, ඒ වගේම ඒක කොච්චර වැදගත්ද කියලත්. මේ පුංචි වෙනස්කම් ටිකෙන් ඔයාට ඔයාගේ application එකේ user experience එක ගොඩක් වැඩි දියුණු කරන්න පුළුවන්. user ලාට වගේම ඔයාගේ website එකටත් ඒක ගොඩක් හොඳයි.
අපි මතක තියාගන්න ඕනේ: error pages කියන්නේ application එකේ අවසානය නෙවෙයි. ඒක user ට ආපහු යන්න පාර පෙන්නන හොඳ අවස්ථාවක්. ඒ නිසා මේ pages ලස්සනට, පැහැදිලිව හදන්න අමතක කරන්න එපා. ඔයාගේ Next.js project එකට මේවා අනිවාර්යයෙන්ම එකතු කරලා බලන්න! මොකද ඔයාගේ users ලා සතුටින් තියාගන්න එක තමයි ප්‍රධානම දේ!
මේ ගැන ඔයාගේ අදහස්, ප්‍රශ්න, හෝ ඔයාට තියෙන tips මොනවද කියලා පහතින් Comment කරන්න. අපි ඊළඟ article එකෙන් හමුවෙමු! Happy coding!