Как создать динамические маршруты API в Next.js

Next.js - это фреймворк, основанный на React, который позволяет разработчикам создавать полноценные веб-приложения, расширяя последние возможности React. Next помогает добавлять дополнительные функции и оптимизации в ваши React приложения, такие как статическая генерация сайта (SSG), рендеринг на стороне сервера (SSR), автоматическое разделение и связывание кода, а также динамические маршруты API.

Next.js – это фреймворк на базе React, который позволяет разработчикам создавать веб-приложения полного стека, расширяя последние возможности React.

Next помогает добавить дополнительные функции и оптимизации к вашим React-приложениям, такие как статическая генерация сайта (SSG), серверный рендеринг (SSR), автоматическое разделение и сборка кода, а также динамический маршрутизатор API.

В этой статье вы узнаете о динамических маршрутах API в Next.js: что это такое, как их создавать и как расширить их функциональность.

Что такое маршруты API?

Прежде чем вы узнаете, что такое маршрут API, вам следует знать, что такое маршрут и что такое API.

Маршрут – это один путь вложенных папок. Next.js использует маршрутизатор страниц для навигации по различным страницам в веб-приложении. Каждый файл в папке страниц (pages) кода приложения Next.js представляет собой страницу в веб-приложении.

Например, если вы создадите файл checkout.js в папке страниц (pages) и посетите URL “your-app’s-domain-name/checkout” в вашем браузере, вы увидите содержимое файла checkout.js, отображенное.

API (сокращение от application programming interface) служит средством общения между двумя компьютерами или программными обеспечениями. В веб-приложении API обеспечивает коммуникацию между клиентом и сервером.

Маршрут API – это URL, который направляет входящие запросы от клиента к соответствующему ресурсу сервера, который будет обрабатывать запросы.

Маршруты API в Next.js позволяют вам создавать конечные точки API в виде безсерверных функций Node.js. Эти конечные точки позволяют вам выполнять запросы HTTPS и обмениваться данными с базой данных.

Как создать маршрут API

Для создания маршрута API вам нужно создать папку с названием API в папке страниц (pages). Любой файл в директории /pages/api будет распознан как маршрут API, а не как страница.

Например, вы можете создать папку с названием API в папке страниц (pages), а затем создать файл с названием start.js внутри него со следующим кодом:

// pages/api/start.jsexport default function handler(req, res) {  res.status(200).json({ message: 'Запрос успешен' });}

Теперь у вас есть маршрут API. Вы можете получить доступ к этому маршруту API через следующий URL: /api/start. Вы можете использовать его для обработки HTTP-запроса и отправки ответа клиенту.

Аргумент запроса (req) является экземпляром входящего HTTP-сообщения плюс несколько предварительно созданных промежуточных программ. Аргумент ответа (res) является экземпляром ответа сервера HTTP плюс несколько вспомогательных функций.

Вы можете создать маршрут API для обработки только одного HTTP-метода.Для этого вам нужно создать новый файл с названием get.js. Затем вы можете добавить следующий код в файл:

// pages/api/get.jsexport default function handler(req, res) {  if (req.method === 'GET') {  	res.status(200).json({ message: 'Это GET-запрос' });  } else {  	res.status(405).json({ message: 'Метод не разрешен' });  }}

Доступ к этому маршруту API можно получить по этому URL: /api/get, и он будет обрабатывать только запросы HTTP GET.

Вы также можете создать маршрут API для обработки более чем одного HTTP-метода. Чтобы сделать это, создайте новый файл с названием all.js и поместите в него следующий код:

// pages/api/all.jsfunction handler(req, res) {  if (req.method === 'GET') {  	// Обработка GET-запроса  	res.status(200).json({ message: 'Это GET-запрос' });  } else if (req.method === 'POST') {  	// Обработка POST-запроса  	res.status(200).json({ message: 'Это POST-запрос' });  } else if (req.method === 'PUT') {  	// Обработка PUT-запроса  	res.status(200).json({ message: 'Это PUT-запрос' });  } else (req.method === 'DELETE') {  	// Обработка DELETE-запроса  	res.status(200).json({ message: 'Это DELETE-запрос' });  }}

