E-Ticaret Uygulamalarında Yeni Ürün Eklerken Next.js 500 Hatasının Düzeltilmesi

Sorunsuz Bir E-Ticaret İş Akışı Kesildiğinde

Bir e-ticaret platformu geliştirmek, özellikle aşağıdaki gibi modern çerçeveleri entegre ederken, kendi zorluklarını da beraberinde getirir: Next.js Laravel gibi sağlam arka uçlara sahip. Beklenmeyen hatalar ortaya çıktığında hayal ettiğiniz kusursuz deneyim kesintiye uğrayabilir. 500 dahili sunucu hatası, paniğe ve kafa karışıklığına neden olabilecek kabuslardan biridir. 😟

Son zamanlarda, barındırılan bir projede tam olarak bu sorunla karşılaştım. Dijital Okyanus. Başlangıçta her şey yolunda görünüyordu; ana sayfada yeni ürünler sorunsuz bir şekilde gösteriliyordu. Ancak bir ürün detay sayfasına gitmeyi veya Bağlantı bileşenini kullanarak bir ürünün üzerine gelmeyi denediğimde, korkunç 500 hatası baş gösterdi.

Bu konuyu kafa karıştırıcı hale getiren şey tutarsızlığıydı. Yerel olarak uygulama, prodüksiyon ve sahneleme ortamlarını taklit ederken bile kusursuz bir şekilde çalıştı. Aşamalandırma dağıtımı da iyi çalıştı, ancak üretim? Başarısız olduğu yer burası. Bu gizemler geliştiricinin sabrını ve sorun giderme becerilerini test edebilir.

Bana arabamın bir yolculuk sırasında mükemmel bir şekilde çalıştıktan sonra açıklanamaz bir şekilde bozulduğu zamanı hatırlattı. Bir uygulamada hata ayıklamak gibi, yakıtı, lastikleri ve hatta tıkalı filtreler gibi belirsiz sorunları da dahil olmak üzere her şeyi kontrol edersiniz. Benzer şekilde, bu hatayı çözmek de metodik bir yaklaşım ve çok fazla deneme yanılma gerektiriyordu. 🚗💻

Çözümü Anlamak: Kodu Parçalamak

Sağlanan komut dosyaları yaygın bir sorunu ele alıyor Next.js uygulamalar: dinamik yönlendirme ve ISR (Artımlı Statik Yenileme) zorlukları. İlk komut dosyası React Query'den yararlanıyor önceden getirme sorgusu Sayfaları oluşturmadan önce verileri alma ve önbelleğe alma yöntemi. Bu, kullanıcı ürün detay sayfasına gittiğinde ürün detaylarının mevcut olmasını sağlayarak çalışma zamanı getirme gecikmelerini önler. Sırada beklememek için sinema bileti ön siparişi vermek gibi bir şey bu. 🎟️ Bu proaktif getirme, sayfa yükleme sürelerini azaltır ve kullanıcı deneyimini iyileştirir.

İkinci senaryoda, getStaticPaths işlevi, arka uç API'sini kullanarak ürünler için dinamik olarak rotalar oluşturur. Belirterek geri dönüş: 'engelleme', yeni ürünlerin ilk kez erişildiğinde talep üzerine sunulmasını sağlar. Bu yöntem, binlerce ürüne sahip e-ticaret platformları için çok önemlidir çünkü derleme süresi boyunca olası tüm sayfaların önceden oluşturulmasını önler. Bunu, mutfağınızı önceden her türlü lezzetle doldurmak yerine, yalnızca birisi sipariş ettiğinde kurabiye pişirmek olarak düşünün. 🍪

Üçüncü betiğin entegrasyonu suyunu kurutmak içinde getStaticProps sunucu tarafı verilerinin serileştirilmiş bir durum olarak ön uca aktarılmasına olanak tanır. Bu, ISR aracılığıyla oluşturulan sayfaların arama motorlarının taraması için gerekli meta verileri hâlâ içermesini sağladığından SEO için özellikle faydalıdır. Bu, evde bir yemek hazırlayıp, çekici görünmesi ve varışta yemeye hazır olması için onu teslimat için mükemmel bir şekilde paketlemeye benzer. 🥡Bu, uygulamanın arama motorlarındaki görünürlüğünü ve performansını artırır.

Son olarak, hata yönetimi kritik bir rol oynar. Gibi komutlar Bulunamadı: doğru geçersiz yönlendirmelerin, uygulamayı kilitlemek yerine kullanıcıları zarif bir şekilde 404 sayfasına yönlendirmesini sağlayın. Bu arada ayar önbellek: 'önbellek yok' API çağrıları için her zaman en son verilerin getirileceğini garanti eder. Bu özellikler uygulamayı sağlam ve kullanıcı dostu hale getirir. Bir otel girişini güncellediğiniz halde hâlâ güncel olmayan bilgiler gördüğünüzü hayal edin; bu, kullanıcıları hayal kırıklığına uğratır! Bu komut dosyaları bu tür senaryoları önleyerek en son ürün ayrıntılarının her zaman görüntülenmesini sağlar.

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

Artımlı Statik Yenilemeyi (ISR) Derinlemesine Keşfetmek

Artımlı Statik Yenileme (ISR), güçlü bir özelliktir. Next.js bu, uygulamanın tamamını yeniden oluşturmanıza gerek kalmadan mevcut sayfaları güncellemenize olanak tanır. Bu yetenek, büyük ölçekli uygulamalar için, özellikle de ürün listeleme veya fiyat güncellemeleri gibi verilerin sık sık değiştiği e-ticaret platformları için gereklidir. Ayarlayarak yeniden doğrulamak mülkiyet getStaticPropsgeliştiriciler bir sayfanın arka planda ne sıklıkla yeniden oluşturulduğunu belirleyebilir. Her gün yeni kitaplar ekleyen bir kitapçı düşünün; ISR, sitenin tamamen yeniden dağıtılmadan güncel kalmasını sağlar. 📚

ISR'nin önemli yönlerinden biri, geri dönüş durumlarını etkili bir şekilde ele almaktır. Kullanma fallback: 'blocking'Önceki örnekte gösterildiği gibi, ilk kez erişildiğinde yeni veya nadir rotaların isteğe bağlı olarak oluşturulmasını sağlar. Bu, ilk oluşturma süresini azaltır ve özellikle binlerce sayfalık uygulamalar için kullanışlıdır. Gerçek dünyadan bir örnek, bir seyahat sitesinin, yalnızca kullanıcılar aradığında daha az bilinen destinasyonlar için dinamik olarak sayfalar oluşturması, kaynaklardan tasarruf etmesi ve verimliliği sağlaması olabilir. ✈️

ISR ile ilgili bir diğer zorluk ise hata yönetimidir. Bir arka uç API'si veri döndüremezse ISR potansiyel olarak bozuk bir sayfa oluşturabilir. Gibi işlevlere uygun hata işlemeyi dahil ederek fetch ve geri dönüyorum notFound: true bu gibi durumlarda geliştiriciler bu senaryoyu engelleyebilir. Bu yaklaşım yalnızca kullanıcı deneyimini korumakla kalmaz, aynı zamanda arama motorlarının bozuk sayfaları dizine eklemesinden kaynaklanan SEO cezalarını da önler. Bu uygulamalar ISR'yi performansı ve güvenilirliği korurken uygulamaları ölçeklendirmek için hayati bir araç haline getirir.