Warum erhalte ich Abruffehler, wenn ich in der Produktion eine statische Next.js-Website erstelle?

Fehler beim Generieren einer statischen Website für Next.js in der Produktion

Next.js-Benutzer können beim Erstellen einer statischen Website für die Produktion auf Abruffehler stoßen (npm run build) trotz eines funktionierenden Entwicklungs-Setups (npm run dev). Dieses Problem tritt auf, wenn Daten von API-Routen innerhalb von getStaticProps- oder getStaticPath-Funktionen abgerufen werden.

Ursache

Next.js erstellt statische Websites, indem es Seiten und Daten vorab rendert Server, bevor Sie sie in einer Hosting-Umgebung bereitstellen. Allerdings sind API-Routen, die normalerweise für den dynamischen Datenabruf verwendet werden, während des Build-Prozesses nicht verfügbar, da der Server noch nicht aktiv ist.

Lösung

Zu lösen Um dieses Problem zu lösen, vermeiden Sie den Zugriff auf interne API-Routen über die Funktionen getStaticProps/getStaticPath. Diese Funktionen werden ausschließlich auf der Serverseite ausgeführt und sollten nicht auf externe Netzwerkanforderungen angewiesen sein.

Empfohlener Ansatz

Betten Sie stattdessen serverseitigen Code direkt in getStaticProps/getStaticPath ein um Daten aus der Datenquelle abzurufen. Da diese Funktionen auf dem Server ausgeführt werden, ist der Zugriff auf Datenbanken oder die Durchführung serverseitiger Vorgänge zulässig.

Beispiel-Refactoring

In Ihrem bereitgestellten Code finden Sie die geänderten getStaticProps und getStaticPaths-Funktionen unten:

export const getStaticProps = async ({ params: { slug }, locale }) => {
    const result = db.filter(item => item.slug === slug)
    const data = result.filter(item => item.locale === locale)[0]
    const { title, keywords, description } = data
    return {
        props: {
            data,
            description,
            keywords, 
            title
        }
    }
}

export const getStaticPaths = async () => {
    const paths = db.map(({ slug, locale }) => ({ params: { slug: slug }, locale }))
    return {
        fallback: true,
        paths,
    }
}

Durch die Implementierung dieser Änderungen können Sie die dabei auftretenden Abruffehler beseitigen Produktionsaufbauten.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich Abruffehler, wenn ich in der Produktion eine statische Next.js-Website erstelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!