Pryč jsou doby, kdy jste museli pro svůj web vytvořit samostatný backend. Pomocí směrování API založeného na souborech Next.js si můžete usnadnit život tím, že své API napíšete do projektu Next.js.
Next.js je meta-rámec React s funkcemi, které zjednodušují proces vytváření webových aplikací připravených k produkci. Uvidíte, jak vytvořit REST API v Next.js a spotřebovat data z tohoto API na stránce Next.js.
Vytvořte projekt Next.js pomocí create-next-app
Nový projekt Next.js můžete vytvořit pomocí nástroje create-next-app CLI. Nainstaluje potřebné balíčky a soubory, abyste mohli začít s vytvářením aplikace Next.js.
Spuštěním tohoto příkazu v terminálu vytvořte novou složku Next.js s názvem api-routes. Můžete obdržet výzvu k instalaci create-next-app.
npx vytvořit-další-app api-routes
Po dokončení příkazu otevřete složku api-routes a začněte vytvářet trasy API.
Směrování API v Next.js
Trasy API běží na serveru a mají mnoho využití, jako je ukládání uživatelských dat do databáze nebo načítání dat z API bez zvýšení Chyba zásad CORS.
V Next.js musíte vytvořit trasy API ve složce /pages/api. Next.js generuje koncové body API pro každý ze souborů v této složce. Pokud do /pages/api přidáte user.js, Next.js vytvoří koncový bod na http://localhost: 3000/api/uživatel.
Základní trasa Next.js API má následující syntaxi.
vývoznívýchozífunkcepsovod(req, req) {
res.status (200).json({ název: 'John Doe' })
}
Aby funkce obslužné rutiny fungovala, musíte ji exportovat.
Vytváření tras API
Vytvořte nový soubor s názvem todo.js v /pages/api složku pro přidání trasy API pro položky úkolů.
Zesměšňování databáze úkolů
Chcete-li získat úkoly, musíte vytvořit koncový bod GET. Pro jednoduchost. Tento tutoriál používá místo databáze řadu položek úkolů, ale klidně použijte databázi jako MongoDB nebo MySQL.
Vytvořte položky úkolů v todo.js v kořenové složce vaší aplikace a poté přidejte následující data.
vývozníkonst todos = [
{
id: 1,
dělat: "Udělat něco hezkého pro někoho, na kom mi záleží",
dokončeno: skutečný,
userId: 26,
},
{
id: 2,
dělat: "Zapamatujte si padesát států a jejich hlavní města",
dokončeno: Nepravdivé,
userId: 48,
},
// další úkoly
];
Tyto položky úkolů pocházejí z webu DummyJSON, a REST API pro falešná data. Z toho můžete zjistit přesné údaje Koncový bod úkolů DummyJSON.
Dále vytvořte trasu API /pages/api/todos.js a přidejte funkci handler.
import {todos} z "../../dělat";vývoznífunkcepsovod(req, req) {
konst { metoda } = req;
přepínač (metoda) {
pouzdro "DOSTAT":
res.postavení(200).json(todos);
přestávka;
pouzdro "POŠTA":
konst { todo, dokončeno } = req.body;
todos.TAM({
id: todos.délka + 1,
dělat,
dokončeno,
});
res.postavení(200).json(todos);
přestávka;
výchozí:
res.setHeader("Dovolit", ["DOSTAT", "POŠTA"]);
res.status(405).konec(„Metoda ${method} Není povoleno.");
přestávka;
}
}
Tato trasa zpracovává koncové body GET a POST. Vrátí všechny úkoly pro požadavek GET a přidá položku úkolu do databáze úkolů pro požadavek POST. U ostatních metod vrací handler chybu.
Spotřeba tras API ve frontendu
Vytvořili jste koncový bod API, který vrací objekt JSON obsahující pole úkolů.
Chcete-li využívat rozhraní API, vytvořte funkci nazvanou fetchTodos, která načítá data z koncového bodu rozhraní API. Funkce používá metodu načítání, ale můžete také použijte Axios k vytváření požadavků API. Poté tuto funkci zavolejte, když kliknete na tlačítko.
import Hlava z "další/hlava";
import { useState } z "reagovat";vývoznívýchozífunkceDomov() {
konst [todos, settodos] = useState([]);konst fetchTodos = asynchronní () => {
konst odpověď = čekat vynést("/api/todos");
konst údaje = čekat response.json();
settodos (data);
};
vrátit se (
<div className={styles.container}>
<Hlava>
<titul>Vytvořit další aplikaci</title>
<meta jméno="popis" obsah ="Vygenerováno vytvořením další aplikace" />
<odkaz rel="ikona" href="/favicon.ico" />
</Head>
<hlavní>
<button onClick={fetchTodos}>Získejte úkoly</button>
<ul>
{todos.map((todo) => {
vrátit se (
<li
style={{ color: `${todo.completed? "zelená": "Červené"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Seznam v tomto úryvku zobrazuje položky úkolů, když jsou načteny.
Pro koncový bod POST vytvořte novou funkci nazvanou saveTodo, která vytvoří požadavek POST na rozhraní API. Požadavek na načtení uloží novou položku úkolu do těla a vrátí všechny položky úkolu včetně nového. Funkce saveTodo je pak uloží ve stavu todos.
konst saveTodo = asynchronní () => {
konst odpověď = čekat vynést("/api/todos", {
metoda: "POŠTA",
tělo: JSON.stringify (newTodo),
záhlaví: {
"Typ obsahu": "aplikace/json",
},
});
konst údaje = čekat response.json();
settodos (data);
};
Poté vytvořte formulář s panelem pro zadávání textu, abyste obdrželi novou položku úkolu. Funkce obslužné rutiny odeslání tohoto formuláře zavolá funkci saveTodo.
import Hlava z "další/hlava";
import { useReducer, useState } z "reagovat";
import styly z "../styles/Home.module.css";vývoznívýchozífunkceDomov() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
dělat: "",
dokončeno: Nepravdivé,
});konst fetchTodos = asynchronní () => {
// fetchTodos
};
konst saveTodo = asynchronní (e) => {
konst odpověď = čekat vynést("/api/todos", {
metoda: "POŠTA",
tělo: JSON.stringify (newTodo),
záhlaví: {
"Typ obsahu": "aplikace/json",
},
});konst údaje = čekat response.json();
settodos (data);
};konst handleChange = (e) => {
setnewTodo({
dělat: E.cílová.hodnota,
});
};konst handleSubmit = (e) => {
E.preventDefault();
saveTodo();
setnewTodo({
dělat: '',
});
};vrátit se (
<div className={styles.container}>
<Hlava>
<titul>Vytvořit další aplikaci</title>
<meta jméno="popis" obsah ="Vygenerováno vytvořením další aplikace" />
<odkaz rel="ikona" href="/favicon.ico" />
</Head>
<hlavní>
// Po kliknutí načte položky úkolů
<button onClick={fetchTodos}>Získejte úkoly</button>
// Po odeslání uloží novou položku úkolu
<form onSubmit={handleSubmit}>
<typ vstupu ="text" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// seznam úkolů}
</ul>
</main>
</div>
);
}
Obslužná rutina přidá nový úkol do databáze pokaždé, když uživatel odešle formulář. Tato funkce také aktualizuje hodnotu úkolů pomocí dat přijatých z rozhraní API, které zase přidá novou položku úkolu do seznamu.
Směrování API je jen jednou ze silných stránek Next.js
Viděli jste, jak vytváříte a používáte trasu Next.js API. Nyní můžete vytvořit celou sadu aplikací, aniž byste opustili složku projektu Next.js. Směrování API je jednou z mnoha výhod, které Next.js poskytuje.
Next.js také nabízí optimalizace výkonu, jako je dělení kódu, líné načítání a vestavěná podpora CSS. Pokud vytváříte web, který musí být rychlý a SEO přátelský, měli byste zvážit Next.js.