Details zu API-Routen

Hier sind einige wesentliche Informationen, die Sie über API-Routen wissen sollten.

API-Routen nicht aus getStaticProps oder getStaticPaths abfragen

Sie sollten nicht eine API-Route aus getStaticProps oder getStaticPaths abfragen. Schreiben Sie Ihren serverseitigen Code stattdessen direkt in getStaticProps oder getStaticPaths (oder rufen Sie eine Hilfsfunktion auf).

Hier ist der Grund: getStaticProps und getStaticPaths laufen nur serverseitig und niemals clientseitig. Darüber hinaus werden diese Funktionen nicht in das JS-Bundle für den Browser aufgenommen. Das bedeutet, Sie können Code wie direkte Datenbankabfragen schreiben, ohne ihn an Browser zu senden. Lesen Sie die Dokumentation Serverseitigen Code schreiben, um mehr zu erfahren.

Ein guter Anwendungsfall: Formulareingaben verarbeiten

Ein guter Anwendungsfall für API-Routen ist die Verarbeitung von Formulareingaben. Sie können beispielsweise ein Formular auf Ihrer Seite erstellen und es eine POST-Anfrage an Ihre API-Route senden lassen. Dann können Sie Code schreiben, um die Daten direkt in Ihrer Datenbank zu speichern. Der API-Routen-Code wird nicht Teil Ihres Client-Bundles sein, sodass Sie sicher serverseitigen Code schreiben können.

export default function handler(req, res) {
  const email = req.body.email;
  // Dann E-Mail in Ihrer Datenbank speichern usw...
}

Vorschaumodus

Statische Generierung ist nützlich, wenn Ihre Seiten Daten von einem Headless-CMS abrufen. Sie ist jedoch nicht ideal, wenn Sie einen Entwurf in Ihrem Headless-CMS schreiben und ihn sofort auf Ihrer Seite vorschauen möchten. In diesem Fall möchten Sie, dass Next.js diese Seiten zur Laufzeit statt zur Build-Zeit rendert und den Entwurfsinhalt statt des veröffentlichten Inhalts abruft. Sie möchten, dass Next.js die Statische Generierung nur für diesen speziellen Fall umgeht.

Next.js hat eine Funktion namens Vorschaumodus, um das obige Problem zu lösen, und nutzt dabei API-Routen. Um mehr darüber zu erfahren, lesen Sie unsere Dokumentation zum Vorschaumodus.

Dynamische API-Routen

API-Routen können dynamisch sein, genau wie reguläre Seiten. Werfen Sie einen Blick in unsere Dokumentation zu Dynamischen API-Routen, um mehr zu erfahren.

Das war's!

In der nächsten und letzten grundlegenden Lektion sprechen wir darüber, wie Sie Ihre Next.js-App in der Produktion bereitstellen können.