Elmúltak azok az idők, amikor külön backendet kellett létrehoznia a webhelyéhez. A Next.js fájl alapú API-útválasztással megkönnyítheti életét, ha beírja az API-t egy Next.js projektbe.
A Next.js egy React meta-keretrendszer olyan funkciókkal, amelyek leegyszerűsítik az éles használatra kész webalkalmazások létrehozásának folyamatát. Látni fogja, hogyan hozhat létre REST API-t a Next.js-ben, és hogyan fogyaszthatja el az API-ból származó adatokat a Next.js oldalon.
Hozzon létre egy Next.js projektet a create-next-app használatával
Létrehozhat egy új Next.js projektet a create-next-app CLI eszközzel. Telepíti a szükséges csomagokat és fájlokat, hogy elkezdhesse a Next.js alkalmazás létrehozását.
Futtassa ezt a parancsot egy terminálon egy új, api-routes nevű Next.js mappa létrehozásához. Előfordulhat, hogy a create-next-app telepítésére vonatkozó felszólítást kap.
npx teremt-következő-app api-útvonalak
Amikor a parancs befejeződik, nyissa meg az api-routes mappát az API-útvonalak létrehozásának megkezdéséhez.
API-útválasztás a Next.js-ben
Az API-útvonalak a szerveren futnak, és számos felhasználási területük van, például a felhasználói adatok adatbázisba mentése vagy az adatok lekérése egy API-ból a CORS-házirend hiba.
A Next.js fájlban API-útvonalakat kell létrehoznia a /pages/api mappában. A Next.js API-végpontokat generál az ebben a mappában lévő minden egyes fájlhoz. Ha hozzáadja a user.js fájlt a /pages/api fájlhoz, a Next.js létrehoz egy végpontot a következő helyen http://localhost: 3000/api/felhasználó.
Egy alap Next.js API-útvonal a következő szintaxissal rendelkezik.
exportalapértelmezettfunkciókezelő(req, res) {
res.status (200).json({ név: 'gipsz Jakab' })
}
A kezelő függvényt exportálnia kell, hogy működjön.
API-útvonalak létrehozása
Hozzon létre egy új todo.js nevű fájlt a /pages/api mappa API-útvonal hozzáadásához a teendőelemekhez.
A Todo adatbázis kigúnyolása
A feladatok lekéréséhez létre kell hoznia egy GET végpontot. Az egyszerűség kedvéért. Ez az oktatóanyag egy sor teendőelemet használ adatbázis helyett, de nyugodtan használhat olyan adatbázist, mint a MongoDB vagy a MySQL.
Hozza létre a teendőelemeket a todo.js fájlban az alkalmazás gyökérmappájában, majd adja hozzá a következő adatokat.
exportconst todos = [
{
azonosító: 1,
csinálni: "Csinálj valami kedveset valakiért, akit érdekel",
elkészült: igaz,
felhasználói azonosító: 26,
},
{
azonosító: 2,
csinálni: "Jegyezze meg az ötven államot és fővárosukat",
elkészült: hamis,
felhasználói azonosító: 48,
},
// egyéb teendők
];
Ezek a teendők a DummyJSON webhelyről származnak, a REST API hamis adatokért. Ebből megtudhatja a pontos adatokat DummyJSON todos végpont.
Ezután hozza létre az API-útvonalat /pages/api/todos.js és adja hozzá a kezelő funkciót.
import { todos } tól től "../../csinálni";exportfunkciókezelő(req, res) {
const { metódus } = req;
kapcsoló (módszer) {
ügy "KAP":
res.állapot(200).json(todos);
szünet;
ügy "POST":
const { teendő, kész } = req.body;
todos.nyom({
id: todos.hossz + 1,
csinálni,
befejezve,
});
res.állapot(200).json(todos);
szünet;
alapértelmezett:
res.setHeader("Lehetővé teszi", ["KAP", "POST"]);
res.status(405).end(`Módszer ${method} Nem megengedett`);
szünet;
}
}
Ez az útvonal kezeli a GET és a POST végpontokat. Visszaadja a GET kérés összes teendőjét, és hozzáad egy teendőelemet a teendőadatbázishoz egy POST kérés esetén. Más módszerek esetén a kezelő hibát ad vissza.
API-útvonalak fogyasztása a frontendben
Létrehozott egy API-végpontot, amely egy teendők tömbjét tartalmazó JSON-objektumot ad vissza.
Az API felhasználásához hozzon létre egy fetchTodos nevű függvényt, amely adatokat kér le az API-végpontról. A függvény a lekérési módszert használja, de ezt is megteheti használja az Axiost az API-kérésekhez. Ezután hívja meg ezt a függvényt, amikor rákattint egy gombra.
import Fej tól től "következő/fej";
import { useState } tól től "reagál";exportalapértelmezettfunkcióitthon() {
const [todos, settodos] = useState([]);const fetchTodos = async () => {
const válasz = várja fetch("/api/todos");
const adatok = várja válasz.json();
settodos (adatok);
};
Visszatérés (
<div className={styles.container}>
<Fej>
<cím>Következő alkalmazás létrehozása</title>
<meta név="leírás" tartalom="A következő alkalmazás létrehozása által generált" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<fő->
<gomb onClick={fetchTodos}>Szerezd meg a teendőket</button>
<ul>
{todos.map((todo) => {
Visszatérés (
<li
style={{ color: `${todo.completed? "zöld": "piros"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
A kódrészletben lévő lista megjeleníti a teendőket, amikor lekérik őket.
A POST végponthoz hozzon létre egy saveTodo nevű új függvényt, amely POST kérést küld az API-nak. A lekérési kérelem eltárolja az új teendőelemet a törzsben, és visszaadja az összes teendőelemet, beleértve az újat is. A saveTodo funkció ezután todos állapotban tárolja őket.
const saveTodo = async () => {
const válasz = várja fetch("/api/todos", {
módszer: "POST",
test: JSON.stringify (newTodo),
fejlécek: {
"Tartalom típus": "alkalmazás/json",
},
});
const adatok = várja válasz.json();
settodos (adatok);
};
Ezután hozzon létre egy űrlapot szövegbeviteli sávval az új teendőelem fogadásához. Ennek az űrlapnak a küldéskezelő funkciója meghívja a saveTodo függvényt.
import Fej tól től "következő/fej";
import { useReducer, useState } tól től "reagál";
import stílusok tól től "../styles/Home.module.css";exportalapértelmezettfunkcióitthon() {
const [todos, settodos] = useState([]);const [newTodo, setnewTodo] = useState({
csinálni: "",
elkészült: hamis,
});const fetchTodos = async () => {
// fetchTodos
};
const saveTodo = async (e) => {
const válasz = várja fetch("/api/todos", {
módszer: "POST",
test: JSON.stringify (newTodo),
fejlécek: {
"Tartalom típus": "alkalmazás/json",
},
});const adatok = várja válasz.json();
settodos (adatok);
};const handleChange = (e) => {
setnewTodo({
csinálni: e.cél.érték,
});
};const handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
csinálni: '',
});
};Visszatérés (
<div className={styles.container}>
<Fej>
<cím>Következő alkalmazás létrehozása</title>
<meta név="leírás" tartalom="A következő alkalmazás létrehozása által generált" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<fő->
// Kattintáskor lekéri a teendőket
<gomb onClick={fetchTodos}>Szerezd meg a teendőket</button>
// Elküldéskor elment egy új teendőt
<form onSubmit={handleSubmit}>
<bemenet típusa="szöveg" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// teendők listája}
</ul>
</main>
</div>
);
}
A kezelő minden alkalommal új teendőt ad az adatbázishoz, amikor a felhasználó elküldi az űrlapot. Ezenkívül ez a függvény frissíti a todos értékét az API-tól kapott adatok felhasználásával, ami viszont hozzáadja az új teendőelemet a listához.
Az API-útválasztás csak az egyik Next.js erőssége
Látta, hogyan kell létrehozni és használni a Next.js API-útvonalat. Most már létrehozhat egy teljes verem alkalmazást anélkül, hogy elhagyná a Next.js projektmappáját. Az API-útválasztás a Next.js által nyújtott számos előny egyike.
A Next.js teljesítményoptimalizálást is kínál, mint például a kódfelosztás, a lusta betöltés és a beépített CSS-támogatás. Ha olyan webhelyet készít, amelynek gyorsnak és SEO-barátnak kell lennie, fontolja meg a Next.js-t.
