Časy, keď ste museli pre svoj web vytvoriť samostatný backend, sú preč. Pomocou smerovania API založeného na súboroch Next.js si môžete uľahčiť život napísaním svojho API do projektu Next.js.
Next.js je meta-rámec React s funkciami, ktoré zjednodušujú proces vytvárania webových aplikácií pripravených na produkciu. Uvidíte, ako vytvoriť REST API v Next.js a spotrebovať dáta z tohto API na stránke Next.js.
Vytvorte projekt Next.js pomocou create-next-app
Pomocou nástroja create-next-app CLI môžete vytvoriť nový projekt Next.js. Nainštaluje potrebné balíčky a súbory, aby ste mohli začať s vytváraním aplikácie Next.js.
Spustite tento príkaz v termináli a vytvorte nový priečinok Next.js s názvom api-routes. Môže sa zobraziť výzva na inštaláciu aplikácie create-next-app.
npx vytvoriť-Ďalšie-app api-routes
Keď príkaz skončí, otvorte priečinok api-routes a začnite vytvárať trasy API.
Smerovanie API v Next.js
Trasy API bežia na serveri a majú mnoho použití, ako je ukladanie používateľských údajov do databázy alebo načítanie údajov z API bez zvýšenia Chyba politiky CORS.
V Next.js musíte vytvoriť trasy API v priečinku /pages/api. Next.js generuje koncové body API pre každý zo súborov v tomto priečinku. Ak do /pages/api pridáte user.js, Next.js vytvorí koncový bod na http://localhost: 3 000/api/používateľ.
Základná trasa Next.js API má nasledujúcu syntax.
exportpredvolenáfunkciupsovod(req, req) {
res.status (200).json({ názov: 'John Doe' })
}
Funkciu obsluhy musíte exportovať, aby fungovala.
Vytváranie trás API
Vytvorte nový súbor s názvom todo.js v /pages/api priečinok na pridanie trasy API pre položky úloh.
Zosmiešňovanie databázy úloh
Ak chcete získať úlohy, musíte vytvoriť koncový bod GET. Pre jednoduchosť. Tento tutoriál používa rad položiek úloh namiesto databázy, ale pokojne použite databázu ako MongoDB alebo MySQL.
Vytvorte položky úloh v todo.js v koreňovom priečinku vašej aplikácie a potom pridajte nasledujúce údaje.
exportkonšt todos = [
{
id: 1,
robiť: "Urobiť niečo pekné pre niekoho, na kom mi záleží",
dokončené: pravda,
userId: 26,
},
{
id: 2,
robiť: "Zapamätajte si päťdesiat štátov a ich hlavné mestá",
dokončené: falošný,
userId: 48,
},
// ďalšie úlohy
];
Tieto položky úloh pochádzajú z webovej stránky DummyJSON, a REST API pre falošné údaje. Presné údaje nájdete z tohto Koncový bod úloh DummyJSON.
Ďalej vytvorte trasu API /pages/api/todos.js a pridajte funkciu handlera.
importovať { todos } od "../../robiť";exportfunkciupsovod(req, req) {
konšt { metóda } = požiadavka;
prepínač (metóda) {
prípad "GET":
res.postavenie(200).json(todos);
prestávka;
prípad "POST":
konšt { todo, dokončené } = req.body;
todos.TAM({
id: todos.dĺžka + 1,
robiť,
dokončené,
});
res.postavenie(200).json(todos);
prestávka;
predvolená:
res.setHeader("Povoliť", ["GET", "POST"]);
res.status(405).koniec(„Spôsob ${method} Nie je povolené.");
prestávka;
}
}
Táto trasa spracováva koncové body GET a POST. Vráti všetky úlohy pre požiadavku GET a pridá položku úlohy do databázy úloh pre požiadavku POST. Pri iných metódach obsluha vráti chybu.
Spotreba trás API vo frontende
Vytvorili ste koncový bod API, ktorý vracia objekt JSON obsahujúci pole úloh.
Ak chcete využívať rozhranie API, vytvorte funkciu s názvom fetchTodos, ktorá načítava údaje z koncového bodu API. Funkcia používa metódu načítania, ale môžete tiež použite Axios na vytváranie požiadaviek API. Potom zavolajte túto funkciu kliknutím na tlačidlo.
importovať Hlava od "ďalší/hlava";
importovať { useState } od "reagovať";exportpredvolenáfunkciuDomov() {
konšt [todos, settodos] = useState([]);konšt fetchTodos = async () => {
konšt odpoveď = čakať načítať ("/api/úlohy");
konšt údaje = čakať response.json();
settodos (údaje);
};
vrátiť (
<div className={styles.container}>
<Hlava>
<titul>Vytvoriť ďalšiu aplikáciu</title>
<meta meno="popis" obsah ="Vygenerované vytvorením ďalšej aplikácie" />
<odkaz rel="ikonu" href="/favicon.ico" />
</Head>
<Hlavná>
<button onClick={fetchTodos}>Získajte úlohy</button>
<ul>
{todos.map((todo) => {
vrátiť (
<li
style={{ color: `${todo.completed? "zelená": "červená"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Zoznam v tomto úryvku zobrazuje položky úloh, keď sú načítané.
Pre koncový bod POST vytvorte novú funkciu s názvom saveTodo, ktorá odošle požiadavku POST do API. Požiadavka na načítanie uloží novú položku úlohy do tela a vráti všetky položky úlohy vrátane novej. Funkcia saveTodo ich potom uloží v stave todos.
konšt saveTodo = async () => {
konšt odpoveď = čakať načítať ("/api/úlohy", {
metóda: "POST",
telo: JSON.stringify (newTodo),
hlavičky: {
"Druh obsahu": "application/json",
},
});
konšt údaje = čakať response.json();
settodos (údaje);
};
Potom vytvorte formulár s panelom na zadávanie textu, aby ste dostali novú položku úlohy. Funkcia obsluhy odoslania tohto formulára zavolá funkciu saveTodo.
importovať Hlava od "ďalší/hlava";
importovať { useReducer, useState } od "reagovať";
importovať štýlov od "../styles/Home.module.css";exportpredvolenáfunkciuDomov() {
konšt [todos, settodos] = useState([]);konšt [newTodo, setnewTodo] = useState({
robiť: "",
dokončené: falošný,
});konšt fetchTodos = async () => {
// fetchTodos
};
konšt saveTodo = async (e) => {
konšt odpoveď = čakať načítať ("/api/úlohy", {
metóda: "POST",
telo: JSON.stringify (newTodo),
hlavičky: {
"Druh obsahu": "application/json",
},
});konšt údaje = čakať response.json();
settodos (údaje);
};konšt handleChange = (e) => {
setnewTodo({
robiť: e.cieľ.hodnota,
});
};konšt handleSubmit = (e) => {
e.preventPredvolené();
saveTodo();
setnewTodo({
robiť: '',
});
};vrátiť (
<div className={styles.container}>
<Hlava>
<titul>Vytvoriť ďalšiu aplikáciu</title>
<meta meno="popis" obsah ="Vygenerované vytvorením ďalšej aplikácie" />
<odkaz rel="ikonu" href="/favicon.ico" />
</Head>
<Hlavná>
// Po kliknutí získa položky úloh
<button onClick={fetchTodos}>Získajte úlohy</button>
// Po odoslaní uloží novú položku úlohy
<form onSubmit={handleSubmit}>
<typ vstupu ="text" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// zoznam úloh}
</ul>
</main>
</div>
);
}
Obslužný program pridá do databázy nové úlohy vždy, keď používateľ odošle formulár. Táto funkcia tiež aktualizuje hodnotu úloh pomocou údajov prijatých z rozhrania API, ktoré následne pridá novú položku úloh do zoznamu.
Smerovanie API je len jednou zo silných stránok Next.js
Videli ste, ako zostavujete a používate trasu Next.js API. Teraz môžete vytvoriť kompletnú aplikáciu bez toho, aby ste opustili priečinok projektu Next.js. Smerovanie API je jednou z mnohých výhod, ktoré Next.js poskytuje.
Next.js tiež ponúka optimalizáciu výkonu, ako je rozdelenie kódu, lenivé načítanie a vstavaná podpora CSS. Ak vytvárate webovú stránku, ktorá musí byť rýchla a SEO priateľská, mali by ste zvážiť Next.js.
