Praėjo tie laikai, kai reikėjo sukurti atskirą savo svetainės užpakalinę programą. Naudodami Next.js failais pagrįstą API maršrutą galite palengvinti savo gyvenimą įrašydami API į Next.js projektą.
Next.js yra „React“ metasistema su funkcijomis, kurios supaprastina gamybai paruoštų žiniatinklio programų kūrimo procesą. Pamatysite, kaip Next.js sukurti REST API ir naudoti duomenis iš tos API Next.js puslapyje.
Sukurkite Next.js projektą naudodami create-next-app
Galite sukurti naują Next.js projektą naudodami CLI įrankį Create-next-app. Jis įdiegia reikiamus paketus ir failus, kad galėtumėte pradėti kurti Next.js programą.
Vykdykite šią komandą terminale, kad sukurtumėte naują Next.js aplanką, vadinamą api-routes. Galite gauti raginimą įdiegti „create-next-app“.
npx sukurti-Kitas-App api maršrutai
Kai komanda bus baigta, atidarykite aplanką api-routes, kad pradėtumėte kurti API maršrutus.
API maršrutas Next.js
API maršrutai veikia serveryje ir yra daug naudojami, pavyzdžiui, vartotojo duomenų išsaugojimas duomenų bazėje arba duomenų gavimas iš API nepakeliant CORS politikos klaida.
„Next.js“ aplanke /pages/api turite sukurti API maršrutus. Next.js sukuria API galinius taškus kiekvienam šiame aplanke esančiam failui. Jei į /pages/api pridėsite user.js, Next.js sukurs galinį tašką adresu http://localhost: 3000 / api / vartotojas.
Pagrindinis Next.js API maršrutas turi tokią sintaksę.
eksportuotinumatytasfunkcijaprižiūrėtojas(req, res) {
res.status (200).json({ pavadinimas: 'John Doe' })
}
Turite eksportuoti tvarkyklės funkciją, kad ji veiktų.
API maršrutų kūrimas
Sukurkite naują failą pavadinimu todo.js /pages/api aplanką, kad pridėtumėte API maršrutą todo elementams.
Pasityčiojimas iš Todo duomenų bazės
Norėdami gauti užduotis, turite sukurti GET galinį tašką. Dėl paprastumo. Šioje mokymo programoje vietoj duomenų bazės naudojamas daugybė darbų elementų, tačiau nedvejodami naudokite tokią duomenų bazę kaip MongoDB arba MySQL.
Sukurkite todo elementus faile todo.js savo programos šakniniame aplanke, tada pridėkite šiuos duomenis.
eksportuotikonst todos = [
{
ID: 1,
daryti: "Padaryk ką nors malonaus tam, kuris man rūpi",
baigtas: tiesa,
vartotojo ID: 26,
},
{
ID: 2,
daryti: "Prisiminkite penkiasdešimt valstybių ir jų sostines",
baigtas: klaidinga,
vartotojo ID: 48,
},
// kiti darbai
];
Šie darbų elementai yra iš DummyJSON svetainės, a REST API už netikrus duomenis. Čia galite rasti tikslius duomenis DummyJSON todos galutinis taškas.
Tada sukurkite API maršrutą /pages/api/todos.js ir pridėkite tvarkyklės funkciją.
importuoti { todos } iš "../../daryti";eksportuotifunkcijaprižiūrėtojas(req, res) {
konst {metodas} = req;
jungiklis (metodas) {
atveju "GAUTI":
res.statusas(200).json(todos);
pertrauka;
atveju "PAST":
konst { užduotis, atlikta } = req.body;
todos.stumti({
id: todos.ilgis + 1,
daryti,
baigtas,
});
res.statusas(200).json(todos);
pertrauka;
numatytas:
res.setHeader("Leisti", ["GAUTI", "PAST"]);
res.status(405).galas(` Metodas ${method} Neleidžiama');
pertrauka;
}
}
Šis maršrutas tvarko GET ir POST galinius taškus. Jis grąžina visas GET užklausos užduotis ir prideda užduočių elementą į užduočių duomenų bazę POST užklausai. Naudojant kitus metodus, tvarkytojas grąžina klaidą.
API maršrutų naudojimas priekinėje sistemoje
Sukūrėte API galinį tašką, kuris grąžina JSON objektą, kuriame yra užduočių masyvas.
Norėdami naudoti API, sukurkite funkciją fetchTodos, kuri nuskaito duomenis iš API galutinio taško. Funkcija naudoja gavimo metodą, bet jūs taip pat galite naudokite „Axios“, kad pateiktumėte API užklausas. Tada iškvieskite šią funkciją spustelėję mygtuką.
importuoti Galva iš "kitas / galva";
importuoti { useState } iš „reaguoti“;eksportuotinumatytasfunkcijaNamai() {
konst [todos, settodos] = useState([]);konst fetchTodos = async () => {
konst atsakymas = laukti atnešti ("/api/todos“);
konst duomenys = laukti atsakymas.json();
settodos (duomenys);
};
grąžinti (
<div className={styles.container}>
<Galva>
<titulą>Sukurti kitą programą</title>
<meta vardas ="apibūdinimas" turinys="Sugeneruota kuriant kitą programą" />
<nuoroda rel="piktogramą" href="/favicon.ico" />
</Head>
<pagrindinis>
<mygtukas onClick={fetchTodos}>Gaukite darbų</button>
<ul>
{todos.map((todo) => {
grąžinti (
<li
style={{ spalva: `${todo.completed? "žalias": "raudona"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Šiame fragmente pateiktame sąraše rodomi darbų elementai, kai jie gaunami.
POST galutiniam taškui sukurkite naują funkciją, pavadintą saveTodo, kuri pateikia POST užklausą API. Gavimo užklausa išsaugo naują užduoties elementą ir grąžina visus užduoties elementus, įskaitant naują. Funkcija saveTodo išsaugo juos todos būsenoje.
konst saveTodo = async () => {
konst atsakymas = laukti atnešti ("/api/todos“, {
metodas: "PAST",
kūnas: JSON.stringify (newTodo),
antraštės: {
"Turinio tipas": "programa/json",
},
});
konst duomenys = laukti atsakymas.json();
settodos (duomenys);
};
Tada sukurkite formą su teksto įvesties juosta, kad gautumėte naują užduoties elementą. Šios formos pateikimo tvarkyklės funkcija iškvies funkciją saveTodo.
importuoti Galva iš "kitas / galva";
importuoti { useReducer, useState } iš „reaguoti“;
importuoti stiliai iš "../styles/Home.module.css";eksportuotinumatytasfunkcijaNamai() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
daryti: "",
baigtas: klaidinga,
});konst fetchTodos = async () => {
// FetchTodos
};
konst saveTodo = async (e) => {
konst atsakymas = laukti atnešti ("/api/todos“, {
metodas: "PAST",
kūnas: JSON.stringify (newTodo),
antraštės: {
"Turinio tipas": "programa/json",
},
});konst duomenys = laukti atsakymas.json();
settodos (duomenys);
};konst handleChange = (e) => {
setnewTodo({
daryti: e.taikinys.vertė,
});
};konst handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
daryti: '',
});
};grąžinti (
<div className={styles.container}>
<Galva>
<titulą>Sukurti kitą programą</title>
<meta vardas ="apibūdinimas" turinys="Sugeneruota kuriant kitą programą" />
<nuoroda rel="piktogramą" href="/favicon.ico" />
</Head>
<pagrindinis>
// Paspaudus gaunami todo elementai
<mygtukas onClick={fetchTodos}>Gaukite darbų</button>
// Pateikus išsaugo naują užduoties elementą
<forma onSubmit={handleSubmit}>
<įvesties tipas ="tekstą" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// sąrašas darbų elementų}
</ul>
</main>
</div>
);
}
Kiekvieną kartą, kai vartotojas pateikia formą, tvarkytojas į duomenų bazę įtraukia naują užduotį. Be to, ši funkcija atnaujina todos reikšmę naudodama duomenis, gautus iš API, o tai savo ruožtu prideda naują užduočių elementą į sąrašą.
API maršrutas yra tik viena iš Next.js privalumų
Matėte, kaip kuriate ir naudojate Next.js API maršrutą. Dabar galite sukurti visą paketą neišeidami iš projekto aplanko Next.js. API maršrutas yra vienas iš daugelio Next.js teikiamų privalumų.
Next.js taip pat siūlo našumo optimizavimą, pvz., kodo skaidymą, tingų įkėlimą ir integruotą CSS palaikymą. Jei kuriate svetainę, kuri turi būti greita ir pritaikyta SEO, turėtumėte apsvarstyti Next.js.
