Используем наш любимый фреймворк JAMstack для создания API!

NextJS быстро становится основным фреймворком для создания веб-страниц, которые либо обслуживаются статически, либо генерируются на стороне сервера. Но многие веб-сайты хотели бы использовать API для извлечения данных из баз данных по команде и во многих других целях.

В этой статье я буду использовать NextJS для создания простой веб-страницы React и буду использовать Axios для простого извлечения данных из нашего API. Axios является необязательным, но очень чистым способом выполнения HTTP-запросов. Давайте начнем.

Настройка

Настроить проект с помощью Next очень просто. Нам просто нужно установить несколько пакетов NPM, создать несколько простых файлов и несколько папок. Давайте быстро сделаем это, выполнив следующие команды.

npm i react react-dom next
npm i axios

Затем создайте несколько файлов и папок, пока у вас не будет следующей настройки.

/pages/
    index.js
    /api/
        function.js
package.json

/pages/index.js будет выглядеть так.

Это очень минимальный файл React, который просто покажет «Hello world!» когда мы его запускаем. Мы также импортируем Axios на потом.

Файл function.js будет иметь примерно такой же формат.

Наконец, нам нужно обновить scripts в файле package.json для запуска проектов NextJS.

Вы должны иметь возможность запустить проект, запустив npm run dev в своем терминале. Перейдите к localhost:3000, и вас должно приветствовать сообщение Hello world.

API

Итак, вы фактически уже создали API, который должен быть доступен по адресу localhost:3000/api/function , где function — это имя файла скрипта в этой папке.

Скрипты API имеют доступ к параметрам req и res, как и при использовании ExpressJS.

Давайте изменим index.js, чтобы получить что-то из API.

Мы просто добавляем функцию, которая вызывает API с помощью Axios и записывает выходной объект в консоль.

Резюме

Эта статья содержит много лишнего, поэтому давайте быстро вспомним, как создать API.

NextJS использует папки для своей структуры. В папку pages помещаются ваши веб-страницы, а в папку pages/api/ вы можете добавлять сценарии, которые будут действовать как API.

Эти сценарии API имеют доступ к объектам request и response, которые можно использовать для получения тела HTTP-запроса, отправки кодов состояния и многого другого.

Используя Axios, вы можете легко вызывать эти API из веб-страницы, запущенной из того же проекта NextJS.

Заключение

Прежде всего, дайте мне знать, что вы думаете о добавлении резюме в конце статьи, я мог бы добавлять его чаще.

NextJS — отличный фреймворк для простых сайтов, с ним мне больше всего нравится работать, и я до сих пор узнаю о нем что-то новое, когда использую его для разных проектов. Создание API — один из них.

Большое спасибо за прочтение и хорошего дня.

Поддержите меня, поддержав Medium и став участником. Это очень помогает мне, не требует дополнительных затрат, и вы можете читать столько статей на Medium, сколько захотите!

Подпишитесь на меня в Твиттере, чтобы не отставать от меня.

Посмотрите мою последнюю коллекцию NFT здесь.