Möödas on päevad, mil pidite looma oma veebisaidi jaoks eraldi taustaprogrammi. Next.js failipõhise API marsruutimise abil saate oma elu lihtsamaks teha, kirjutades oma API Next.js projekti.
Next.js on Reacti metaraamistik koos funktsioonidega, mis lihtsustavad tootmisvalmis veebirakenduste loomist. Näete, kuidas luua Next.js-is REST API ja tarbida selle API andmeid lehel Next.js.
Projekti Next.js loomine kasutades create-next-app
Saate luua uue Next.js-projekti, kasutades tööriista Create-next-app CLI. See installib vajalikud paketid ja failid, et saaksite rakenduse Next.js loomisega alustada.
Käivitage see käsk terminalis, et luua uus Next.js kaust nimega api-routes. Võite saada viipa loo-next-app installimiseks.
npx luua-järgmiseks-rakenduse api-marsruudid
Kui käsk on lõpule jõudnud, avage API-marsruutide loomise alustamiseks kaust api-routes.
API marsruutimine rakenduses Next.js
API marsruudid töötavad serveris ja neil on palju kasutusvõimalusi, näiteks kasutajaandmete salvestamine andmebaasi või andmete toomine API-st ilma CORS-i poliitika viga.
Rakenduses Next.js peate looma API marsruudid kaustas /pages/api. Next.js loob iga selles kaustas oleva faili jaoks API lõpp-punkti. Kui lisate faili /pages/api kasutaja.js-i, loob Next.js lõpp-punkti aadressil http://localhost: 3000/api/kasutaja.
Next.js API põhimarsruudil on järgmine süntaks.
eksportidavaikimisifunktsioonikäitleja(req, res) {
res.status (200).json({ nimi: 'John Doe' })
}
Töötamiseks peate töötleja funktsiooni eksportima.
API marsruutide loomine
Looge failis uus fail nimega todo.js /pages/api kausta, et lisada ülesandeüksustele API marsruut.
Todo andmebaasi mõnitamine
Ülesannete saamiseks peate looma GET-i lõpp-punkti. Lihtsuse huvides. See õpetus kasutab andmebaasi asemel mitmesuguseid ülesandeid, kuid võite vabalt kasutada andmebaasi, nagu MongoDB või MySQL.
Looge ülesanded failis todo.js oma rakenduse juurkaustas ja lisage seejärel järgmised andmed.
eksportidakonst todos = [
{
ID: 1,
tegema: "Tehke kellelegi, kellest hoolin, midagi toredat",
lõpetatud: tõsi,
kasutaja ID: 26,
},
{
id: 2,
tegema: "Õppige pähe viiskümmend osariiki ja nende pealinnad",
lõpetatud: vale,
kasutajatunnus: 48,
},
// muud ülesanded
];
Need ülesanded on pärit DummyJSONi veebisaidilt, a REST API näidisandmete jaoks. Täpsed andmed leiate siit DummyJSON todos lõpp-punkt.
Järgmisena looge API marsruut /pages/api/todos.js ja lisage käitleja funktsioon.
importida {ülesanded } alates "../../tegema";eksportidafunktsioonikäitleja(req, res) {
konst { meetod } = req;
lüliti (meetod) {
juhtum "SAADA":
res.status(200).json(todos);
murda;
juhtum "POSTITA":
konst {ülesanne, lõpetatud} = req.body;
todos.push({
id: todos.pikkus + 1,
tegema,
lõpetatud,
});
res.status(200).json(todos);
murda;
vaikimisi:
res.setHeader("Lubama", ["SAADA", "POSTITA"]);
res.status(405).lõpp(`Meetod ${method} Pole lubatud`);
murda;
}
}
See marsruut käsitleb GET- ja POST-i lõpp-punkte. See tagastab kõik GET-päringu ülesanded ja lisab POST-päringu jaoks ülesannete andmebaasi ülesandeüksuse. Muude meetodite puhul tagastab töötleja veateate.
API-marsruutide tarbimine kasutajaliideses
Olete loonud API lõpp-punkti, mis tagastab JSON-objekti, mis sisaldab ülesannete massiivi.
API tarbimiseks looge funktsioon nimega fetchTodos, mis hangib andmed API lõpp-punktist. Funktsioon kasutab toomismeetodit, kuid saate ka kasutage API päringute tegemiseks Axiost. Seejärel helistage sellele funktsioonile, kui klõpsate nuppu.
importida Pea alates "järgmine/pea";
importida { useState } alates "reageerida";eksportidavaikimisifunktsiooniKodu() {
konst [todos, settodos] = useState([]);konst fetchTodos = asünkr () => {
konst vastus = ootama tõmba("/api/todos");
konst andmed = ootama vastus.json();
settodos (andmed);
};
tagasi (
<div className={styles.container}>
<Pea>
<pealkiri>Loo järgmine rakendus</title>
<meta nimi="kirjeldus" sisu="Loodud järgmise rakenduse loomisega" />
<link rel="ikooni" href="/favicon.ico" />
</Head>
<peamine>
<nupp onClick={fetchTodos}>Hankige ülesandeid</button>
<ul>
{todos.map((todo) => {
tagasi (
<li
style={{ värv: `${todo.completed? "roheline": "punane"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Selle koodilõigu loendis kuvatakse ülesanded, kui need tuuakse.
POST-i lõpp-punkti jaoks looge uus funktsioon nimega saveTodo, mis teeb API-le POST-päringu. Tõmbamistaotlus salvestab uue ülesandeüksuse kehasse ja tagastab kõik ülesandeüksused, sealhulgas uue. Funktsioon saveTodo salvestab need seejärel ülesannete olekusse.
konst saveTodo = asünkr () => {
konst vastus = ootama tõmba("/api/todos", {
meetod: "POSTITA",
keha: JSON.stringify (newTodo),
päised: {
"Sisu tüüp": "rakendus/json",
},
});
konst andmed = ootama vastus.json();
settodos (andmed);
};
Seejärel looge uue ülesande vastuvõtmiseks tekstisisestusribaga vorm. Selle vormi esitamistöötleja funktsioon kutsub esile funktsiooni saveTodo.
importida Pea alates "järgmine/pea";
importida { useReducer, useState } alates "reageerida";
importida stiilid alates "../styles/Home.module.css";eksportidavaikimisifunktsiooniKodu() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
tegema: "",
lõpetatud: vale,
});konst fetchTodos = asünkr () => {
// tõmbaTodos
};
konst saveTodo = asünkr (e) => {
konst vastus = ootama tõmba("/api/todos", {
meetod: "POSTITA",
keha: JSON.stringify (newTodo),
päised: {
"Sisu tüüp": "rakendus/json",
},
});konst andmed = ootama vastus.json();
settodos (andmed);
};konst HandChange = (e) => {
setnewTodo({
tegema: e.sihtmärk.väärtus,
});
};konst handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
tegema: '',
});
};tagasi (
<div className={styles.container}>
<Pea>
<pealkiri>Loo järgmine rakendus</title>
<meta nimi="kirjeldus" sisu="Loodud järgmise rakenduse loomisega" />
<link rel="ikooni" href="/favicon.ico" />
</Head>
<peamine>
// Klõpsamisel hangib ülesandeüksused
<nupp onClick={fetchTodos}>Hankige ülesandeid</button>
// Salvestab esitamisel uue ülesandeüksuse
<vorm onSubmit={handleSubmit}>
<sisendi tüüp="tekst" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// ülesannete loetelu}
</ul>
</main>
</div>
);
}
Töötleja lisab andmebaasi uue ülesande iga kord, kui kasutaja vormi esitab. Samuti värskendab see funktsioon ülesande väärtust, kasutades API-lt saadud andmeid, mis omakorda lisab loendisse uue ülesandeüksuse.
API marsruutimine on vaid üks Next.js'i tugevustest
Olete näinud, kuidas koostate ja kasutate Next.js API marsruuti. Nüüd saate luua täieliku virna rakenduse ilma Next.js projekti kaustast lahkumata. API marsruutimine on üks paljudest eelistest, mida Next.js pakub.
Next.js pakub ka toimivuse optimeerimisi, nagu koodi tükeldamine, aeglane laadimine ja sisseehitatud CSS-i tugi. Kui loote veebisaiti, mis peab olema kiire ja SEO-sõbralik, peaksite kaaluma Next.js-i.
