Как да изградите и използвате API в Next.js

Отминаха дните, когато трябваше да създадете отделен бекенд за уебсайта си. С базираното на Next.js API маршрутизиране можете да улесните живота си, като напишете своя API в проект Next.js.

Next.js е мета-рамка на React с функции, които опростяват процеса на изграждане на готови за производство уеб приложения. Ще видите как да създадете REST API в Next.js и да консумирате данните от този API на страница на Next.js.

Създайте проект Next.js с помощта на create-next-app

Можете да създадете нов проект Next.js с помощта на CLI инструмента create-next-app. Той инсталира необходимите пакети и файлове, за да започнете да създавате приложение Next.js.

Изпълнете тази команда в терминал, за да създадете нова папка Next.js, наречена api-routes. Може да получите подкана да инсталирате create-next-app.

npx създавам-следващия-app api-маршрути

Когато командата приключи, отворете папката api-routes, за да започнете да създавате API маршрутите.

API маршрутизиране в Next.js

API маршрутите се изпълняват на сървъра и имат много приложения като запазване на потребителски данни в база данни или извличане на данни от API без повдигане на

Грешка в правилата на CORS.

В Next.js трябва да създадете API маршрути в папката /pages/api. Next.js генерира крайни точки на API за всеки от файловете в тази папка. Ако добавите user.js към /pages/api, Next.js ще създаде крайна точка в http://localhost: 3000/api/потребител.

Базов маршрут на API на Next.js има следния синтаксис.

износпо подразбиранефункцияманипулатор(req, res) {
 res.status (200).json({ име: 'Джон Доу' })
}

Трябва да експортирате манипулаторната функция, за да работи.

Създаване на API маршрути

Създайте нов файл, наречен todo.js в /pages/api папка за добавяне на API маршрут за елементи със задачи.

Подигравка с базата данни Todo

За да получите задачите, трябва да създадете GET крайна точка. За простота. Този урок използва масив от елементи за задачи вместо база данни, но не се колебайте да използвате база данни като MongoDB или MySQL.

Създайте елементите todo в todo.js в основната папка на вашето приложение, след което добавете следните данни.

износконст todos = [
 {
 id: 1,
 да направя: "Направете нещо хубаво за някого, на когото държа",
 завършен: вярно,
 потребителски идентификатор: 26,
 },
 {
 ID: 2,
 да направя: "Запомнете петдесетте щата и техните столици",
 завършен: невярно,
 потребителски идентификатор: 48,
 },
// други задачи
];

Тези задачи са от уебсайта DummyJSON, a REST API за фиктивни данни. Можете да намерите точните данни от това Крайна точка на DummyJSON todos.

След това създайте API маршрута в /pages/api/todos.js и добавете функцията за обработка.

