نئی مصنوعات شامل کرتے وقت ای کامرس ایپس میں Next.js 500 کی خرابی کو دور کرنا

جب ہموار ای کامرس ورک فلو ٹوٹ جاتا ہے۔

ایک ای کامرس پلیٹ فارم تیار کرنا اپنے چیلنجوں کا ایک مجموعہ لاتا ہے، خاص طور پر جب جدید فریم ورک کو مربوط کرنا جیسے Next.js Laravel جیسے مضبوط بیک اینڈ کے ساتھ۔ غیر متوقع طور پر غلطیاں پیدا ہونے پر آپ جس ہموار تجربے کا تصور کرتے ہیں اس میں خلل پڑ سکتا ہے۔ 500 اندرونی سرور کی خرابی ایک ایسا ہی ڈراؤنا خواب ہے جو گھبراہٹ اور الجھن کا سبب بن سکتا ہے۔ 😟

حال ہی میں، میں نے میزبانی کے ایک پروجیکٹ میں اس عین مسئلے کا سامنا کیا۔ ڈیجیٹل سمندر. شروع میں سب کچھ ٹھیک لگ رہا تھا — ہوم پیج نے بغیر کسی ہچکی کے نئی مصنوعات دکھائیں۔ لیکن جس لمحے میں نے پروڈکٹ کے تفصیل والے صفحے پر جانے کی کوشش کی یا لنک جزو کا استعمال کرتے ہوئے کسی پروڈکٹ پر منڈلانے کی کوشش کی، خوفناک 500 کی خرابی نے سر اٹھایا۔

جس چیز نے اس مسئلے کو الجھا دیا وہ اس کی عدم مطابقت تھی۔ مقامی طور پر، ایپ نے بے عیب طریقے سے کام کیا، یہاں تک کہ جب پروڈکشن اور اسٹیجنگ ماحول کی نقل کی جائے۔ اسٹیجنگ تعیناتی نے بھی ٹھیک کام کیا، لیکن پیداوار؟ یہ وہ جگہ ہے جہاں یہ ناکام ہوا۔ یہ اسرار ڈویلپر کے صبر اور دشواری کا سراغ لگانے کی مہارت کو جانچ سکتے ہیں۔

اس نے مجھے اس وقت کی یاد دلا دی جب سڑک کے سفر کے دوران میری کار مکمل طور پر چلانے کے بعد ناقابل فہم طور پر ٹوٹ گئی۔ کسی ایپ کو ڈیبگ کرنے کی طرح، آپ ہر چیز کو چیک کرتے ہیں—ایندھن، ٹائر، اور یہاں تک کہ مبہم مسائل جیسے بند فلٹرز۔ اسی طرح، اس غلطی کو حل کرنے کے لئے ایک طریقہ کار اور بہت زیادہ آزمائش اور غلطی کا مطالبہ کیا گیا تھا. 🚗💻

حل کو سمجھنا: کوڈ کو توڑنا

فراہم کردہ اسکرپٹس میں ایک عام مسئلہ کو حل کیا گیا ہے۔ Next.js ایپلی کیشنز: متحرک روٹنگ اور ISR (بڑھتی ہوئی جامد تخلیق نو) چیلنجز۔ پہلا اسکرپٹ React Query's کا فائدہ اٹھاتا ہے۔ prefetchQuery صفحات پیش کرنے سے پہلے ڈیٹا کو بازیافت اور کیش کرنے کا طریقہ۔ یہ یقینی بناتا ہے کہ پروڈکٹ کی تفصیلات دستیاب ہوں جب صارف پروڈکٹ کی تفصیلات کے صفحہ پر جاتا ہے، رن ٹائم بازیافت میں تاخیر کو روکتا ہے۔ یہ لائن میں انتظار کرنے سے بچنے کے لیے فلم کا ٹکٹ پہلے سے آرڈر کرنے جیسا ہے۔ 🎟️ یہ فعال بازیافت صفحہ لوڈ کرنے کے اوقات کو کم کرتی ہے اور صارف کے تجربے کو بہتر بناتی ہے۔

دوسرے اسکرپٹ میں، حاصل StaticPaths فنکشن بیک اینڈ API کا استعمال کرتے ہوئے مصنوعات کے لیے متحرک طور پر راستے تیار کرتا ہے۔ بیان کر کے فال بیک: 'مسدود کرنا'، یہ یقینی بناتا ہے کہ پہلی بار رسائی حاصل کرنے پر نئی مصنوعات کو آن ڈیمانڈ پیش کیا جائے۔ یہ طریقہ ہزاروں پروڈکٹس والے ای کامرس پلیٹ فارمز کے لیے بہت اہم ہے، کیونکہ یہ تعمیراتی وقت کے دوران تمام ممکنہ صفحات کو پہلے سے پیش کرنے سے گریز کرتا ہے۔ اسے صرف بیکنگ کوکیز کے طور پر سوچیں جب کوئی آپ کے باورچی خانے کو پہلے سے ہر ذائقہ سے بھرنے کے بجائے ان کا آرڈر دیتا ہے۔ 🍪