Доступ к этому маршруту API можно получить по этому URL: /api/all, и он может обрабатывать четыре HTTP-метода (GET, POST, PUT и DELETE).

Как создавать динамические маршруты API

Next.js позволяет разработчикам создавать динамические маршруты. Динамические маршруты – это маршруты, имена сегментов которых неизвестны заранее. Они создаются на основе динамических данных.

Динамический маршрут API – это форма динамического маршрута, позволяющая вам создавать конечные точки API с динамическими сегментами в пути маршрута.

Эти сегменты заполняются во время запроса или предварительно рендерятся во время сборки. Они также могут быть кэшированы браузером, что может улучшить производительность для часто посещаемых страниц. Это делает их хорошим выбором для приложений, которые ожидают большой трафик.

Динамический синтаксис маршрутов

У Next.js есть специальный синтаксис для создания динамических API-маршрутов. Next.js позволяет создавать динамические API-маршруты, заключая имя файла в квадратные скобки.

Чтобы создать динамический API-маршрут для API библиотеки, который получает данные автора с динамическими ID, вы можете начать с создания новой папки с именем authors, а затем создать файл с именем [id].js и добавить следующий код:

// api/authors/[id].jsexport default function handler(req, res) {  const { id } = req.query;    if (req.method === 'GET') {  	res.status(200).json({ id, message: 'Данные автора успешно получены' });  }}

API-маршрут для приведенного выше кода будет /author/[id], и если в него будет передан параметр { id: '234' }, он будет соответствовать URL: /author/234.

Вы можете настроить свой динамический API-маршрут для обработки различных HTTP методов. Для этого удалите код в папке [id].js и замените его на следующий код:

// api/authors/[id].jsexport default function handler(req, res) {  const { id } = req.query;    if (req.method === 'GET') {  	res.status(200).json({ id, message: 'Данные автора успешно получены' });  } else if (req.method === 'POST') {  	res.status(200).json({ id, message: 'Данные автора успешно отправлены' });  } else if (req.method === 'PUT') {  	res.status(200).json({ id, message: 'Данные автора успешно обновлены' });  } else if (req.method === 'DELETE') {  	res.status(200).json({ id, message: 'Данные автора успешно удалены' });  }}

Сегменты для всех случаев

Вы также можете передавать подпараметры в свои динамические API-маршруты. Для этого вы можете расширить ваш динамический API-маршрут, чтобы он мог перехватывать все последующие сегменты, переданные ему, добавив многоточие перед именем файла в квадратных скобках. Это гарантирует, что API-маршруты смогут получать более одного подпараметра.

Для создания динамического API-маршрута, который перехватывает все сегменты, создайте папку с именем store и в этой папке создайте файл с именем [...gadgets].js. Затем добавьте следующий код:

// api/store/[...gadgets].jsexport default function handler(req, res) {  const { gadget } = req.query;    if (req.method === 'GET') {  	res.status(200).json({ id, message: 'Данные успешно получены' });  }}

API-маршрут для приведенного выше кода будет pages/api/store/[...gadgets].js. Если в него будет передан параметр { gadget: ['phones', 'iphones', 'iphone15'] }, он будет соответствовать URL: /store/phones или /store/phones/iphones или /store/phones/iphones/iphone15.

Необязательные сегменты для всех случаев

Вы можете сделать динамический API-маршрут для сегментов для всех случаев необязательным. Когда вы делаете его необязательным, он сможет соответствовать не только всем последующим сегментам пути URL, но и основному пути URL.

Чтобы сделать динамический API-маршрут с необязательными последующими сегментами для всех случаев, которые мы видели в предыдущем разделе, добавьте к имени файла квадратные скобки внутри квадратных скобок, например: [[...store]].js. Необязательные сегменты для всех случаев смогут соответствовать не только URL вида: /store/phones или /store/phones/iphones или /store/phones/iphones/iphone15, но также и URL /store.

Заключение

Эта статья помогла вам понять динамические API-маршруты в Next.js, включая то, что они являются, как их использовать и как их создавать.