Vorbei sind die Zeiten, in denen Sie ein separates Backend für Ihre Website erstellen mussten. Mit dem dateibasierten API-Routing von Next.js können Sie sich das Leben erleichtern, indem Sie Ihre API in ein Next.js-Projekt schreiben.
Next.js ist ein React-Meta-Framework mit Funktionen, die den Prozess der Erstellung produktionsbereiter Web-Apps vereinfachen. Sie werden sehen, wie Sie eine REST-API in Next.js erstellen und die Daten dieser API auf einer Next.js-Seite verwenden.
Erstellen Sie ein Next.js-Projekt mit create-next-app
Sie können ein neues Next.js-Projekt mit dem CLI-Tool create-next-app erstellen. Es installiert die erforderlichen Pakete und Dateien, damit Sie mit dem Erstellen einer Next.js-Anwendung beginnen können.
Führen Sie diesen Befehl in einem Terminal aus, um einen neuen Next.js-Ordner namens api-routes zu erstellen. Möglicherweise erhalten Sie eine Aufforderung, create-next-app zu installieren.
npx erstellen-nächste-app API-Routen
Wenn der Befehl abgeschlossen ist, öffnen Sie den Ordner api-routes, um mit dem Erstellen der API-Routen zu beginnen.
API-Routing in Next.js
API-Routen werden auf dem Server ausgeführt und haben viele Verwendungszwecke, z. B. das Speichern von Benutzerdaten in einer Datenbank oder das Abrufen von Daten von einer API, ohne die zu erhöhen CORS-Richtlinienfehler.
In Next.js müssen Sie API-Routen im Ordner /pages/api erstellen. Next.js generiert API-Endpunkte für jede der Dateien in diesem Ordner. Wenn Sie user.js zu /pages/api hinzufügen, erstellt Next.js einen Endpunkt unter http://localhost: 3000/API/Benutzer.
Eine grundlegende Next.js-API-Route hat die folgende Syntax.
ExportStandardFunktionHandler(erforderlich, res) {
res.status (200).json({ name: 'John Doe' })
}
Sie müssen die Handler-Funktion exportieren, damit sie funktioniert.
Erstellen von API-Routen
Erstellen Sie eine neue Datei mit dem Namen todo.js in der /pages/api Ordner, um eine API-Route für Aufgaben hinzuzufügen.
Verspotten der Todo-Datenbank
Um die Todos abzurufen, müssen Sie einen GET-Endpunkt erstellen. Der Einfachheit halber. Dieses Tutorial verwendet eine Reihe von Todo-Elementen anstelle einer Datenbank, aber Sie können gerne eine Datenbank wie MongoDB oder MySQL verwenden.
Erstellen Sie die todo-Elemente in todo.js im Stammordner Ihrer Anwendung und fügen Sie dann die folgenden Daten hinzu.
Exportkonst todos = [
{
ID: 1,
machen: "Tu etwas Nettes für jemanden, der mir wichtig ist",
vollendet: WAHR,
Benutzer-ID: 26,
},
{
ID: 2,
machen: "Merken Sie sich die fünfzig Bundesstaaten und ihre Hauptstädte",
vollendet: FALSCH,
Benutzer-ID: 48,
},
// andere Aufgaben
];
Diese ToDo-Elemente stammen von der DummyJSON-Website, a REST-API für Scheindaten. Die genauen Daten können Sie diesem entnehmen DummyJSON Todos-Endpunkt.
Erstellen Sie als Nächstes die API-Route in /pages/api/todos.js und fügen Sie die Handler-Funktion hinzu.
importieren {todos} aus "../../machen";ExportFunktionHandler(erforderlich, res) {
konst { Methode } = req;
schalten (Methode) {
Fall "ERHALTEN":
res.Status(200).json(todos);
brechen;
Fall "POST":
konst {todo, abgeschlossen} = req.body;
todos.drücken({
Ausweis: todos.Länge + 1,
machen,
vollendet,
});
res.Status(200).json(todos);
brechen;
Standard:
res.setHeader("Erlauben", ["ERHALTEN", "POST"]);
res.status(405).Ende(„Methode ${Methode} Nicht erlaubt“.);
brechen;
}
}
Diese Route verarbeitet die GET- und POST-Endpunkte. Es gibt alle Todos für die GET-Anforderung zurück und fügt der Todo-Datenbank für eine POST-Anforderung ein Todo-Element hinzu. Bei anderen Methoden gibt der Handler einen Fehler zurück.
Konsumieren von API-Routen im Frontend
Sie haben einen API-Endpunkt erstellt, der ein JSON-Objekt zurückgibt, das ein Array von Aufgaben enthält.
Um die API zu nutzen, erstellen Sie eine Funktion namens fetchTodos, die Daten vom API-Endpunkt abruft. Die Funktion verwendet die Fetch-Methode, aber Sie können auch Verwenden Sie Axios, um API-Anforderungen zu stellen. Rufen Sie diese Funktion dann auf, wenn Sie auf eine Schaltfläche klicken.
importieren Kopf aus "nächster/Kopf";
importieren { useState } aus "reagieren";ExportStandardFunktionHeim() {
konst [todos, settodos] = useState([]);konst fetchTodos = asynchron () => {
konst Antwort = erwarten bringen("/api/Tod");
konst Daten = erwarten Antwort.json();
settodos (Daten);
};
zurückkehren (
<div className={styles.container}>
<Kopf>
<Titel>Nächste App erstellen</title>
<metaname="Beschreibung" Inhalt="Generiert von Create Next App" />
<link rel="Symbol" href="/favicon.ico" />
</Head>
<hauptsächlich>
<Schaltfläche onClick={fetchTodos}>Todos erhalten</button>
<Ul>
{todos.map((todo) => {
zurückkehren (
<li
style={{ color: `${todo.completed? "Grün": "Rot"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Die Liste in diesem Snippet zeigt die Todo-Elemente an, wenn sie abgerufen werden.
Erstellen Sie für den POST-Endpunkt eine neue Funktion namens saveTodo, die eine POST-Anforderung an die API sendet. Die Abrufanforderung speichert das neue Todo-Element im Hauptteil und gibt alle Todo-Elemente einschließlich des neuen zurück. Die saveTodo-Funktion speichert sie dann im todos-Zustand.
konst saveTodo = asynchron () => {
konst Antwort = erwarten bringen("/api/todos", {
Methode: "POST",
Körper: JSON.stringify (newTodo),
Überschriften: {
"Inhaltstyp": "Anwendung/json",
},
});
konst Daten = erwarten Antwort.json();
settodos (Daten);
};
Erstellen Sie dann ein Formular mit einer Texteingabeleiste, um das neue Aufgabenelement zu erhalten. Die Submit-Handler-Funktion dieses Formulars ruft die saveTodo-Funktion auf.
importieren Kopf aus "nächster/Kopf";
importieren { useReducer, useState } aus "reagieren";
importieren Stile aus "../styles/Home.module.css";ExportStandardFunktionHeim() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
machen: "",
vollendet: FALSCH,
});konst fetchTodos = asynchron () => {
// Todos abrufen
};
konst saveTodo = asynchron (e) => {
konst Antwort = erwarten bringen("/api/todos", {
Methode: "POST",
Körper: JSON.stringify (newTodo),
Überschriften: {
"Inhaltstyp": "Anwendung/json",
},
});konst Daten = erwarten Antwort.json();
settodos (Daten);
};konst handleChange = (e) => {
setnewTodo({
machen: e.Ziel.Wert,
});
};konst handleSubmit = (e) => {
e.Standard verhindern();
saveTodo();
setnewTodo({
machen: '',
});
};zurückkehren (
<div className={styles.container}>
<Kopf>
<Titel>Nächste App erstellen</title>
<metaname="Beschreibung" Inhalt="Generiert von Create Next App" />
<link rel="Symbol" href="/favicon.ico" />
</Head>
<hauptsächlich>
// Ruft die Todo-Elemente ab, wenn darauf geklickt wird
<Schaltfläche onClick={fetchTodos}>Todos erhalten</button>
// Speichert ein neues Aufgabenelement, wenn es gesendet wird
<form onSubmit={handleSubmit}>
<Eingabetyp="Text" onChange={handleChange} value={newTodo.todo} />
</form>
<Ul>
{// Aufgabenliste auflisten}
</ul>
</main>
</div>
);
}
Der Handler fügt der Datenbank jedes Mal, wenn ein Benutzer das Formular absendet, eine neue Aufgabe hinzu. Außerdem aktualisiert diese Funktion den todos-Wert unter Verwendung der von der API empfangenen Daten, die wiederum das neue Todo-Element zur Liste hinzufügen.
API-Routing ist nur eine der Stärken von Next.js
Sie haben gesehen, wie Sie eine Next.js-API-Route erstellen und verwenden. Jetzt können Sie eine Full-Stack-Anwendung erstellen, ohne Ihren Next.js-Projektordner verlassen zu müssen. API-Routing ist einer der vielen Vorteile, die Next.js bietet.
Next.js bietet auch Leistungsoptimierungen wie Code-Splitting, verzögertes Laden und integrierte CSS-Unterstützung. Wenn Sie eine Website erstellen, die schnell und SEO-freundlich sein muss, sollten Sie Next.js in Betracht ziehen.