নতুন পণ্য যোগ করার সময় ই-কমার্স অ্যাপে Next.js 500 ত্রুটি ঠিক করা

যখন একটি নিরবচ্ছিন্ন ই-কমার্স ওয়ার্কফ্লো ভেঙে যায়

একটি ই-কমার্স প্ল্যাটফর্ম তৈরি করা তার নিজস্ব চ্যালেঞ্জ নিয়ে আসে, বিশেষ করে যখন আধুনিক ফ্রেমওয়ার্ককে একীভূত করা পরবর্তী.js লারাভেলের মতো শক্তিশালী ব্যাকএন্ড সহ। অপ্রত্যাশিত ত্রুটি দেখা দিলে আপনি যে নিরবচ্ছিন্ন অভিজ্ঞতা কল্পনা করেন তা ব্যাহত হতে পারে। একটি 500 অভ্যন্তরীণ সার্ভার ত্রুটি এমন একটি দুঃস্বপ্ন যা আতঙ্ক এবং বিভ্রান্তির কারণ হতে পারে। 😟

সম্প্রতি, আমি হোস্ট করা একটি প্রকল্পে এই সঠিক সমস্যার মুখোমুখি হয়েছি ডিজিটাল মহাসাগর. প্রাথমিকভাবে সবকিছু ঠিকঠাক লাগছিল—হোমপেজটি হিক্কা ছাড়াই নতুন পণ্য প্রদর্শন করেছে। কিন্তু যে মুহুর্তে আমি একটি পণ্যের বিশদ পৃষ্ঠায় নেভিগেট করার চেষ্টা করেছি বা লিঙ্ক উপাদান ব্যবহার করে একটি পণ্যের উপর ঘোরাঘুরি করার চেষ্টা করেছি, ভয়ঙ্কর 500 ত্রুটিটি মাথা তুলেছে।

এই বিষয়টিকে কী ধাঁধায় ফেলেছে তা হল এর অসঙ্গতি। স্থানীয়ভাবে, অ্যাপটি নির্বিঘ্নে কাজ করেছে, এমনকি উৎপাদন এবং পরিবেশের পরিবেশের নকল করার সময়ও। মঞ্চায়নও ঠিকঠাক কাজ করেছে, কিন্তু উৎপাদন? সেখানেই ব্যর্থ হয়েছে। এই রহস্যগুলি একজন বিকাশকারীর ধৈর্য এবং সমস্যা সমাধানের দক্ষতা পরীক্ষা করতে পারে।

এটি আমাকে এমন একটি সময়ের কথা মনে করিয়ে দেয় যখন আমার গাড়িটি একটি রোড ট্রিপের সময় পুরোপুরি চালানোর পরে অবর্ণনীয়ভাবে ভেঙে পড়ে। একটি অ্যাপ ডিবাগ করার মতো, আপনি সবকিছু পরীক্ষা করেন—জ্বালানি, টায়ার এবং এমনকি আটকে থাকা ফিল্টারের মতো অস্পষ্ট সমস্যা। একইভাবে, এই ত্রুটিটি সমাধান করার জন্য একটি পদ্ধতিগত পদ্ধতির এবং প্রচুর পরীক্ষা এবং ত্রুটির দাবি ছিল। 🚗💻

সমাধান বোঝা: কোড ব্রেক ডাউন

প্রদত্ত স্ক্রিপ্টগুলি একটি সাধারণ সমস্যার সমাধান করে পরবর্তী.js অ্যাপ্লিকেশন: ডায়নামিক রাউটিং এবং আইএসআর (ইনক্রিমেন্টাল স্ট্যাটিক রিজেনারেশন) চ্যালেঞ্জ। প্রথম স্ক্রিপ্টটি রিঅ্যাক্ট ক্যোয়ারির সুবিধা দেয় prefetchQuery পেজ রেন্ডার করার আগে ডেটা আনা এবং ক্যাশে করার পদ্ধতি। এটি নিশ্চিত করে যে ব্যবহারকারী যখন পণ্যের বিশদ পৃষ্ঠায় নেভিগেট করেন তখন পণ্যের বিবরণ পাওয়া যায়, রানটাইম আনার বিলম্ব রোধ করে। লাইনে অপেক্ষা করা এড়াতে এটি একটি সিনেমার টিকিট প্রি-অর্ডার করার মতো। 🎟️ এই সক্রিয় আনার ফলে পৃষ্ঠা লোডের সময় কমে যায় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।

