Как использовать маршруты 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
• Next.js против Gatsby против приложения create-react-app
• Как установить Next.js
• Связывание двух страниц в Next.js с помощью Link
• Динамический контент в Next.js с роутером
• Передача данных в компонент Next.js с помощью getInitialProps
• Стилизация компонентов Next.js с помощью CSS
• Предварительная загрузка содержимого в Next.js
• Использование роутера для обнаружения активной ссылки в Next.js
• Просмотрите источник, чтобы подтвердить, что SSR работает в Next.js
• Next.js: заполните тег заголовка настраиваемыми тегами
• Развертывание приложения Next.js прямо сейчас
• Next.js: запускать код только на стороне сервера или на стороне клиента в Next.js
• Развертывание приложения Next.js в рабочей среде
• Как анализировать пакеты приложений Next.js
• Ленивая загрузка модулей в Next.js
• Добавление компонента-оболочки в приложение Next.js
• Значки, добавленные Next.js в ваше приложение
• Пакеты приложений Next.js
• Как использовать маршрутизатор Next.js
• Как использовать маршруты API Next.js
• Как получить файлы cookie на стороне сервера в приложении Next.js
• Как изменить порт приложения Next.js