импортиране {todos} от "../../да направя";
износфункцияманипулатор(req, res) {
конст {метод} = req;
превключвател (метод) {
 случай "ВЗЕМЕТЕ":
рез.състояние(200).json(todos);
прекъсвам;
 случай "ПУБЛИКУВАНЕ":
конст {todo, завършено} = req.body;
todos.натискане({
документ за самоличност: todos.дължина + 1,
 да направя,
 завършен,
 });
рез.състояние(200).json(todos);
прекъсвам;
по подразбиране:
 res.setHeader("Позволява", ["ВЗЕМЕТЕ", "ПУБЛИКУВАНЕ"]);
 res.status(405).край(„Метод ${method} Не е позволено`);
прекъсвам;
 }
}

Този маршрут обработва крайните точки GET и POST. Той връща всички задачи за GET заявка и добавя елемент от задачи към базата данни със задачи за POST заявка. За други методи манипулаторът връща грешка.

Използване на API маршрути във фронтенда

Създали сте крайна точка на API, която връща JSON обект, съдържащ масив от задачи.

За да използвате API, създайте функция, наречена fetchTodos, която извлича данни от крайната точка на API. Функцията използва метода fetch, но вие също можете използвайте Axios, за да правите заявки за API. След това извикайте тази функция, когато щракнете върху бутон.

импортиране Глава от "следваща/глава";
импортиране {useState} от "реагира"; 
износпо подразбиранефункцияУ дома() {
конст [todos, settodos] = useState([]);
конст fetchTodos = асинхронен () => {
конст отговор = изчакайте извличане ("/api/todos");
конст данни = изчакайте response.json();
 settodos (данни);
 };
връщане (
<div className={styles.container}>
<Глава>
<заглавие>Създаване на следващо приложение</title>
<мета име="описание" съдържание="Генерирано от създаване на следващо приложение" />
<връзка rel="икона" href="/favicon.ico" />
</Head>
<основен>
<бутон onClick={fetchTodos}>Вземете задачи</button>
<ул>
 {todos.map((todo) => {
връщане (
<ли
 style={{ цвят: `${todo.completed? "зелено": "червен"}` }}
 ключ={todo.id}
>
 {todo.todo}:{todo.completed}.
</li>
 );
 })}
</ul>
</main>
</div>
 );
}

Списъкът в този фрагмент показва елементите със задачи, когато бъдат извлечени.

За крайната точка на POST създайте нова функция, наречена saveTodo, която прави POST заявка към API. Заявката за извличане съхранява новия елемент от задачата в тялото и връща всички елементи от задачата, включително новия. След това функцията saveTodo ги съхранява в състояние todos.

конст saveTodo = асинхронен () => {
конст отговор = изчакайте извличане ("/api/todos", {
 метод: "ПУБЛИКУВАНЕ",
 тяло: JSON.stringify (newTodo),
 заглавки: {
"Тип съдържание": "приложение/json",
 },
 });
конст данни = изчакайте response.json();
 settodos (данни);
};

След това създайте формуляр с лента за въвеждане на текст, за да получите новия елемент от задачи. Функцията за обработка на изпращане на този формуляр ще извика функцията saveTodo.

импортиране Глава от "следваща/глава";
импортиране {useReducer, useState} от "реагира";
импортиране стилове от "../styles/Home.module.css";
износпо подразбиранефункцияУ дома() {
конст [todos, settodos] = useState([]);
конст [newTodo, setnewTodo] = useState({
 да направя: "",
 завършен: невярно,
 });
конст fetchTodos = асинхронен () => {
// извличане на Todos
 };
конст saveTodo = асинхронен (e) => {
конст отговор = изчакайте извличане ("/api/todos", {
 метод: "ПУБЛИКУВАНЕ",
 тяло: JSON.stringify (newTodo),
 заглавки: {
"Тип съдържание": "приложение/json",
 },
 });
конст данни = изчакайте response.json();
 settodos (данни);
 };
конст handleChange = (e) => {
 setnewTodo({
да направя: д.мишена.стойност,
 });
 };
конст handleSubmit = (e) => {
д.preventDefault();
 saveTodo();
 setnewTodo({
 да направя: '',
 });
 };
връщане (
<div className={styles.container}>
<Глава>
<заглавие>Създаване на следващо приложение</title>
<мета име="описание" съдържание="Генерирано от създаване на следващо приложение" />
<връзка rel="икона" href="/favicon.ico" />
</Head>
<основен>
// Извлича елементите със задачи при щракване
<бутон onClick={fetchTodos}>Вземете задачи</button>
// Записва нова задача, когато бъде изпратена
<форма onSubmit={handleSubmit}>
<тип вход ="текст" onChange={handleChange} value={newTodo.todo} />
</form>
<ул>
 {// списък със задачи}
</ul>
</main>
</div>
 );
}

Манипулаторът добавя нова задача към базата данни всеки път, когато потребител изпрати формуляра. Освен това тази функция актуализира стойността на todos, като използва данните, получени от API, което от своя страна добавя новия елемент todo към списъка.

API маршрутизирането е само една от силните страни на Next.js

Видяхте как създавате и използвате Next.js API маршрут. Сега можете да създадете приложение с пълен стек, без да напускате папката на вашия проект Next.js. API маршрутизирането е едно от многото предимства, които Next.js предоставя.

Next.js също така предлага оптимизации на производителността, като разделяне на код, отложено зареждане и вградена CSS поддръжка. Ако изграждате уебсайт, който трябва да бъде бърз и удобен за SEO, трябва да помислите за Next.js.