Takana ovat ajat, jolloin sinun piti luoda erillinen taustaohjelma verkkosivustollesi. Next.js-tiedostopohjaisen API-reitityksen avulla voit helpottaa elämääsi kirjoittamalla API-liittymäsi Next.js-projektiin.
Next.js on React-metakehys, jossa on ominaisuuksia, jotka yksinkertaistavat tuotantovalmiiden verkkosovellusten rakentamista. Näet, kuinka REST-sovellusliittymä rakennetaan Next.js: ssä ja kuinka voit käyttää kyseisen API: n dataa Next.js-sivulla.
Luo Next.js-projekti käyttämällä create-next-app-ohjelmaa
Voit luoda uuden Next.js-projektin käyttämällä create-next-app CLI-työkalua. Se asentaa tarvittavat paketit ja tiedostot, jotta pääset alkuun Next.js-sovelluksen rakentamisessa.
Suorita tämä komento päätteessä luodaksesi uuden Next.js-kansion nimeltä api-routes. Saatat saada kehotteen asentaa create-next-app.
npx luoda-Seuraava-sovellus api-reitit
Kun komento on valmis, avaa api-routes-kansio ja aloita API-reittien luominen.
API-reititys Next.js: ssä
API-reitit toimivat palvelimella ja niillä on monia käyttötarkoituksia, kuten käyttäjätietojen tallentaminen tietokantaan tai tietojen hakeminen API: sta nostamatta
CORS-käytäntövirhe.Next.js: ssä sinun on luotava API-reitit /pages/api-kansioon. Next.js luo API-päätepisteet jokaiselle tämän kansion tiedostolle. Jos lisäät user.js: n hakemistoon /pages/api, Next.js luo päätepisteen osoitteessa http://localhost: 3000/api/käyttäjä.
Next.js API -perusreitillä on seuraava syntaksi.
viedäoletuksenatoimintokäsittelijä(req, res) {
res.status (200).json({ nimi: 'John Doe' })
}
Käsittelijätoiminto on vietävä, jotta se toimii.
API-reittien luominen
Luo uusi tiedosto nimeltä todo.js /pages/api kansio, jos haluat lisätä API-reitin tehtäväkohteille.
Todo-tietokannan pilkkaaminen
Jotta saat tehtävät, sinun on luotava GET-päätepiste. Yksinkertaisuuden vuoksi. Tämä opetusohjelma käyttää joukkoa tehtäväkohteita tietokannan sijaan, mutta voit käyttää tietokantaa, kuten MongoDB tai MySQL.
Luo tehtäväkohteet todo.js-tiedostoon sovelluksesi juurikansiossa ja lisää sitten seuraavat tiedot.
viedäkonst todos = [
{
id: 1,
tehdä: "Tee jotain mukavaa jollekulle, josta välitän",
valmistunut: totta,
käyttäjätunnus: 26,
},
{
id: 2,
tehdä: "Opettele ulkoa viisikymmentä osavaltiota ja niiden pääkaupungit",
valmistunut: väärä,
käyttäjätunnus: 48,
},
// muut tehtävät
];
Nämä tehtäväkohteet ovat DummyJSON-verkkosivustolta, a REST API valedataa varten. Tästä löydät tarkat tiedot DummyJSON todos -päätepiste.
Luo seuraavaksi API-reitti sisään /pages/api/todos.js ja lisää käsittelijätoiminto.
tuonti { tehtävät } alkaen "../../tehdä";viedätoimintokäsittelijä(req, res) {
konst { menetelmä } = req;
vaihtaa (menetelmä) {
tapaus "SAADA":
res.Tila(200).json(todos);
tauko;
tapaus "LÄHETTÄÄ":
konst { tehtävä, valmis } = req.body;
todos.työntää({
id: todos.pituus + 1,
tehdä,
valmis,
});
res.Tila(200).json(todos);
tauko;
oletuksena:
res.setHeader("Sallia", ["SAADA", "LÄHETTÄÄ"]);
res.status(405).end(`Menetelmä ${method} Ei sallittu`);
tauko;
}
}
Tämä reitti käsittelee GET- ja POST-päätepisteitä. Se palauttaa kaikki GET-pyynnön tehtävät ja lisää tehtävätietokantaan POST-pyynnön tehtävät. Muissa menetelmissä käsittelijä palauttaa virheen.
Kuluttavat API-reitit käyttöliittymässä
Olet luonut API-päätepisteen, joka palauttaa JSON-objektin, joka sisältää joukon tehtäviä.
Käytä API: a luomalla fetchTodos-niminen toiminto, joka hakee tiedot API-päätepisteestä. Funktio käyttää hakumenetelmää, mutta voit myös käytä Axiosta API-pyyntöjen tekemiseen. Kutsu sitten tämä toiminto, kun napsautat painiketta.
tuonti Pää alkaen "seuraava/pää";
tuonti { useState } alkaen "reagoi";viedäoletuksenatoimintoKoti() {
konst [todos, settodos] = useState([]);konst fetchTodos = asynk () => {
konst vastaus = odottaa hae("/api/todos");
konst data = odottaa vastaus.json();
settodos (data);
};
palata (
<div className={styles.container}>
<Pää>
<otsikko>Luo seuraava sovellus</title>
<metanimi="kuvaus" sisältö="Luo seuraava sovellus" />
<linkki rel="kuvake" href="/favicon.ico" />
</Head>
<pää>
<button onClick={fetchTodos}>Hanki tehtävät</button>
<ul>
{todos.map((tehtävä) => {
palata (
<li
style={{ color: `${todo.completed? "vihreä": "punainen"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Tämän katkelman luettelossa näkyvät tehtäväkohteet, kun ne noudetaan.
Luo POST-päätepisteelle uusi toiminto nimeltä saveTodo, joka tekee POST-pyynnön API: lle. Hakupyyntö tallentaa uuden tehtäväkohteen leipätekstiin ja palauttaa kaikki tehtäväkohteet, mukaan lukien uuden. SaveTodo-toiminto tallentaa ne sitten todos-tilaan.
konst saveTodo = asynk () => {
konst vastaus = odottaa hae("/api/todos", {
menetelmä: "LÄHETTÄÄ",
runko: JSON.stringify (uusiTodo),
otsikot: {
"Sisältötyyppi": "sovellus/json",
},
});
konst data = odottaa vastaus.json();
settodos (data);
};
Luo sitten lomake, jossa on tekstinsyöttöpalkki vastaanottaaksesi uuden tehtäväkohteen. Tämän lomakkeen lähetyskäsittelijätoiminto kutsuu saveTodo-funktiota.
tuonti Pää alkaen "seuraava/pää";
tuonti { useReducer, useState } alkaen "reagoi";
tuonti tyylejä alkaen "../styles/Home.module.css";viedäoletuksenatoimintoKoti() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
tehdä: "",
valmistunut: väärä,
});konst fetchTodos = asynk () => {
// fetchTodos
};
konst saveTodo = asynk (e) => {
konst vastaus = odottaa hae("/api/todos", {
menetelmä: "LÄHETTÄÄ",
runko: JSON.stringify (uusiTodo),
otsikot: {
"Sisältötyyppi": "sovellus/json",
},
});konst data = odottaa vastaus.json();
settodos (data);
};konst HandChange = (e) => {
setnewTodo({
tehdä: e.kohde.arvo,
});
};konst handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
tehdä: '',
});
};palata (
<div className={styles.container}>
<Pää>
<otsikko>Luo seuraava sovellus</title>
<metanimi="kuvaus" sisältö="Luo seuraava sovellus" />
<linkki rel="kuvake" href="/favicon.ico" />
</Head>
<pää>
// Hakee tehtäväkohteet napsautettaessa
<button onClick={fetchTodos}>Hanki tehtävät</button>
// Tallentaa uuden tehtäväkohteen lähetyksen yhteydessä
<lomake onSubmit={handleSubmit}>
<syöttötyyppi="teksti" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// listaa tehtävät}
</ul>
</main>
</div>
);
}
Käsittelijä lisää uuden tehtävän tietokantaan aina, kun käyttäjä lähettää lomakkeen. Lisäksi tämä toiminto päivittää todos-arvon API: lta saatujen tietojen avulla, mikä puolestaan lisää uuden tehtäväkohteen luetteloon.
API-reititys on vain yksi Next.js: n vahvuuksista
Olet nähnyt, kuinka rakennat ja käytät Next.js API -reittiä. Nyt voit luoda täyden pinon sovelluksen poistumatta Next.js-projektikansiosta. API-reititys on yksi Next.js: n monista eduista.
Next.js tarjoaa myös suorituskyvyn optimointeja, kuten koodin jakamista, laiskalatausta ja sisäänrakennettua CSS-tukea. Jos olet rakentamassa verkkosivustoa, jonka on oltava nopea ja SEO-ystävällinen, sinun kannattaa harkita Next.js: ää.
