Voorbij zijn de dagen dat u een aparte backend voor uw website moest maken. Met Next.js op bestanden gebaseerde API-routering kunt u uw leven gemakkelijker maken door uw API binnen een Next.js-project te schrijven.
Next.js is een React-metaframework met functies die het proces van het bouwen van productieklare web-apps vereenvoudigen. U zult zien hoe u een REST API bouwt in Next.js en de gegevens van die API op een Next.js-pagina gebruikt.
Maak een Next.js-project met behulp van create-next-app
U kunt een nieuw Next.js-project maken met behulp van de create-next-app CLI-tool. Het installeert de benodigde pakketten en bestanden om u op weg te helpen met het bouwen van een Next.js-toepassing.
Voer deze opdracht uit in een terminal om een nieuwe map Next.js met de naam api-routes te maken. Mogelijk ontvangt u een prompt om create-next-app te installeren.
npx creëren-volgende-app api-routes
Wanneer de opdracht is voltooid, opent u de map api-routes om te beginnen met het maken van de API-routes.
API-routering in Next.js
API-routes draaien op de server en hebben vele toepassingen, zoals het opslaan van gebruikersgegevens in een database of het ophalen van gegevens van een API zonder de CORS-beleidsfout.
In Next.js moet u API-routes maken in de map /pages/api. Next.js genereert API-eindpunten voor elk van de bestanden in deze map. Als u user.js toevoegt aan /pages/api, maakt Next.js een eindpunt op http://localhost: 3000/api/gebruiker.
Een standaard Next.js API-route heeft de volgende syntaxis.
exporterenstandaardfunctiebehandelaar(req, res) {
res.status (200).json({ naam: 'John Doe' })
}
U moet de handlerfunctie exporteren om deze te laten werken.
API-routes maken
Maak een nieuw bestand met de naam todo.js in het /pages/api map om een API-route voor todo-items toe te voegen.
De Todo-database bespotten
Om de taken te krijgen, moet u een GET-eindpunt maken. Voor eenvoud. Deze tutorial gebruikt een reeks todo-items in plaats van een database, maar voel je vrij om een database zoals MongoDB of MySQL te gebruiken.
Maak de todo-items in todo.js in de hoofdmap van uw applicatie en voeg vervolgens de volgende gegevens toe.
exporterenconst taken = [
{
identiteitsbewijs: 1,
Te doen: "Doe iets aardigs voor iemand om wie ik geef",
voltooid: WAAR,
gebruikers-ID: 26,
},
{
identiteitsbewijs: 2,
Te doen: "Onthoud de vijftig staten en hun hoofdsteden",
voltooid: vals,
gebruikers-ID: 48,
},
// andere taken
];
Deze todo-items zijn afkomstig van de DummyJSON-website, een REST-API voor nepgegevens. Hiervan kunt u de exacte gegevens vinden DummyJSON todos eindpunt.
Maak vervolgens de API-route in /pages/api/todos.js en voeg de handlerfunctie toe.
importeren { taken } van "../../Te doen";exporterenfunctiebehandelaar(req, res) {
const { methode } = verzoek;
schakelaar (methode) {
geval "KRIJGEN":
res.toestand(200).json(taken);
pauze;
geval "NA":
const { te doen, voltooid } = req.body;
taken.duw({
ID kaart: taken.lengte + 1,
Te doen,
voltooid,
});
res.toestand(200).json(taken);
pauze;
standaard:
reset.setHeader("Toestaan", ["KRIJGEN", "NA"]);
res.status(405).einde(`Methode ${methode} Niet toegestaan`);
pauze;
}
}
Deze route verwerkt de GET- en POST-eindpunten. Het retourneert alle todo's voor het GET-verzoek en voegt een todo-item toe aan de todo-database voor een POST-verzoek. Voor andere methoden retourneert de handler een fout.
API-routes consumeren in de frontend
U hebt een API-eindpunt gemaakt dat een JSON-object retourneert dat een reeks taken bevat.
Om de API te gebruiken, maakt u een functie met de naam fetchTodos die gegevens ophaalt van het API-eindpunt. De functie gebruikt de ophaalmethode, maar dat kan ook gebruik Axios om API-aanvragen te doen. Roep deze functie dan aan wanneer u op een knop klikt.
importeren Hoofd van "volgende/hoofd";
importeren { useState } van "Reageer";exporterenstandaardfunctieThuis() {
const [todos, settodos] = useState([]);const haalTodos = asynchroon () => {
const reactie = wachten ophalen("/api/taken");
const gegevens = wachten reactie.json();
settodos (gegevens);
};
opbrengst (
<div className={styles.container}>
<Hoofd>
<titel>Maak de volgende app</title>
<metanaam="beschrijving" inhoud="Gegenereerd door create next app" />
<link rel="icoon" href="/favicon.ico" />
</Head>
<voornaamst>
<knop onClick={fetchTodos}>Taken ophalen</button>
<ul>
{todos.map((todo) => {
opbrengst (
<li
style={{ color: `${todo.completed? "groente": "rood"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
De lijst in dit fragment geeft de todo-items weer wanneer ze worden opgehaald.
Maak voor het POST-eindpunt een nieuwe functie met de naam saveTodo die een POST-verzoek doet aan de API. Het ophaalverzoek slaat het nieuwe todo-item op in de hoofdtekst en retourneert alle todo-items, inclusief de nieuwe. De saveTodo-functie slaat ze vervolgens op in de todos-status.
const saveTodo = asynchroon () => {
const reactie = wachten ophalen("/api/alles", {
methode: "NA",
lichaam: JSON.stringify (nieuweTodo),
koppen: {
"Inhoudstype": "toepassing/json",
},
});
const gegevens = wachten reactie.json();
settodos (gegevens);
};
Maak vervolgens een formulier met een tekstinvoerbalk om het nieuwe todo-item te ontvangen. De verzendhandlerfunctie van dit formulier roept de saveTodo-functie aan.
importeren Hoofd van "volgende/hoofd";
importeren { useReducer, useState } van "Reageer";
importeren stijlen van "../styles/Home.module.css";exporterenstandaardfunctieThuis() {
const [todos, settodos] = useState([]);const [newTodo, setnewTodo] = useState({
Te doen: "",
voltooid: vals,
});const haalTodos = asynchroon () => {
// fetchTodos
};
const saveTodo = asynchroon (e) => {
const reactie = wachten ophalen("/api/alles", {
methode: "NA",
lichaam: JSON.stringify (nieuweTodo),
koppen: {
"Inhoudstype": "toepassing/json",
},
});const gegevens = wachten reactie.json();
settodos (gegevens);
};const handleChange = (e) => {
setnewTodo({
Te doen: e.doel.waarde,
});
};const handleSubmit = (e) => {
e.voorkom standaard();
saveTodo();
setnewTodo({
Te doen: '',
});
};opbrengst (
<div className={styles.container}>
<Hoofd>
<titel>Maak de volgende app</title>
<metanaam="beschrijving" inhoud="Gegenereerd door create next app" />
<link rel="icoon" href="/favicon.ico" />
</Head>
<voornaamst>
// Haalt de todo-items op wanneer erop wordt geklikt
<knop onClick={fetchTodos}>Taken ophalen</button>
// Slaat een nieuw todo-item op wanneer het wordt ingediend
<formulier onSubmit={handleSubmit}>
<invoertype="tekst" onChange={handleChange} waarde={newTodo.todo} />
</form>
<ul>
{// lijst todo-items}
</ul>
</main>
</div>
);
}
De handler voegt elke keer dat een gebruiker het formulier indient een nieuwe taak toe aan de database. Deze functie werkt ook de todos-waarde bij met behulp van de gegevens die zijn ontvangen van de API, die op zijn beurt het nieuwe todo-item aan de lijst toevoegt.
API-routering is slechts een van de sterke punten van Next.js
Je hebt gezien hoe je een Next.js API-route bouwt en gebruikt. Nu kunt u een full-stack-applicatie maken zonder uw Next.js-projectmap te verlaten. API-routering is een van de vele voordelen die Next.js biedt.
Next.js biedt ook prestatie-optimalisaties zoals het splitsen van codes, lazy loading en ingebouwde CSS-ondersteuning. Als u een website bouwt die snel en SEO-vriendelijk moet zijn, moet u Next.js overwegen.