Как использовать маршруты API Next.js

Изучите эту мощную технику, предоставляемую Next.js, для создания конечной точки API в приложении Next.js.

Помимо созданиямаршруты страниц, что означает, что страницы передаются в браузер как веб-страницы, Next.js может создаватьМаршруты API.

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

Маршруты API находятся под/pages/api/папка и сопоставлены с/apiконечная точка.

Эта функцияоченьполезно при создании приложений.

В этих маршрутах мы пишем код Node.js (а не код React). Это смена парадигмы, вы переходите от внешнего интерфейса к внутреннему, но очень плавно.

Скажите, что у вас есть/pages/api/comments.jsфайл, цель которого - вернуть комментарии к записи блога в формате JSON.

Допустим, у вас есть список комментариев, хранящихся вcomments.jsonфайл:

[
  {
    "comment": "First"
  },
  {
    "comment": "Nice post"
  }
]

Вот пример кода, который возвращает клиенту список комментариев:

import comments from './comments.json'

export default (req, res) => { res.status(200).json(feeds) }

Он будет слушать/api/commmentsURL для запросов GET, и вы можете попробовать вызвать его с помощью браузера:

Маршруты API также могут использоватьдинамическая маршрутизациякак страницы, используйте[]синтаксис для создания динамического маршрута API, например/pages/api/comments/[id].jsкоторый будет получать комментарии, относящиеся к идентификатору сообщения.

Внутри[id].jsвы можете получитьidценность, заглянув внутрьreq.queryобъект:

import comments from '../comments.json'

export default (req, res) => { res.status(200).json({ post: req.query.id, comments }) }

Вот вы можете увидеть приведенный выше код в действии:

На динамических страницах вам нужно будет импортироватьuseRouterизnext/router, затем получите объект маршрутизатора, используяconst router = useRouter(), и тогда мы сможем получитьidзначение с использованиемrouter.query.id.

На стороне сервера все проще, так как запрос привязан к объекту запроса.

Если вы выполняете запрос POST, все работает одинаково - все происходит через экспорт по умолчанию.

Чтобы отделить POST от GET и других HTTP-методов (PUT, DELETE), найдитеreq.methodценить:

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    default:
      res.status(405).end() //Method Not Allowed
      break
  }
}

В добавление кreq.queryиreq.methodмы уже видели, у нас есть доступ к файлам cookie, указавreq.cookies, тело запроса вreq.body.

Под капотами все это работает отМикро, библиотека, которая поддерживает асинхронные микросервисы HTTP, созданная той же командой, которая создала Next.js.

Вы можете использовать любое промежуточное ПО Micro в наших маршрутах API, чтобы добавить больше функциональности.

Скачать мою бесплатнуюСправочник Next.js


Больше следующих руководств: