Naprawa błędu Next.js 500 w aplikacjach e-commerce podczas dodawania nowych produktów

Kiedy płynny przepływ pracy w handlu elektronicznym zostaje przerwany

Rozwój platformy e-commerce niesie ze sobą szereg wyzwań, szczególnie w przypadku integracji nowoczesnych platform, takich jak Następny.js z solidnymi backendami, takimi jak Laravel. Bezproblemowe działanie, jakie sobie wyobrażasz, może zostać zakłócone, gdy pojawią się nieoczekiwane błędy. Wewnętrzny błąd serwera 500 to jeden z takich koszmarów, który może wywołać panikę i zamieszanie. 😟

Niedawno spotkałem się z tym dokładnie problemem w projekcie hostowanym na Cyfrowy ocean. Początkowo wszystko wydawało się w porządku – strona główna wyświetlała nowe produkty bez żadnych problemów. Ale w chwili, gdy próbowałem przejść do strony ze szczegółami produktu lub najechać kursorem na produkt za pomocą komponentu Link, pojawił się przerażający błąd 500.

To, co wprawiło tę kwestię w zagadkę, to jej niespójność. Lokalnie aplikacja działała bez zarzutu, nawet naśladując środowiska produkcyjne i testowe. Wdrożenie etapowe również działało dobrze, ale produkcyjne? To właśnie tam się nie udało. Te tajemnice mogą wystawić na próbę cierpliwość programisty i umiejętności rozwiązywania problemów.

Przypomniało mi to czas, kiedy mój samochód w niewytłumaczalny sposób zepsuł się po tym, jak działał idealnie podczas podróży. Podobnie jak debugowanie aplikacji, sprawdzasz wszystko – paliwo, opony, a nawet niejasne problemy, takie jak zatkane filtry. Podobnie rozwiązanie tego błędu wymagało metodycznego podejścia i wielu prób i błędów. 🚗💻

Zrozumienie rozwiązania: rozbicie kodu

Dostarczone skrypty rozwiązują typowy problem w Następny.js zastosowania: routing dynamiczny i wyzwania związane z ISR (przyrostową regeneracją statyczną). Pierwszy skrypt wykorzystuje funkcję React Query zapytanie o wstępne pobranie metoda pobierania i buforowania danych przed renderowaniem stron. Dzięki temu szczegóły produktu będą dostępne, gdy użytkownik przejdzie do strony szczegółów produktu, co zapobiega opóźnieniom w pobieraniu w czasie wykonywania. To jak zamówić bilet do kina w przedsprzedaży, żeby uniknąć czekania w kolejce. 🎟️ To proaktywne pobieranie skraca czas ładowania strony i poprawia wygodę użytkownika.

W drugim skrypcie, getStaticPaths funkcja dynamicznie generuje trasy dla produktów przy użyciu backendowego API. Określając odpowiedź zastępcza: „blokowanie”gwarantuje, że nowe produkty będą dostępne na żądanie przy pierwszym uruchomieniu. Ta metoda ma kluczowe znaczenie w przypadku platform e-commerce z tysiącami produktów, ponieważ pozwala uniknąć wstępnego renderowania wszystkich możliwych stron w czasie kompilacji. Pomyśl o tym jak o pieczeniu ciasteczek, gdy ktoś je zamówi, zamiast wcześniej wypełniać kuchnię wszystkimi smakami. 🍪

Integracja trzeciego skryptu odwodnić W pobierzStaticProps umożliwia przesyłanie danych po stronie serwera do frontonu w postaci stanu serializowanego. Jest to szczególnie przydatne w przypadku SEO, ponieważ gwarantuje, że strony renderowane przez ISR nadal zawierają metadane niezbędne do indeksowania wyszukiwarek. To jak przygotowanie dania w domu i idealne zapakowanie go do dostawy, tak aby wyglądało atrakcyjnie i było gotowe do spożycia po przybyciu. 🥡 Poprawia to widoczność i wydajność aplikacji w wyszukiwarkach.

Wreszcie obsługa błędów odgrywa kluczową rolę. Polecenia takie jak nie znaleziono: prawda upewnij się, że nieprawidłowe trasy bezpiecznie przekierowują użytkowników na stronę 404, zamiast powodować awarię aplikacji. Tymczasem ustawienie pamięć podręczna: „bez pamięci podręcznej” dla wywołań API gwarantuje, że zawsze zostaną pobrane najnowsze dane. Dzięki tym funkcjom aplikacja jest solidna i przyjazna dla użytkownika. Wyobraź sobie, że aktualizujesz ogłoszenie o hotelu, ale nadal widzisz nieaktualne informacje – byłoby to frustrujące dla użytkowników! Skrypty te zapobiegają takim scenariuszom, zapewniając, że zawsze wyświetlane są najnowsze szczegóły produktu.

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

Głębokie badanie przyrostowej regeneracji statycznej (ISR).

Przyrostowa regeneracja statyczna (ISR) to potężna funkcja w Następny.js co pozwala na aktualizację istniejących stron bez konieczności przebudowywania całej aplikacji. Ta funkcja jest niezbędna w przypadku aplikacji działających na dużą skalę, zwłaszcza platform handlu elektronicznego, w których dane często się zmieniają, np. listy produktów lub aktualizacje cen. Ustawiając ponownie potwierdzić nieruchomość w getStaticProps, programiści mogą określić, jak często strona jest ponownie generowana w tle. Wyobraź sobie księgarnię, która codziennie dodaje nowe tytuły — ISR gwarantuje, że witryna będzie aktualizowana bez konieczności pełnego ponownego wdrażania. 📚

Jednym z kluczowych aspektów ISR jest skuteczne radzenie sobie ze stanami awaryjnymi. Używanie fallback: 'blocking', jak pokazano we wcześniejszym przykładzie, zapewnia wygenerowanie nowych lub rzadkich tras na żądanie przy pierwszym dostępie. Skraca to początkowy czas kompilacji i jest szczególnie przydatne w przypadku aplikacji zawierających tysiące stron. Przykładem z życia wziętego może być witryna turystyczna, która dynamicznie tworzy strony dotyczące mniej znanych miejsc docelowych tylko wtedy, gdy użytkownicy ich szukają, oszczędzając zasoby i zapewniając wydajność. ✈️

Kolejnym wyzwaniem związanym z ISR jest zarządzanie błędami. Jeśli interfejs API zaplecza nie zwróci danych, ISR może potencjalnie wygenerować uszkodzoną stronę. Włączając odpowiednią obsługę błędów w funkcjach takich jak fetch i powrót notFound: true w takich przypadkach programiści mogą zapobiec temu scenariuszowi. Takie podejście nie tylko chroni wygodę użytkownika, ale także pozwala uniknąć kar SEO ze strony wyszukiwarek indeksujących uszkodzone strony. Praktyki te sprawiają, że ISR jest niezbędnym narzędziem do skalowania aplikacji przy jednoczesnym zachowaniu wydajności i niezawodności.