Next.js একটি শক্তিশালী এবং উন্নত ফ্রেমওয়ার্ক, তবে যখনই আপনি বড় প্রকল্প তৈরি করবেন, কিছু সাধারণ ত্রুটি (errors) দেখা দিতে পারে। এগুলি দ্রুত সমাধান করতে হলে ডিবাগিং কৌশলগুলির ওপর দৃষ্টি রাখতে হবে। এই গাইডে, আমরা Next.js এর কিছু সাধারণ ত্রুটি এবং তাদের সমাধান সম্পর্কিত কিছু ডিবাগিং কৌশল আলোচনা করবো।
১. Common Errors in Next.js
১.১. "Module Not Found" Error
Error Message:
Module not found: Can't resolve 'module-name'
এই ত্রুটিটি ঘটে যখন আপনি কোনো নির্দিষ্ট প্যাকেজ বা মডিউল ইনস্টল করতে ভুলে যান অথবা ভুলভাবে ইম্পোর্ট করেন।
সমাধান:
নিশ্চিত করুন যে, আপনি যে প্যাকেজটি ব্যবহার করতে চান তা সঠিকভাবে ইনস্টল করা হয়েছে:
npm install module-name- মডিউল বা প্যাকেজটির নাম সঠিকভাবে উল্লেখ করা হয়েছে কিনা তা পরীক্ষা করুন।
১.২. "404 Not Found" Error for Static Pages
Error Message:
404 - Page Not Found
এই ত্রুটিটি তখন হয় যখন Next.js প্রকল্পে নির্দিষ্ট পেজটি সঠিকভাবে তৈরি বা রাউটিং করা হয়নি।
সমাধান:
- নিশ্চিত করুন যে, আপনি পেজটি সঠিকভাবে
pagesডিরেক্টরিতে রেখেছেন এবং সঠিক নাম ব্যবহার করেছেন। - পেজের নামের সাথে এক্সটেনশন
.js,.ts,.jsx,.tsxসঠিকভাবে ব্যবহার হয়েছে কিনা তা চেক করুন।
১.৩. "Cannot Read Property of Undefined" Error
Error Message:
TypeError: Cannot read property 'property-name' of undefined
এটি ঘটে যখন আপনি এমন কোনো অবজেক্ট বা ভেরিয়েবল অ্যাক্সেস করতে চাচ্ছেন, যা undefined অথবা null।
সমাধান:
পপুলার সল্যুশন হলো
optional chaining (?.)ব্যবহার করা, যা অবজেক্টের প্রোপার্টি চেক করতে সহায়তা করে।const user = undefined; console.log(user?.name); // undefined হবে, ত্রুটি হবে না
১.৪. "Hydration Error"
Error Message:
Warning: Text content did not match. Server-rendered HTML does not match client-rendered HTML.
এই ত্রুটি তখন হয় যখন server-side rendering (SSR) এর মাধ্যমে তৈরি করা HTML ক্লায়েন্ট সাইডে রেন্ডার হওয়ার সময় মেলেনা।
সমাধান:
- এই ত্রুটিটি সাধারণত যখন আপনি রেন্ডারিংয়ে state পরিবর্তন বা asynchronous ডেটা ফেচিং করেন। পেজটি রেন্ডার করার আগে ডেটা ফেচিং এর জন্য
useEffectবাgetServerSidePropsব্যবহার করুন।
২. Debugging Techniques
২.১. Console Logs ব্যবহার করা
Next.js এ ডিবাগ করার একটি সাধারণ কৌশল হলো console.log ব্যবহার করা। আপনি যেকোনো জায়গায় লোগিং করে দেখতে পারেন, যেন কোডের নির্দিষ্ট জায়গা কোথায় সমস্যা হচ্ছে তা বুঝতে পারেন।
useEffect(() => {
console.log('This is my log', someVariable);
}, [someVariable]);
এছাড়া, সার্ভার সাইডেও লগ ব্যবহার করতে পারেন:
export async function getServerSideProps() {
console.log('Fetching data...');
// Your fetching logic
return {
props: { data },
};
}
২.২. Error Boundaries ব্যবহার করা
React-এর Error Boundaries ব্যবহার করে আপনি কোডের ক্র্যাশ হওয়া এভেন্টগুলো ধরতে পারেন এবং ব্যবহারকারীদের একটি fallback UI প্রদান করতে পারেন।
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.log('Error:', error);
console.log('Info:', info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
export default ErrorBoundary;
আপনি এটি আপনার অ্যাপ্লিকেশনের চারপাশে একটি wrapper হিসেবে ব্যবহার করতে পারেন:
<ErrorBoundary>
<YourComponent />
</ErrorBoundary>
২.৩. Next.js Error Overlay ব্যবহার করা
Next.js তে, ডেভেলপমেন্ট মোডে একটি Error Overlay থাকে যা স্বয়ংক্রিয়ভাবে ত্রুটিগুলো হাইলাইট করে এবং দ্রুত সমাধান করতে সহায়তা করে।
- আপনি যদি নেক্সট.জেএস প্রজেক্টে কোনো ত্রুটি পান, তাহলে সাধারণত ব্রাউজারে একটি লাল রঙের overlay প্রদর্শিত হবে যা ত্রুটির বিবরণ দেখাবে।
এছাড়া, যদি আপনার প্রজেক্টটি Production Mode তে চলে আসে, তবুও এই টুলটি অফলাইন ডিবাগিং এবং লগিং এর জন্য সহায়ক হতে পারে।
২.৪. React DevTools ব্যবহার করা
React DevTools এর সাহায্যে আপনি আপনার React কম্পোনেন্টের স্টেট, প্রপস এবং রেন্ডারিং সম্পর্কে আরও বিস্তারিত তথ্য পেতে পারেন। এটি console.log বা debugger পয়েন্টের চেয়ে আরও শক্তিশালী টুল হিসেবে কাজ করে।
- React DevTools ইনস্টল করুন:
- আপনার কম্পোনেন্টের স্টেট এবং প্রপস পর্যবেক্ষণ করুন, এবং দেখুন কোথায় আপনার কোডের সমস্যা হতে পারে।
২.৫. Next.js Logs এবং Debugging Flags ব্যবহার করা
Next.js তে debugging flags এবং logs দেখতে অনেক সময় প্রয়োজনীয় হয়। এটি বিশেষভাবে সুবিধাজনক যখন আপনার অ্যাপ প্রোডাকশন মোডে থাকে।
উদাহরণ:
next dev --verbose
এটি আপনাকে আরো বিস্তারিত ডেভেলপমেন্ট লগ প্রদান করবে।
৩. Additional Tools
- VSCode Debugger: যদি আপনি Visual Studio Code ব্যবহার করেন, তাহলে VSCode এর বিল্ট-ইন ডিবাগger ব্যবহার করে ব্রাউজারে রান করা কোড ডিবাগ করতে পারেন।
- Sentry: আপনার অ্যাপে সেন্ট্রি ইনটিগ্রেট করার মাধ্যমে আপনি প্রোডাকশন পর্যায়ে যেকোনো ত্রুটি ট্র্যাক করতে পারেন। এটি আপনার অ্যাপে অটোমেটিক ত্রুটি রিপোর্টিং ও মনিটরিং সক্ষম করে।
সারাংশ
Next.js এ ডিবাগিং একটি গুরুত্বপূর্ণ প্রক্রিয়া, যা আপনাকে অ্যাপ্লিকেশনের ত্রুটিগুলো দ্রুত সমাধান করতে সহায়তা করে। আপনি console.log, Error Boundaries, React DevTools, এবং Sentry এর মতো টুলস ব্যবহার করে সহজেই সমস্যা চিহ্নিত এবং সমাধান করতে পারেন। এছাড়া, next-pwa বা অন্য কোনও প্যাকেজে সমস্যায় পড়লে, তাদের ডকুমেন্টেশন বা কমিউনিটি ফোরাম থেকেও সহায়তা নেওয়া যেতে পারে।
Read more