تیسرے اسکرپٹ کا انضمام پانی کی کمی میں getStaticProps سرور سائیڈ ڈیٹا کو سیریلائزڈ حالت کے طور پر فرنٹ اینڈ پر منتقل کرنے کی اجازت دیتا ہے۔ یہ خاص طور پر SEO کے لیے مفید ہے، کیونکہ یہ یقینی بناتا ہے کہ ISR کے ذریعے پیش کیے گئے صفحات میں ابھی بھی سرچ انجنوں کو کرال کرنے کے لیے ضروری میٹا ڈیٹا موجود ہے۔ یہ گھر پر ڈش تیار کرنے اور ڈیلیوری کے لیے اسے مکمل طور پر پیک کرنے کے مترادف ہے تاکہ یہ دلکش نظر آئے اور پہنچنے پر کھانے کے لیے تیار ہو۔ 🥡 یہ سرچ انجنوں میں ایپلیکیشن کی مرئیت اور کارکردگی کو بڑھاتا ہے۔

آخر میں، غلطی کو سنبھالنا ایک اہم کردار ادا کرتا ہے۔ جیسے احکامات notFound : سچ اس بات کو یقینی بنائیں کہ غلط راستے صارفین کو ایپلی کیشن کو کریش کرنے کے بجائے 404 صفحہ پر ری ڈائریکٹ کریں۔ دریں اثنا، ترتیب cache: 'no-cache' 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) کو گہرائی میں تلاش کرنا

Incremental Static Regeneration (ISR) ایک طاقتور خصوصیت ہے۔ Next.js جو آپ کو پوری ایپلیکیشن کو دوبارہ بنائے بغیر موجودہ صفحات کو اپ ڈیٹ کرنے کی اجازت دیتا ہے۔ یہ صلاحیت بڑے پیمانے پر ایپس کے لیے ضروری ہے، خاص طور پر ای کامرس پلیٹ فارمز جہاں ڈیٹا بار بار تبدیل ہوتا رہتا ہے، جیسے کہ پروڈکٹ کی فہرستیں یا قیمتوں کی تازہ کاری۔ ترتیب دے کر دوبارہ تصدیق کرنا میں جائیداد getStaticProps، ڈویلپر اس بات کا تعین کر سکتے ہیں کہ پس منظر میں صفحہ کو کتنی بار دوبارہ بنایا جاتا ہے۔ تصور کریں کہ ایک بک اسٹور روزانہ نئے عنوانات شامل کرتا ہے—ISR یقینی بناتا ہے کہ سائٹ مکمل طور پر دوبارہ تعیناتی کے بغیر اپ ڈیٹ رہے۔ 📚

ISR کا ایک اہم پہلو فال بیک ریاستوں کو مؤثر طریقے سے سنبھالنا ہے۔ استعمال کرنا fallback: 'blocking'جیسا کہ پہلی مثال میں دکھایا گیا ہے، اس بات کو یقینی بناتا ہے کہ جب پہلی بار رسائی حاصل کی جائے تو نئے یا نایاب راستے آن ڈیمانڈ بنائے جاتے ہیں۔ یہ ابتدائی تعمیراتی وقت کو کم کرتا ہے اور خاص طور پر ہزاروں صفحات والی ایپلیکیشنز کے لیے مفید ہے۔ ایک حقیقی دنیا کی مثال ایک ٹریول سائٹ ہو سکتی ہے جو متحرک طور پر غیر معروف مقامات کے لیے صفحات تخلیق کرتی ہے جب صارفین انہیں تلاش کرتے ہیں، وسائل کی بچت کرتے ہیں اور کارکردگی کو یقینی بناتے ہیں۔ ✈️

ISR کے ساتھ ایک اور چیلنج غلطی کا انتظام ہے۔ اگر بیک اینڈ API ڈیٹا واپس کرنے میں ناکام ہو جاتا ہے، تو ISR ممکنہ طور پر ٹوٹا ہوا صفحہ بنا سکتا ہے۔ جیسے افعال میں مناسب غلطی سے نمٹنے کو شامل کرکے fetch اور واپسی notFound: true ایسے معاملات میں، ڈویلپر اس منظر نامے کو روک سکتے ہیں۔ یہ نقطہ نظر نہ صرف صارف کے تجربے کی حفاظت کرتا ہے بلکہ ٹوٹے ہوئے صفحات کو ترتیب دینے والے سرچ انجنوں سے SEO کے جرمانے سے بھی بچتا ہے۔ یہ طرز عمل ISR کو کارکردگی اور وشوسنییتا کو برقرار رکھتے ہوئے ایپلی کیشنز کو اسکیلنگ کرنے کے لیے ایک اہم ٹول بناتے ہیں۔