De dage, hvor du skulle oprette en separat backend til din hjemmeside, er forbi. Med Next.js filbaseret API-routing kan du gøre dit liv lettere ved at skrive din API inde i et Next.js-projekt.
Next.js er et React-meta-framework med funktioner, der forenkler processen med at bygge produktionsklare webapps. Du vil se, hvordan du bygger en REST API i Next.js og bruger dataene fra denne API på en Next.js-side.
Opret et Next.js-projekt ved hjælp af create-next-app
Du kan oprette et nyt Next.js-projekt ved hjælp af CLI-værktøjet create-next-app. Den installerer de nødvendige pakker og filer for at komme i gang med at bygge en Next.js-applikation.
Kør denne kommando i en terminal for at oprette en ny Next.js-mappe kaldet api-routes. Du modtager muligvis en prompt om at installere create-next-app.
npx skab-Næste-app api-ruter
Når kommandoen er færdig, skal du åbne mappen api-routes for at begynde at oprette API-ruterne.
API-routing i Next.js
API-ruter kører på serveren og har mange anvendelsesmuligheder som at gemme brugerdata til en database eller hente data fra en API uden at hæve
CORS politik fejl.I Next.js skal du oprette API-ruter inde i /pages/api-mappen. Next.js genererer API-slutpunkter for hver af filerne i denne mappe. Hvis du tilføjer user.js til /pages/api, vil Next.js oprette et slutpunkt på http://localhost: 3000/api/bruger.
En grundlæggende Next.js API-rute har følgende syntaks.
eksportStandardfungerehandler(kræve, res) {
res.status (200).json({ navn: 'John Doe' })
}
Du skal eksportere handlerfunktionen for at den kan fungere.
Oprettelse af API-ruter
Opret en ny fil kaldet todo.js i /pages/api mappe for at tilføje en API-rute for todo-emner.
Håner Todo-databasen
For at få opgaverne skal du oprette et GET-slutpunkt. For nemheds skyld. Denne tutorial bruger en række todo-elementer i stedet for en database, men du er velkommen til at bruge en database som MongoDB eller MySQL.
Opret opgaveelementerne i todo.js i rodmappen på din applikation, og tilføj derefter følgende data.
eksportkonst gøremål = [
{
id: 1,
at gøre: "Gør noget godt for en jeg holder af",
afsluttet: rigtigt,
bruger-id: 26,
},
{
id: 2,
at gøre: "Lær de halvtreds stater og deres hovedstæder udenad",
afsluttet: falsk,
bruger-id: 48,
},
// andre gøremål
];
Disse gøremål er fra DummyJSON-webstedet, en REST API for falske data. Du kan finde de nøjagtige data fra dette DummyJSON todos-endepunkt.
Opret derefter API-ruten i /pages/api/todos.js og tilføje handler-funktionen.
importere { gøremål } fra "../../at gøre";eksportfungerehandler(kræve, res) {
konst { metode } = req;
kontakt (metode) {
sag "FÅ":
res.status(200).json(todos);
pause;
sag "STOLPE":
konst { todo, completed } = req.body;
todos.skubbe({
id: todos.længde + 1,
at gøre,
afsluttet,
});
res.status(200).json(todos);
pause;
Standard:
res.setHeader("Give lov til", ["FÅ", "STOLPE"]);
res.status(405).ende(`Metode ${metode} Ikke tilladt`);
pause;
}
}
Denne rute håndterer GET- og POST-slutpunkterne. Det returnerer alle gøremålene for GET-anmodningen og tilføjer et gøremålselement til opgavedatabasen for en POST-anmodning. For andre metoder returnerer handleren en fejl.
Forbruger API-ruter i frontend
Du har oprettet et API-slutpunkt, der returnerer et JSON-objekt, der indeholder en række todos.
For at forbruge API'en skal du oprette en funktion kaldet fetchTodos, der henter data fra API-endepunktet. Funktionen bruger hentemetoden, men du kan også bruge Axios til at lave API-anmodninger. Kald derefter denne funktion, når du klikker på en knap.
importere Hoved fra "næste/hoved";
importere { useState } fra "reagere";eksportStandardfungereHjem() {
konst [todos, settodos] = useState([]);konst henteTodos = asynkron () => {
konst svar = vente hente("/api/todos");
konst data = vente response.json();
settodos (data);
};
Vend tilbage (
<div className={styles.container}>
<Hoved>
<titel>Opret næste app</title>
<metanavn="beskrivelse" indhold="Genereret af oprette næste app" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<vigtigste>
<knap onClick={fetchTodos}>Få todos</button>
<ul>
{todos.map((todo) => {
Vend tilbage (
<li
style={{ farve: `${todo.completed? "grøn": "rød"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Listen i dette uddrag viser opgaveelementerne, når de hentes.
For POST-slutpunktet skal du oprette en ny funktion kaldet saveTodo, der laver en POST-anmodning til API'et. Henteanmodningen gemmer det nye opgaveelement i brødteksten og returnerer alle opgaveelementerne inklusive det nye. SaveTodo-funktionen gemmer dem derefter i todos-tilstand.
konst saveTodo = asynkron () => {
konst svar = vente hente("/api/todos", {
metode: "STOLPE",
legeme: JSON.stringify (newTodo),
overskrifter: {
"Indholdstype": "applikation/json",
},
});
konst data = vente response.json();
settodos (data);
};
Opret derefter en formular med en tekstinputlinje for at modtage det nye opgaveelement. Indsend-håndteringsfunktionen i denne formular kalder saveTodo-funktionen.
importere Hoved fra "næste/hoved";
importere { useReducer, useState } fra "reagere";
importere stilarter fra "../styles/Home.module.css";eksportStandardfungereHjem() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
at gøre: "",
afsluttet: falsk,
});konst henteTodos = asynkron () => {
// henteTodos
};
konst saveTodo = asynkron (e) => {
konst svar = vente hente("/api/todos", {
metode: "STOLPE",
legeme: JSON.stringify (newTodo),
overskrifter: {
"Indholdstype": "applikation/json",
},
});konst data = vente response.json();
settodos (data);
};konst handleChange = (e) => {
sætnyTodo({
at gøre: e.mål.værdi,
});
};konst handleSubmit = (e) => {
e.preventDefault();
saveTodo();
sætnyTodo({
at gøre: '',
});
};Vend tilbage (
<div className={styles.container}>
<Hoved>
<titel>Opret næste app</title>
<metanavn="beskrivelse" indhold="Genereret af oprette næste app" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<vigtigste>
// Henter opgaveelementerne, når der klikkes på dem
<knap onClick={fetchTodos}>Få todos</button>
// Gemmer et nyt opgaveelement, når det sendes
<form onSubmit={handleSubmit}>
<input type="tekst" onChange={handleChange} værdi={newTodo.todo} />
</form>
<ul>
{// liste opgaveelementer}
</ul>
</main>
</div>
);
}
Behandleren tilføjer en ny opgave til databasen, hver gang en bruger indsender formularen. Denne funktion opdaterer også todos-værdien ved hjælp af data modtaget fra API'et, som igen tilføjer det nye todo-element til listen.
API-routing er kun en af Next.js's styrker
Du har set, hvordan du bygger og bruger en Next.js API-rute. Nu kan du oprette en fuld stack-applikation uden at forlade din Next.js-projektmappe. API-routing er en af de mange fordele, som Next.js giver.
Next.js tilbyder også ydeevneoptimeringer såsom kodeopdeling, doven indlæsning og indbygget CSS-understøttelse. Hvis du bygger en hjemmeside, der skal være hurtig og SEO-venlig, bør du overveje Next.js.