Tie laiki, kad vietnei bija jāizveido atsevišķa aizmugursistēma, ir pagājuši. Izmantojot Next.js faila API maršrutēšanu, varat atvieglot savu dzīvi, ierakstot savu API Next.js projektā.
Next.js ir React meta-ietvars ar funkcijām, kas vienkāršo ražošanai gatavu tīmekļa lietotņu izveides procesu. Jūs redzēsiet, kā izveidot REST API programmā Next.js un izmantot datus no šīs API lapā Next.js.
Izveidojiet Next.js projektu, izmantojot Create-next-app
Varat izveidot jaunu Next.js projektu, izmantojot Create-next-app CLI rīku. Tas instalē nepieciešamās pakotnes un failus, lai jūs varētu sākt veidot Next.js lietojumprogrammu.
Palaidiet šo komandu terminālī, lai izveidotu jaunu mapi Next.js ar nosaukumu api-routes. Jūs varat saņemt uzvedni instalēt Create-next-app.
npx izveidot-Nākamais-lietotņu api maršruti
Kad komanda ir pabeigta, atveriet mapi api-routes, lai sāktu API maršrutu izveidi.
API maršrutēšana pakalpojumā Next.js
API maršruti darbojas serverī, un tiem ir daudz lietojumu, piemēram, lietotāja datu saglabāšana datu bāzē vai datu iegūšana no API, nepalielinot CORS politikas kļūda.
Programmā Next.js ir jāizveido API maršruti mapē /pages/api. Next.js ģenerē API galapunktus katram šajā mapē esošajam failam. Ja pievienojat user.js mapei /pages/api, Next.js izveidos galapunktu vietnē http://localhost: 3000/api/lietotājs.
Pamata Next.js API maršrutam ir šāda sintakse.
eksportētnoklusējumafunkcijuapdarinātājs(req, res) {
res.status (200).json({nosaukums: 'Džons Dū' })
}
Lai tā darbotos, apdarinātāja funkcija ir jāeksportē.
API maršrutu izveide
Izveidojiet jaunu failu ar nosaukumu todo.js /pages/api mapi, lai pievienotu API maršrutu uzdevumu vienumiem.
Ņirgāšanās par Todo datu bāzi
Lai iegūtu uzdevumus, jums ir jāizveido GET galapunkts. Vienkāršības labad. Šajā apmācībā datu bāzes vietā tiek izmantots uzdevumu vienumu masīvs, taču varat brīvi izmantot datu bāzi, piemēram, MongoDB vai MySQL.
Izveidojiet uzdevumu vienumus failā todo.js savas lietojumprogrammas saknes mapē, pēc tam pievienojiet tālāk norādītos datus.
eksportētkonst todos = [
{
id: 1,
darīt: "Izdari kaut ko jauku kādam, kas man rūp",
pabeigts: taisnība,
lietotāja ID: 26,
},
{
id: 2,
darīt: "Iegaumējiet piecdesmit štatus un to galvaspilsētas",
pabeigts: viltus,
lietotāja ID: 48,
},
// citi uzdevumi
];
Šie uzdevumi ir no DummyJSON vietnes, a REST API lai iegūtu viltus datus. Šeit jūs varat atrast precīzus datus DummyJSON todos galapunkts.
Pēc tam izveidojiet API maršrutu /pages/api/todos.js un pievienojiet apdarinātāja funkciju.
imports {todos} no "../../darīt";eksportētfunkcijuapdarinātājs(req, res) {
konst { metode } = req;
slēdzis (metode) {
lietu "GŪT":
res.statuss(200).json(todos);
pārtraukums;
lietu "POSTĪT":
konst {todo, pabeigts} = req.body;
todos.spiediet({
id: todos.garums + 1,
darīt,
pabeigts,
});
res.statuss(200).json(todos);
pārtraukums;
noklusējuma:
res.setHeader("Atļaut", ["GŪT", "POSTĪT"]);
res.status(405.end(`Metode ${method} Nav atļauts');
pārtraukums;
}
}
Šis maršruts apstrādā GET un POST galapunktus. Tas atgriež visus GET pieprasījuma uzdevumus un pievieno uzdevumu datubāzei uzdevumu vienumu POST pieprasījumam. Citām metodēm apstrādātājs atgriež kļūdu.
Patērē API maršruti priekšgalā
Jūs esat izveidojis API galapunktu, kas atgriež JSON objektu, kas satur uzdevumu masīvu.
Lai izmantotu API, izveidojiet funkciju fetchTodos, kas izgūst datus no API galapunkta. Funkcija izmanto ieneses metodi, bet jūs varat arī izmantojiet Axios, lai veiktu API pieprasījumus. Pēc tam izsauciet šo funkciju, noklikšķinot uz pogas.
imports Galva no "nākamais/galva";
imports { useState } no "reaģēt";eksportētnoklusējumafunkcijuMājas() {
konst [todos, settodos] = useState([]);konst fetchTodos = asinhrons () => {
konst atbilde = gaidīt atnest("/api/todos");
konst dati = gaidīt response.json();
settodos (dati);
};
atgriezties (
<div className={styles.container}>
<Galva>
<virsraksts>Izveidot nākamo lietotni</title>
<meta nosaukums ="apraksts" saturs="Ģenerēts, izveidojot nākamo lietotni" />
<saite rel="ikonu" href="/favicon.ico" />
</Head>
<galvenais>
<poga onClick={fetchTodos}>Iegūstiet uzdevumus</button>
<ul>
{todos.map((todo) => {
atgriezties (
<li
style={{ color: `${todo.completed? "zaļš": "sarkans"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Sarakstā šajā fragmentā tiek parādīti uzdevumu vienumi, kad tie tiek ienesti.
POST galapunktam izveidojiet jaunu funkciju saveTodo, kas veic POST pieprasījumu API. Ieneses pieprasījums saglabā jauno uzdevumu vienumu pamattekstā un atgriež visus uzdevumu vienumus, tostarp jauno. Funkcija saveTodo pēc tam saglabā tos uzdevumu stāvoklī.
konst saveTodo = asinhrons () => {
konst atbilde = gaidīt atnest("/api/todos", {
metode: "POSTĪT",
korpuss: JSON.stringify (newTodo),
galvenes: {
"Satura veids": "lietojumprogramma/json",
},
});
konst dati = gaidīt response.json();
settodos (dati);
};
Pēc tam izveidojiet veidlapu ar teksta ievades joslu, lai saņemtu jauno uzdevuma vienumu. Šīs veidlapas iesniegšanas apstrādātāja funkcija izsauks funkciju saveTodo.
imports Galva no "nākamais/galva";
imports { useReducer, useState } no "reaģēt";
imports stilus no "../styles/Home.module.css";eksportētnoklusējumafunkcijuMājas() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
darīt: "",
pabeigts: viltus,
});konst fetchTodos = asinhrons () => {
// fetchTodos
};
konst saveTodo = asinhrons (e) => {
konst atbilde = gaidīt atnest("/api/todos", {
metode: "POSTĪT",
korpuss: JSON.stringify (newTodo),
galvenes: {
"Satura veids": "lietojumprogramma/json",
},
});konst dati = gaidīt response.json();
settodos (dati);
};konst handChange = (e) => {
setnewTodo({
darīt: e.target.vērtība,
});
};konst handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
darīt: '',
});
};atgriezties (
<div className={styles.container}>
<Galva>
<virsraksts>Izveidot nākamo lietotni</title>
<meta nosaukums ="apraksts" saturs="Ģenerēts, izveidojot nākamo lietotni" />
<saite rel="ikonu" href="/favicon.ico" />
</Head>
<galvenais>
// Noklikšķinot, tiek iegūti uzdevuma vienumi
<poga onClick={fetchTodos}>Iegūstiet uzdevumus</button>
// Iesniedzot, tiek saglabāts jauns uzdevuma vienums
<forma onSubmit={handleSubmit}>
<ievades veids="tekstu" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// uzskaitiet uzdevumus}
</ul>
</main>
</div>
);
}
Apdarinātājs datubāzei pievieno jaunu uzdevumu katru reizi, kad lietotājs iesniedz veidlapu. Turklāt šī funkcija atjaunina uzdevumu vērtību, izmantojot datus, kas saņemti no API, kas savukārt pievieno sarakstam jauno uzdevumu vienumu.
API maršrutēšana ir tikai viena no Next.js priekšrocībām
Jūs esat redzējis, kā veidojat un izmantojat Next.js API maršrutu. Tagad varat izveidot pilnu steku lietojumprogrammu, neizejot no Next.js projekta mapes. API maršrutēšana ir viena no daudzajām Next.js sniegtajām priekšrocībām.
Next.js piedāvā arī veiktspējas optimizāciju, piemēram, koda sadalīšanu, slinku ielādi un iebūvētu CSS atbalstu. Ja veidojat vietni, kurai ir jābūt ātrai un SEO draudzīgai, jums vajadzētu apsvērt Next.js.