Привет всем!
Я работал над простым сайд-проектом, где у меня была потребность во флагах стран, и наткнулся на библиотеку npm, которая предоставляла данные на основе
- Название страны
- Национальность
- iso2Code
- iso3Code
Эта библиотека предоставляет функции, которые возвращают необходимые данные.
Вы можете ознакомиться с репозиторием Github здесь.
И я подумал, почему бы мне просто не обернуть каждую функциональность в бессерверную функцию и развернуть ее в Vercel.
Здесь я не буду подробно описывать работу бессерверной функции. Мне кажется, что этот блог — просто начало пути к освоению бессерверных функций.
Давайте начнем.
Создаем новое приложение Next.js. Документ рекомендует использовать create-next-app, который все настроит для нас.
npx create-next-app@latest
После завершения установки запустите npm run dev, чтобы запустить сервер разработки.
Наше приложение будет запущено в http://localhost:3000, давайте посетим его, чтобы посмотреть наше приложение.
Я изменил pages/index.js, чтобы сделать начальный экран простым, который отображает только приветствие, а остальной код остался прежним.
С этим покончено, давайте перейдем к бессерверным функциям.
Итак, по сути, бессерверная функция — это кусок кода, функция, которая принимает запрос и получает ответ.
Она может быть написана на разных языках бэкенда.
Я выбрал этот язык — Javascript, мать всех языков. 🔥
Next.js поддерживает бессерверные функции по умолчанию, и вы можете добавить свои экспортируемые функции в каталог /api в корне нашего проекта, точнее в каталог pages/api при использовании Next.js.
Базовая структура бессерверной функции выглядит примерно так:
Любой запрос или параметры, которые мы отправляем, будут находиться внутри объекта request. Мы скоро перейдем к нему.
Используя запрос, мы можем выполнить любую операцию и вернуть ответ.
Давайте рассмотрим самый простой пример: в библиотеке Country Flags есть функция, которая возвращает все страны и их данные.
Создайте новый файл в директории pages/api под названием getAllCountriesData.js и добавьте приведенный ниже код.
import { countries } from "country-flags-svg";
export default function handler(_req_, _res_) {
_res_.status(200).json({ countries });
}
Теперь в файле pages/index.js используем приведенную выше функцию.
Это простой сетевой запрос. Я использую Axios. Давайте создадим асинхронную функциюgetAllCountries.
URL может быть изменен в зависимости от среды (при необходимости).
Ответ функции будет выглядеть следующим образом.
Массив данных о странах с соответствующим URL изображения флага.
Давайте рассмотрим другую бессерверную функцию, которая принимает параметр запроса и выдает в ответ данные о конкретной стране, например, название страны.
Создадим еще один файл в pages/api под названием getFlagUrlByCountryName.js, и бессерверная функция будет выглядеть примерно так:
И мы можем сделать вызов API примерно так:
Ответ будет выглядеть примерно так.
В дальнейшем мы можем создавать бессерверные функции для других функций, доступных в разделе API библиотеки country-flags.
Вы можете найти то же самое здесь, вы также можете продублировать и развернуть его в своем аккаунте Vercel, если хотите использовать его. 🙂
Как выглядит использование развернутой версии:
Давайте протестируем в Postman. Я развернул свою бессерверную функцию здесь.
- По национальности — https://country-flags-topaz.vercel.app/api/getCountryByNationality
2. По имени — https://country-flags-topaz.vercel.app/api/getFlagUrlByCountryName
3. По коду ISO2 — https://country-flags-topaz.vercel.app/api/getFlagUrlByISO2Code
4. По коду ISO3 — https://country-flags-topaz.vercel.app/api/getFlagUrlByISO3Code
5. Все страны — https://country-flags-topaz.vercel.app/api/getAllCountries
Это Картик из Timeless.
Если вы нашли эту статью полезной, напишите мне в комментариях, я буду рад узнать ваше мнение. Спасибо 🙂
Если вы обнаружили какие-либо трудности или видите что-то, что можно было бы сделать лучше, пожалуйста, не стесняйтесь добавлять свои комментарии!