দ্বিতীয় স্ক্রিপ্টে, দ StaticPaths পান ফাংশন ব্যাকএন্ড API ব্যবহার করে পণ্যগুলির জন্য গতিশীলভাবে রুট তৈরি করে। নির্দিষ্ট করে ফলব্যাক: 'ব্লকিং', এটি নিশ্চিত করে যে নতুন পণ্য প্রথমবার অ্যাক্সেস করার সময় চাহিদা অনুযায়ী পরিবেশন করা হয়। এই পদ্ধতিটি হাজার হাজার পণ্য সহ ই-কমার্স প্ল্যাটফর্মের জন্য অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি নির্মাণের সময় সমস্ত সম্ভাব্য পৃষ্ঠাগুলিকে প্রি-রেন্ডারিং এড়ায়। এটিকে শুধুমাত্র বেকিং কুকি হিসেবে ভাবুন যখন কেউ আপনার রান্নাঘরকে আগে থেকে প্রতিটি স্বাদ দিয়ে পূরণ করার পরিবর্তে তাদের অর্ডার দেয়। 🍪

তৃতীয় স্ক্রিপ্ট এর ইন্টিগ্রেশন ডিহাইড্রেট মধ্যে getStaticProps সার্ভার-সাইড ডেটাকে ক্রমিক অবস্থা হিসাবে ফ্রন্টএন্ডে পাঠানোর অনুমতি দেয়। এটি এসইও-এর জন্য বিশেষভাবে উপযোগী, কারণ এটি নিশ্চিত করে যে আইএসআর-এর মাধ্যমে রেন্ডার করা পৃষ্ঠাগুলিতে এখনও সার্চ ইঞ্জিন ক্রল করার জন্য প্রয়োজনীয় মেটাডেটা রয়েছে। এটি বাড়িতে একটি থালা তৈরি করা এবং ডেলিভারির জন্য নিখুঁতভাবে প্যাকেজিং করার মতো যাতে এটি আকর্ষণীয় দেখায় এবং পৌঁছানোর পরে খাওয়ার জন্য প্রস্তুত হয়। 🥡 এটি সার্চ ইঞ্জিনে অ্যাপ্লিকেশনটির দৃশ্যমানতা এবং কর্মক্ষমতা বাড়ায়।

অবশেষে, ত্রুটি পরিচালনা একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। আদেশ মত notFound: সত্য নিশ্চিত করুন যে অবৈধ রুটগুলি অ্যাপ্লিকেশন ক্র্যাশ করার পরিবর্তে ব্যবহারকারীদেরকে 404 পৃষ্ঠায় পুনঃনির্দেশিত করে। এদিকে, সেটিং ক্যাশে: 'নো-ক্যাশে' API কলগুলির জন্য গ্যারান্টি দেয় যে সর্বদা সর্বশেষ ডেটা আনা হয়। এই বৈশিষ্ট্যগুলি অ্যাপ্লিকেশনটিকে শক্তিশালী এবং ব্যবহারকারী-বান্ধব করে তোলে। একটি হোটেল তালিকা আপডেট করার কল্পনা করুন কিন্তু এখনও পুরানো তথ্য দেখছেন—এটি ব্যবহারকারীদের হতাশ করবে! এই স্ক্রিপ্টগুলি এমন পরিস্থিতিতে প্রতিরোধ করে, নিশ্চিত করে যে সর্বশেষ পণ্যের বিবরণ সর্বদা প্রদর্শিত হয়।

const axios = require('axios');
const baseURL = 'https://your-backend-api.com';

