Прошли те времена, когда вам приходилось создавать отдельный бэкэнд для вашего сайта. С маршрутизацией API на основе файлов Next.js вы можете упростить свою жизнь, написав свой 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 имеет следующий синтаксис.
экспортпо умолчаниюфункцияобработчик(запрос, разрешение) {
res.status (200).json({имя: 'Джон Доу' })
}
Вы должны экспортировать функцию обработчика, чтобы она работала.
Создание маршрутов API
Создайте новый файл с именем todo.js в /pages/api папку, чтобы добавить маршрут API для элементов списка дел.
Насмешка над базой данных Todo
Чтобы получить todos, вы должны создать конечную точку GET. Для простоты. В этом руководстве вместо базы данных используется массив элементов todo, но не стесняйтесь использовать базы данных, такие как MongoDB или MySQL.
Создайте элементы todo в todo.js в корневой папке вашего приложения, затем добавьте следующие данные.
экспортконстанта дела = [
{
идентификатор: 1,
делать: "Сделай что-нибудь приятное для того, кто мне небезразличен",
завершенный: истинный,
идентификатор пользователя: 26,
},
{
идентификатор: 2,
делать: "Запомните пятьдесят штатов и их столицы",
завершенный: ЛОЖЬ,
идентификатор пользователя: 48,
},
// другие задачи
];
Эти задачи взяты с веб-сайта DummyJSON, ОТДЫХА API для фиктивных данных. Вы можете найти точные данные из этого Конечная точка DummyJSON todos.
Затем создайте маршрут API в /pages/api/todos.js и добавьте функцию обработчика.
Импортировать { дела } от "../../делать";экспортфункцияобработчик(запрос, разрешение) {
константа {метод} = требуется;
выключатель (метод) {
случай "ПОЛУЧАТЬ":
разрешение.положение дел(200).json(дела);
перерыв;
случай "ПОЧТА":
константа { задача завершена } = req.body;
дела.толкать({
идентификатор: дела.длина + 1,
делать,
завершенный,
});
разрешение.положение дел(200).json(дела);
перерыв;
по умолчанию:
res.setHeader("Позволять", ["ПОЛУЧАТЬ", "ПОЧТА"]);
рез.статус(405).конец(`Метод ${метод} Не разрешено`);
перерыв;
}
}
Этот маршрут обрабатывает конечные точки GET и POST. Он возвращает все задачи для запроса GET и добавляет элемент задачи в базу данных задач для запроса POST. Для других методов обработчик возвращает ошибку.
Использование маршрутов API во внешнем интерфейсе
Вы создали конечную точку API, которая возвращает объект JSON, содержащий массив задач.
Чтобы использовать API, создайте функцию fetchTodos, которая извлекает данные из конечной точки API. Функция использует метод выборки, но вы также можете использовать Axios для выполнения запросов к API. Затем вызывайте эту функцию при нажатии кнопки.
Импортировать Голова от "следующий/главный";
Импортировать { состояние использования } от "реагировать";экспортпо умолчаниюфункцияДом() {
константа [todos, settodos] = useState([]);константа fetchTodos = асинхронный () => {
константа ответ = Ждите принести("/api/дела");
константа данные = Ждите ответ.json();
сеттодос (данные);
};
возвращаться (
<div className={styles.container}>
<Голова>
<заголовок>Создать следующее приложение</title>
<мета имя ="описание" содержание ="Создано путем создания следующего приложения" />
<ссылка отн="икона" ссылка="/favicon.ico" />
</Head>
<основной>
<кнопка onClick={fetchTodos}>Получить задачи</button>
<ул>
{todos.map((todo) => {
возвращаться (
<ли
style={{ color: `${todo.completed? "зеленый": "красный"}` }}
ключ = {todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Список в этом фрагменте отображает элементы задач при их извлечении.
Для конечной точки POST создайте новую функцию с именем saveTodo, которая отправляет запрос POST к API. Запрос на выборку сохраняет новый элемент задачи в теле и возвращает все элементы задачи, включая новый. Затем функция saveTodo сохраняет их в состоянии todos.
константа сохранитьTodo = асинхронный () => {
константа ответ = Ждите принести("/api/дела", {
метод: "ПОЧТА",
тело: JSON.stringify (новыйTodo),
заголовки: {
"Тип содержимого": "приложение/json",
},
});
константа данные = Ждите ответ.json();
сеттодос (данные);
};
Затем создайте форму с панелью ввода текста, чтобы получить новый элемент списка дел. Функция обработчика отправки этой формы вызовет функцию saveTodo.
Импортировать Голова от "следующий/главный";
Импортировать { useReducer, useState } от "реагировать";
Импортировать стили от "../стили/Home.module.css";экспортпо умолчаниюфункцияДом() {
константа [todos, settodos] = useState([]);константа [newTodo, setnewTodo] = useState({
делать: "",
завершенный: ЛОЖЬ,
});константа fetchTodos = асинхронный () => {
// fetchTodos
};
константа сохранитьTodo = асинхронный (е) => {
константа ответ = Ждите принести("/api/дела", {
метод: "ПОЧТА",
тело: JSON.stringify (новыйTodo),
заголовки: {
"Тип содержимого": "приложение/json",
},
});константа данные = Ждите ответ.json();
сеттодос (данные);
};константа handleChange = (e) => {
setnewTodo({
делать: е.цель.ценить,
});
};константа handleSubmit = (e) => {
е.preventDefault();
сохранитьTodo();
setnewTodo({
делать: '',
});
};возвращаться (
<div className={styles.container}>
<Голова>
<заголовок>Создать следующее приложение</title>
<мета имя ="описание" содержание ="Создано путем создания следующего приложения" />
<ссылка отн="икона" ссылка="/favicon.ico" />
</Head>
<основной>
// Извлекает элементы списка дел при нажатии
<кнопка onClick={fetchTodos}>Получить задачи</button>
// Сохраняет новый элемент списка задач при отправке
<форма onSubmit={handleSubmit}>
<тип ввода="текст" onChange={handleChange} значение={newTodo.todo} />
</form>
<ул>
{// список задач}
</ul>
</main>
</div>
);
}
Обработчик добавляет новую задачу в базу данных каждый раз, когда пользователь отправляет форму. Кроме того, эта функция обновляет значение задачи, используя данные, полученные от API, который, в свою очередь, добавляет новый элемент задачи в список.
Маршрутизация через API — лишь одна из сильных сторон Next.js
Вы видели, как вы строите и используете маршрут API Next.js. Теперь вы можете создать полнофункциональное приложение, не выходя из папки проекта Next.js. Маршрутизация API — одно из многих преимуществ, которые предоставляет Next.js.
Next.js также предлагает оптимизации производительности, такие как разделение кода, отложенная загрузка и встроенная поддержка CSS. Если вы создаете веб-сайт, который должен быть быстрым и оптимизированным для SEO, вам следует рассмотреть Next.js.
