De dagar då du var tvungen att skapa en separat backend för din webbplats är förbi. Med Next.js filbaserad API-routning kan du göra ditt liv enklare genom att skriva ditt API i ett Next.js-projekt.
Next.js är ett React-meta-ramverk med funktioner som förenklar processen att bygga produktionsklara webbappar. Du kommer att se hur du bygger ett REST API i Next.js och konsumerar data från det API på en Next.js-sida.
Skapa ett Next.js-projekt med create-next-app
Du kan skapa ett nytt Next.js-projekt med CLI-verktyget create-next-app. Den installerar de nödvändiga paketen och filerna för att komma igång med att bygga ett Next.js-program.
Kör det här kommandot i en terminal för att skapa en ny Next.js-mapp som heter api-routes. Du kan få en uppmaning om att installera create-next-app.
npx skapa-Nästa-app api-rutter
När kommandot är klart, öppna mappen api-routes för att börja skapa API-rutter.
API-routing i Next.js
API-rutter körs på servern och har många användningsområden som att spara användardata till en databas eller hämta data från ett API utan att höja CORS policyfel.
I Next.js måste du skapa API-rutter i mappen /pages/api. Next.js genererar API-slutpunkter för var och en av filerna i den här mappen. Om du lägger till user.js till /pages/api kommer Next.js att skapa en slutpunkt på http://localhost: 3000/api/användare.
En grundläggande Next.js API-rutt har följande syntax.
exporterastandardfungerahanterare(req, res) {
res.status (200).json({ namn: 'John Doe' })
}
Du måste exportera hanterarfunktionen för att den ska fungera.
Skapa API-rutter
Skapa en ny fil som heter todo.js i /pages/api mapp för att lägga till en API-rutt för att göra-objekt.
Hånar Todo-databasen
För att få uppgifterna måste du skapa en GET-slutpunkt. För enkelheten. Den här handledningen använder en rad att göra-objekt istället för en databas, men använd gärna en databas som MongoDB eller MySQL.
Skapa uppgifterna i todo.js i rotmappen i din applikation och lägg sedan till följande data.
exporterakonst todos = [
{
id: 1,
att göra: "Gör något trevligt för någon jag bryr mig om",
avslutad: Sann,
användar-ID: 26,
},
{
id: 2,
att göra: "Memorera de femtio staterna och deras huvudstäder",
avslutad: falsk,
användar-ID: 48,
},
// andra saker
];
Dessa att göra-föremål är från DummyJSON-webbplatsen, en REST API för skendata. Du kan hitta exakta uppgifter från detta DummyJSON todos slutpunkt.
Skapa sedan API-rutten i /pages/api/todos.js och lägg till hanterarfunktionen.
importera { todos } från "../../att göra";exporterafungerahanterare(req, res) {
konst { metod } = req;
växla (metod) {
fall "SKAFFA SIG":
res.status(200).json(todos);
ha sönder;
fall "POSTA":
konst { todo, completed } = req.body;
todos.skjuta på({
id: todos.längd + 1,
att göra,
avslutad,
});
res.status(200).json(todos);
ha sönder;
standard:
res.setHeader("Tillåta", ["SKAFFA SIG", "POSTA"]);
res.status(405).slutet(`Metod ${method} Inte tillåtet`);
ha sönder;
}
}
Den här rutten hanterar GET- och POST-slutpunkterna. Den returnerar alla uppgifter för GET-begäran och lägger till ett att göra-objekt till att göra-databasen för en POST-begäran. För andra metoder returnerar hanteraren ett fel.
Konsumerar API-rutter i frontend
Du har skapat en API-slutpunkt som returnerar ett JSON-objekt som innehåller en array av uppgifter.
För att konsumera API, skapa en funktion som heter fetchTodos som hämtar data från API-slutpunkten. Funktionen använder hämtametoden men du kan också använd Axios för att göra API-förfrågningar. Anropa sedan denna funktion när du klickar på en knapp.
importera Huvud från "nästa/huvud";
importera { useState } från "reagera";exporterastandardfungeraHem() {
konst [todos, settodos] = useState([]);konst hämtaTodos = asynkron () => {
konst svar = vänta hämta("/api/todos");
konst data = vänta response.json();
settodos (data);
};
lämna tillbaka (
<div className={styles.container}>
<Huvud>
<titel>Skapa nästa app</title>
<metanamn="beskrivning" innehåll="Genereras av skapa nästa app" />
<länk rel="ikon" href="/favicon.ico" />
</Head>
<huvud>
<button onClick={fetchTodos}>Skaffa uppgifter</button>
<ul>
{todos.map((todo) => {
lämna tillbaka (
<li
style={{ färg: `${todo.completed? "grön": "röd"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Listan i det här utdraget visar att göra-objekten när de hämtas.
För POST-slutpunkten, skapa en ny funktion som heter saveTodo som gör en POST-begäran till API: t. Hämtningsbegäran lagrar det nya att göra-objektet i brödtexten och returnerar alla att göra-objekt inklusive det nya. SaveTodo-funktionen lagrar dem sedan i todos-läget.
konst saveTodo = asynkron () => {
konst svar = vänta hämta("/api/todos", {
metod: "POSTA",
kropp: JSON.stringify (newTodo),
rubriker: {
"Innehållstyp": "applikation/json",
},
});
konst data = vänta response.json();
settodos (data);
};
Skapa sedan ett formulär med en textinmatningsfält för att ta emot det nya att göra-objektet. Inlämningshanterarens funktion i detta formulär kommer att anropa saveTodo-funktionen.
importera Huvud från "nästa/huvud";
importera { useReducer, useState } från "reagera";
importera stilar från "../styles/Home.module.css";exporterastandardfungeraHem() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
att göra: "",
avslutad: falsk,
});konst hämtaTodos = asynkron () => {
// hämtaTodos
};
konst saveTodo = asynkron (e) => {
konst svar = vänta hämta("/api/todos", {
metod: "POSTA",
kropp: JSON.stringify (newTodo),
rubriker: {
"Innehållstyp": "applikation/json",
},
});konst data = vänta response.json();
settodos (data);
};konst handleChange = (e) => {
setnewTodo({
att göra: e.mål.värde,
});
};konst handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
att göra: '',
});
};lämna tillbaka (
<div className={styles.container}>
<Huvud>
<titel>Skapa nästa app</title>
<metanamn="beskrivning" innehåll="Genereras av skapa nästa app" />
<länk rel="ikon" href="/favicon.ico" />
</Head>
<huvud>
// Hämtar att göra-objekten när de klickas
<button onClick={fetchTodos}>Skaffa uppgifter</button>
// Sparar ett nytt att göra-objekt när det skickas
<form onSubmit={handleSubmit}>
<ingångstyp="text" onChange={handleChange} värde={newTodo.todo} />
</form>
<ul>
{// lista att göra-objekt}
</ul>
</main>
</div>
);
}
Hanteraren lägger till en ny uppgift till databasen varje gång en användare skickar formuläret. Den här funktionen uppdaterar också todos-värdet med hjälp av data som tas emot från API: t som i sin tur lägger till det nya todo-objektet till listan.
API-routing är bara en av Next.js styrkor
Du har sett hur du bygger och använder en Next.js API-rutt. Nu kan du skapa en fullstack-applikation utan att lämna din Next.js-projektmapp. API-routing är en av de många fördelarna som Next.js ger.
Next.js erbjuder även prestandaoptimeringar som koddelning, lazy loading och inbyggt CSS-stöd. Om du bygger en webbplats som måste vara snabb och SEO-vänlig bör du överväga Next.js.