Prošli su dani kada ste morali izraditi zasebnu pozadinu za svoju web stranicu. Uz Next.js API usmjeravanje temeljeno na datoteci, možete si olakšati život pisanjem API-ja unutar Next.js projekta.
Next.js je React meta-framework sa značajkama koje pojednostavljuju proces izgradnje web-aplikacija spremnih za proizvodnju. Vidjet ćete kako izgraditi REST API u Next.js i iskoristiti podatke iz tog API-ja na stranici Next.js.
Stvorite Next.js projekt koristeći create-next-app
Možete stvoriti novi Next.js projekt pomoću CLI alata create-next-app. Instalira potrebne pakete i datoteke za početak izrade Next.js aplikacije.
Pokrenite ovu naredbu u terminalu da biste stvorili novu mapu Next.js pod nazivom api-routes. Možda ćete dobiti upit da instalirate create-next-app.
npx stvoriti-Sljedeći-app api-rute
Kada naredba završi, otvorite mapu api-routes za početak stvaranja API ruta.
API usmjeravanje u Next.js
API rute pokreću se na poslužitelju i imaju mnoge namjene poput spremanja korisničkih podataka u bazu podataka ili dohvaćanja podataka iz API-ja bez podizanja Pogreška pravila CORS.
U Next.js, morate kreirati API rute unutar mape /pages/api. Next.js generira API krajnje točke za svaku od datoteka u ovoj mapi. Ako dodate user.js u /pages/api, Next.js će stvoriti krajnju točku na http://localhost: 3000/api/korisnik.
Osnovna Next.js API ruta ima sljedeću sintaksu.
izvozzadanofunkcijarukovatelj(zahtjev, res) {
res.status (200).json({ ime: 'John Doe' })
}
Morate izvesti funkciju rukovatelja da bi radila.
Stvaranje API ruta
Stvorite novu datoteku pod nazivom todo.js u /pages/api mapu za dodavanje API rute za stavke obveza.
Ismijavanje baze podataka Todo
Da biste dobili todos, morate stvoriti krajnju točku GET. Za jednostavnost. Ovaj vodič koristi niz todo stavki umjesto baze podataka, ali slobodno koristite bazu podataka kao što je MongoDB ili MySQL.
Stvorite stavke obveza u todo.js u korijenskoj mapi svoje aplikacije, a zatim dodajte sljedeće podatke.
izvozkonst todos = [
{
id: 1,
napraviti: "Učini nešto lijepo za nekoga do koga mi je stalo",
završeno: pravi,
korisnički ID: 26,
},
{
id: 2,
napraviti: "Zapamtite pedeset država i njihove glavne gradove",
završeno: lažno,
korisnički ID: 48,
},
// ostali poslovi
];
Ove stavke Todo su s web stranice DummyJSON, a REST API za lažne podatke. Iz ovoga možete pronaći točne podatke Krajnja točka zadataka DummyJSON.
Zatim stvorite API rutu u /pages/api/todos.js i dodajte funkciju rukovatelja.
uvoz {todos} iz "../../napraviti";izvozfunkcijarukovatelj(zahtjev, res) {
konst {metoda} = req;
sklopka (metoda) {
slučaj "DOBITI":
res.status(200).json(todos);
pauza;
slučaj "POST":
konst { todo, completed } = req.body;
todos.gurnuti({
iskaznica: todos.duljina + 1,
napraviti,
završeno,
});
res.status(200).json(todos);
pauza;
zadano:
res.setHeader("Dopusti", ["DOBITI", "POST"]);
res.status(405).kraj(`Metoda ${method} Nije dopušteno`);
pauza;
}
}
Ova ruta obrađuje krajnje točke GET i POST. Vraća sve zadatke za GET zahtjev i dodaje stavku zadataka u bazu podataka zadataka za POST zahtjev. Za druge metode rukovatelj vraća pogrešku.
Upotreba API ruta u sučelju
Stvorili ste krajnju točku API-ja koja vraća JSON objekt koji sadrži niz zadataka.
Da biste koristili API, izradite funkciju pod nazivom fetchTodos koja dohvaća podatke s krajnje točke API-ja. Funkcija koristi metodu dohvaćanja, ali također možete koristiti Axios za izradu API zahtjeva. Zatim pozovite ovu funkciju kada kliknete gumb.
uvoz glava iz "sljedeća/glava";
uvoz {useState} iz "reagirati";izvozzadanofunkcijaDom() {
konst [todos, settodos] = useState([]);konst dohvatiTodos = asinkroni () => {
konst odgovor = čekati dohvati("/api/todos");
konst podaci = čekati odgovor.json();
settodos (podatak);
};
povratak (
<div className={styles.container}>
<glava>
<titula>Stvori sljedeću aplikaciju</title>
<meta naziv="opis" sadržaj="Generirano stvaranjem sljedeće aplikacije" />
<veza rel="ikona" href="/favicon.ico" />
</Head>
<glavni>
<gumb onClick={fetchTodos}>Dobiti todos</button>
<ul>
{todos.map((todo) => {
povratak (
<li
style={{ boja: `${todo.completed? "zelena": "Crvena"}` }}
ključ={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Popis u ovom isječku prikazuje stavke obaveza kada se dohvate.
Za krajnju točku POST-a stvorite novu funkciju pod nazivom saveTodo koja šalje POST zahtjev API-ju. Zahtjev za dohvaćanje pohranjuje novu todo stavku u tijelo i vraća sve todo stavke uključujući novu. Funkcija saveTodo zatim ih pohranjuje u todos stanje.
konst spremiTodo = asinkroni () => {
konst odgovor = čekati dohvati("/api/todos", {
metoda: "POST",
tijelo: JSON.stringify (newTodo),
zaglavlja: {
"Vrsta sadržaja": "aplikacija/json",
},
});
konst podaci = čekati odgovor.json();
settodos (podatak);
};
Zatim izradite obrazac s trakom za unos teksta za primanje nove stavke obaveza. Funkcija rukovatelja slanjem ovog obrasca će pozvati funkciju saveTodo.
uvoz glava iz "sljedeća/glava";
uvoz {useReducer, useState} iz "reagirati";
uvoz stilovi iz "../styles/Home.module.css";izvozzadanofunkcijaDom() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
napraviti: "",
završeno: lažno,
});konst dohvatiTodos = asinkroni () => {
// dohvatiTodos
};
konst spremiTodo = asinkroni (e) => {
konst odgovor = čekati dohvati("/api/todos", {
metoda: "POST",
tijelo: JSON.stringify (newTodo),
zaglavlja: {
"Vrsta sadržaja": "aplikacija/json",
},
});konst podaci = čekati odgovor.json();
settodos (podatak);
};konst handleChange = (e) => {
setnewTodo({
napraviti: e.cilj.vrijednost,
});
};konst handleSubmit = (e) => {
e.preventDefault();
spremiTodo();
setnewTodo({
napraviti: '',
});
};povratak (
<div className={styles.container}>
<glava>
<titula>Stvori sljedeću aplikaciju</title>
<meta naziv="opis" sadržaj="Generirano stvaranjem sljedeće aplikacije" />
<veza rel="ikona" href="/favicon.ico" />
</Head>
<glavni>
// Dohvaća stavke zadataka kada se klikne
<gumb onClick={fetchTodos}>Dobiti todos</button>
// Sprema novu todo stavku kada se pošalje
<obrazac onSubmit={handleSubmit}>
<vrsta unosa="tekst" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// popis todo stavki}
</ul>
</main>
</div>
);
}
Rukovatelj dodaje novu obavezu u bazu podataka svaki put kada korisnik pošalje obrazac. Također, ova funkcija ažurira vrijednost obaveza pomoću podataka primljenih od API-ja koji zauzvrat dodaje novu stavku obaveza na popis.
API usmjeravanje samo je jedna od prednosti Next.js-a
Vidjeli ste kako gradite i koristite Next.js API rutu. Sada možete izraditi aplikaciju punog skupa bez napuštanja mape projekta Next.js. API usmjeravanje jedna je od mnogih prednosti koje Next.js pruža.
Next.js također nudi optimizacije performansi kao što je dijeljenje koda, lijeno učitavanje i ugrađena CSS podrška. Ako gradite web stranicu koja mora biti brza i prilagođena SEO-u, razmislite o Next.js.