Minili so dnevi, ko ste morali za svoje spletno mesto ustvariti ločeno zaledje. Z usmerjanjem API-ja, ki temelji na datoteki Next.js, si lahko olajšate življenje tako, da svoj API napišete znotraj projekta Next.js.
Next.js je meta-ogrodje React s funkcijami, ki poenostavijo postopek gradnje spletnih aplikacij, pripravljenih za proizvodnjo. Videli boste, kako zgraditi API REST v Next.js in porabiti podatke iz tega API-ja na strani Next.js.
Ustvarite projekt Next.js z aplikacijo create-next-app
Nov projekt Next.js lahko ustvarite z orodjem CLI create-next-app. Namesti potrebne pakete in datoteke za lažji začetek gradnje aplikacije Next.js.
Zaženite ta ukaz v terminalu, da ustvarite novo mapo Next.js, imenovano api-routes. Morda boste prejeli poziv za namestitev create-next-app.
npx ustvariti-Naslednji-app api-routes
Ko je ukaz končan, odprite mapo api-routes, da začnete ustvarjati API poti.
Usmerjanje API v Next.js
Poti API-ja se izvajajo na strežniku in imajo veliko uporab, kot je shranjevanje uporabniških podatkov v bazo podatkov ali pridobivanje podatkov iz API-ja brez dvigovanja
Napaka pravilnika CORS.V Next.js morate ustvariti poti API znotraj mape /pages/api. Next.js ustvari končne točke API-ja za vsako od datotek v tej mapi. Če dodate user.js v /pages/api, bo Next.js ustvaril končno točko na http://localhost: 3000/api/uporabnika.
Osnovna smer API-ja Next.js ima naslednjo sintakso.
izvozprivzetofunkcijovodja(zahteva, res) {
res.status (200).json({ ime: 'John Doe' })
}
Funkcijo za obravnavo morate izvoziti, da bo delovala.
Ustvarjanje API poti
Ustvarite novo datoteko z imenom todo.js v /pages/api mapo za dodajanje poti API za elemente opravil.
Norčevanje iz baze podatkov Todo
Če želite pridobiti opravila, morate ustvariti končno točko GET. Zaradi preprostosti. Ta vadnica namesto baze podatkov uporablja niz elementov opravil, vendar lahko uporabite bazo podatkov, kot je MongoDB ali MySQL.
Ustvarite elemente opravil v todo.js v korenski mapi vaše aplikacije in dodajte naslednje podatke.
izvozkonst todos = [
{
id: 1,
narediti: "Naredi nekaj lepega za nekoga, ki mi je mar",
dokončano: prav,
ID uporabnika: 26,
},
{
ID: 2,
narediti: "Zapomnite si petdeset držav in njihovih glavnih mest",
dokončano: lažno,
ID uporabnika: 48,
},
// druga opravila
];
Ti elementi opravil so s spletnega mesta DummyJSON, a REST API za lažne podatke. Točne podatke lahko najdete v tem Končna točka opravil DummyJSON.
Nato ustvarite pot API v /pages/api/todos.js in dodajte funkcijo obdelovalca.
uvoz {todos} od "../../narediti";izvozfunkcijovodja(zahteva, res) {
konst {metoda} = req;
stikalo (metoda) {
Ovitek "DOBITI":
res.stanje(200).json(todos);
odmor;
Ovitek "OBJAVI":
konst {todo, dokončano} = req.body;
todos.potisni({
id: todos.dolžina + 1,
narediti,
dokončano,
});
res.stanje(200).json(todos);
odmor;
privzeto:
res.setHeader("Dovoli", ["DOBITI", "OBJAVI"]);
res.status(405).end(`Metoda ${method} Ni dovoljeno`);
odmor;
}
}
Ta pot obravnava končni točki GET in POST. Vrne vsa opravila za zahtevo GET in doda postavko opravil v zbirko podatkov opravil za zahtevo POST. Pri drugih metodah upravljalnik vrne napako.
Uporaba poti API v sprednjem delu
Ustvarili ste končno točko API-ja, ki vrne objekt JSON, ki vsebuje niz opravil.
Če želite uporabiti API, ustvarite funkcijo, imenovano fetchTodos, ki pridobi podatke iz končne točke API. Funkcija uporablja metodo pridobivanja, lahko pa tudi uporabite Axios za izdelavo zahtev API. Nato pokličite to funkcijo, ko kliknete gumb.
uvoz glava od "naprej/glava";
uvoz {useState} od "reagirati";izvozprivzetofunkcijodomov() {
konst [todos, settodos] = useState([]);konst fetchTodos = asinh () => {
konst odgovor = čakati prinesi ("/api/todos");
konst podatki = čakati odziv.json();
settodos (podatki);
};
vrnitev (
<div className={styles.container}>
<glava>
<naslov>Ustvari naslednjo aplikacijo</title>
<meta ime="opis" vsebina="Ustvarjeno z ustvarjanjem naslednje aplikacije" />
<povezava rel="ikona" href="/favicon.ico" />
</Head>
<glavni>
<gumb onClick={fetchTodos}>Pridobite opravila</button>
<ul>
{todos.map((todo) => {
vrnitev (
<li
style={{ barva: `${todo.completed? "zelena": "rdeča"}` }}
ključ={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Seznam v tem izrezku prikaže elemente opravil, ko so pridobljeni.
Za končno točko POST ustvarite novo funkcijo, imenovano saveTodo, ki naredi zahtevo POST za API. Zahteva za pridobitev shrani nov element opravila v telo in vrne vse elemente opravila, vključno z novim. Funkcija saveTodo jih nato shrani v stanje opravil.
konst saveTodo = asinh () => {
konst odgovor = čakati prinesi ("/api/todos", {
metoda: "OBJAVI",
telo: JSON.stringify (novo opravilo),
glave: {
"Vrsta vsebine": "aplikacija/json",
},
});
konst podatki = čakati odziv.json();
settodos (podatki);
};
Nato ustvarite obrazec z vrstico za vnos besedila, da prejmete novo opravilo. Funkcija za obravnavo predložitve tega obrazca bo poklicala funkcijo saveTodo.
uvoz glava od "naprej/glava";
uvoz {useReducer, useState} od "reagirati";
uvoz stilov od "../styles/Home.module.css";izvozprivzetofunkcijodomov() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
narediti: "",
dokončano: lažno,
});konst fetchTodos = asinh () => {
// pridobi Todos
};
konst saveTodo = asinh (e) => {
konst odgovor = čakati prinesi ("/api/todos", {
metoda: "OBJAVI",
telo: JSON.stringify (novo opravilo),
glave: {
"Vrsta vsebine": "aplikacija/json",
},
});konst podatki = čakati odziv.json();
settodos (podatki);
};konst handleChange = (e) => {
setnewTodo({
narediti: e.tarča.vrednost,
});
};konst handleSubmit = (e) => {
e.preventDefault();
shraniTodo();
setnewTodo({
narediti: '',
});
};vrnitev (
<div className={styles.container}>
<glava>
<naslov>Ustvari naslednjo aplikacijo</title>
<meta ime="opis" vsebina="Ustvarjeno z ustvarjanjem naslednje aplikacije" />
<povezava rel="ikona" href="/favicon.ico" />
</Head>
<glavni>
// Ob kliku pridobi elemente opravil
<gumb onClick={fetchTodos}>Pridobite opravila</button>
// Shrani nov element opravila, ko je oddan
<obrazec onSubmit={handleSubmit}>
<vrsta vnosa="besedilo" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// seznam opravil}
</ul>
</main>
</div>
);
}
Upravljavec doda novo opravilo v bazo podatkov vsakič, ko uporabnik odda obrazec. Poleg tega ta funkcija posodobi vrednost opravil z uporabo podatkov, prejetih iz API-ja, ki nato doda nov element opravil na seznam.
Usmerjanje API je le ena od prednosti Next.js
Videli ste, kako zgradite in uporabite pot API Next.js. Zdaj lahko ustvarite aplikacijo s polnim skladom, ne da bi zapustili mapo projekta Next.js. Usmerjanje API je ena od številnih prednosti, ki jih ponuja Next.js.
Next.js ponuja tudi optimizacije delovanja, kot je deljenje kode, leno nalaganje in vgrajena podpora za CSS. Če gradite spletno stran, ki mora biti hitra in SEO prijazna, razmislite o Next.js.