async function fetchProductDetails(slug) {
  try {
    const response = await axios.get(`${baseURL}/api/product/${slug}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching product details:', error.message);
    throw new Error('Could not fetch product details');
  }
}

module.exports = fetchProductDetails;
// Unit Test Example
const fetchProductDetails = require('./fetchProductDetails');
test('Should fetch valid product details', async () => {
  const data = await fetchProductDetails('test-product');
  expect(data).toHaveProperty('name');
});

export async function getStaticPaths() {
  try {
    const res = await fetch(`${baseURL}/api/all-product`, { cache: 'no-cache' });
    const { data } = await res.json();
    const paths = data.map(product => ({
      params: { product_slug: product.slug },
    }));
    return { paths, fallback: 'blocking' };
  } catch (error) {
    console.error('Error fetching paths:', error.message);
    return { paths: [], fallback: 'blocking' };
  }
}
// Add additional error handling for 500 responses

import { dehydrate, QueryClient } from '@tanstack/react-query';
import { fetchProductDetails } from './api/fetchProductDetails';

export async function getStaticProps(context) {
  const { product_slug } = context.params;
  const queryClient = new QueryClient();
  try {
    await queryClient.prefetchQuery(['productDetails', { product_slug }], () => fetchProductDetails(product_slug));
    return {
      props: { dehydratedState: dehydrate(queryClient) },
      revalidate: 10,
    };
  } catch (error) {
    console.error('Error prefetching product data:', error.message);
    return {
      notFound: true,
    };
  }
}
// Modularized prefetching ensures maintainability

ইনক্রিমেন্টাল স্ট্যাটিক রিজেনারেশন (ISR) গভীরতায় অন্বেষণ করা

ইনক্রিমেন্টাল স্ট্যাটিক রিজেনারেশন (ISR) একটি শক্তিশালী বৈশিষ্ট্য পরবর্তী.js যা আপনাকে সম্পূর্ণ অ্যাপ্লিকেশন পুনর্নির্মাণ ছাড়াই বিদ্যমান পৃষ্ঠাগুলি আপডেট করতে দেয়৷ এই ক্ষমতাটি বড় আকারের অ্যাপগুলির জন্য অপরিহার্য, বিশেষ করে ই-কমার্স প্ল্যাটফর্ম যেখানে ডেটা ঘন ঘন পরিবর্তন হয়, যেমন পণ্য তালিকা বা মূল্য আপডেট। সেট করে পুনরায় বৈধ করা মধ্যে সম্পত্তি getStaticProps, বিকাশকারীরা নির্ধারণ করতে পারে যে পটভূমিতে একটি পৃষ্ঠা কত ঘন ঘন পুনঃউত্পাদিত হবে। কল্পনা করুন যে একটি বইয়ের দোকান প্রতিদিন নতুন শিরোনাম যোগ করছে—ISR নিশ্চিত করে যে সাইটটি সম্পূর্ণ পুনঃনিয়োগ ছাড়াই আপডেট থাকে। 📚

ISR-এর একটি গুরুত্বপূর্ণ দিক হল ফলব্যাক রাজ্যগুলিকে কার্যকরভাবে পরিচালনা করা। ব্যবহার করে fallback: 'blocking', যেমন আগের উদাহরণে দেখানো হয়েছে, নিশ্চিত করে যে নতুন বা বিরল রুটগুলি প্রথমবার অ্যাক্সেস করার সময় চাহিদা অনুযায়ী তৈরি হয়। এটি প্রাথমিক নির্মাণের সময়কে হ্রাস করে এবং হাজার হাজার পৃষ্ঠার অ্যাপ্লিকেশনগুলির জন্য বিশেষভাবে উপযোগী। একটি বাস্তব-বিশ্বের উদাহরণ হতে পারে একটি ভ্রমণ সাইট যা গতিশীলভাবে স্বল্প পরিচিত গন্তব্যগুলির জন্য পৃষ্ঠাগুলি তৈরি করে যখন ব্যবহারকারীরা তাদের অনুসন্ধান করে, সম্পদ সংরক্ষণ করে এবং দক্ষতা নিশ্চিত করে৷ ✈️

ISR এর সাথে আরেকটি চ্যালেঞ্জ হল ত্রুটি ব্যবস্থাপনা। যদি একটি ব্যাকএন্ড API ডেটা ফেরত দিতে ব্যর্থ হয়, তাহলে ISR সম্ভাব্য একটি ভাঙা পৃষ্ঠা তৈরি করতে পারে। ফাংশন যেমন সঠিক ত্রুটি হ্যান্ডলিং অন্তর্ভুক্ত করে fetch এবং ফিরে আসছে notFound: true এই ধরনের ক্ষেত্রে, বিকাশকারীরা এই দৃশ্যটি প্রতিরোধ করতে পারে। এই পদ্ধতিটি শুধুমাত্র ব্যবহারকারীর অভিজ্ঞতাকে রক্ষা করে না কিন্তু সার্চ ইঞ্জিনগুলি ভাঙা পৃষ্ঠাগুলিকে সূচীকরণের থেকে এসইও জরিমানাও এড়ায়। এই অনুশীলনগুলি কর্মক্ষমতা এবং নির্ভরযোগ্যতা বজায় রেখে আইএসআরকে অ্যাপ্লিকেশন স্কেলিং করার জন্য একটি গুরুত্বপূর্ণ হাতিয়ার করে তোলে।