API эндпойнты в NextJS 13
Vložit
- čas přidán 3. 07. 2024
- NextJS позволяет создавать REST API эндпойнты для CRUD запросов со стороны клиентских компонентов. Разбираемся как это делается в NextJS 13.4 и какие вспомогательные инструменты предоставляет нам фреймворк.
GitHub github.com/michey85/next-blog...
Тайм-коды:
00:00 Анонс темы
00:53 Правила использования
03:29 Базовый пример
05:12 POST запросы и тело запроса
06:48 Извлечение get-параметров
10:39 Запросы на мутацию
13:18 Утилиты cookies, headers, redirect
17:08 Переменные окружения
20:25 Итоги
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep - Věda a technologie
![[38] Cookie vs LocalStorage vs SessionStorage | [Подготовка JS разработчика к интервью]](/img/n.gif)
Отличный видос, очень ждём продолжения. Было бы круто добавить graphQL, авторизацию на jwt токенах
Приятно слушать и воспринимать информацию. Спасибо
Чем дальше, тем всё легче и совершеннее. Это очень хорошие новости. 🥰
Благодарю Михаил! Обещаете - делаете! С нас 👍🏼 и комментарии)
Вот то, что было нужно!!!!! Благодарю тебя Михаил за твою работу, за четкое толкование эндпоинтов.
Классное видео по эндпоинтам NextJS! Спасибо=)
авторизацию и призму еще хотелось бы в этом плейлисте увидеть) спасибо вам!
Спасибо за Ваш труд!
Спасибо Михаил, как раз нужно было с эндпоинтами некста разобраться, и ты как в воду глядел) Спасибо дружище и жирный лайк как по расписанию!
спасибо за видео все четко, без воды👍
Михаил, спасибо вам за ваш труд и ваше видео. Смотрю вас уже второй год. Все очень нравится. Контент топ, подача - супер!!! Все подробно разъясняете, без вопросов можно все повторить вслед за вами в коде. Отличный видео по NEXT-13. Очень хочется полноценный курс, пусть хотя бы и платный.
Как всегда крутотень, ждем auth!
Супер, давай про SSG, ISR, SSR ...
Ждем ещё видно по нексту!)
Отличное видео!
Золотой контент 👍
Ща заценим ))
супер, спасибо
Спасибо!
спасибо!
Thank you
Супер! Ждём авторизацию
Ждем авторизацию) Спасибо за контент
Ура!!! 😊
Михаил было б классно обновить видео с Apollo Client, Graphql и Аpp router.
4,8 тыс просмотров и 326 лайков, за такой годный контент… я в шоке.
Лайк. Интересно еще как Next с QraphQL работает.
Почемуто я раньше на это видео не наткнулся. Для того чтобы сделать АПИ сначало городил огород с кастомным сервером для некста, получилась поная фигня. В итоге решил сделать отдельный АПИ на экспрессе. А оказывается в нексте уже из коробки есть весь необходимый функционал😅
Фейеноорд чемпион
черную тему в постман поставь это нереально смотреть
Zdravstvuyte, ne sovsem ponyal temu, zachem nam eto voobshe nujen?
Миш привет. Можешь снять ролик про использование tRPC в связке с react или nextjs ? На ru просторах инфы очень мало.
Никогда не работал с tRPC :) Ни на одном из проектов, где работал, даже не поднимался вопрос о его возможном использовании.
Ок. Очень специфичный кейс значит. Спасибо за ответ.@@mishanep
На вас надежда, комунити Михаила. Подскажите как можно переопределить вложенный layout. Что бы он не наследовался
В документации нету ?
Не совсем понял, зачем нам отдельно делать папки для api если мы может писать функции получение данных прямо в компоненте(page)?
Михаил вы еще говорите что через новое api можно безопастно делать запросы с приватными переменными а разве getServerSideProps не делает тоже самое?
Так и раньше можно было, я не делаю акцент, что так только в новом, просто показываю как сейчас построена работа фреймворка.
Касаемо актуальности, если у вас клиентский компонент, которому надо динамически обновлять содержимое, то апи эндпойнты имеют место быть. Если статика - серверные компоненты, что мы разбирали в первом видео цикла.
Михаил, подскажите пожалуйста, что у вас тема и какие иконки стоят?
Тема CodeSandbox, иконки от Material Icons.
@@mishanep Благодарю
@@mishanep кстати, не хотите в будущем записать видео про React Native?. заметил, что в вакансиях все чаще встречается
Какое расширение помогает отображать console.log в терминале VS ? Спасибо заранее
Это не про расширение. Если логика отработала на сервере, то и лог будет выводиться на серверном терминале (в данном случае локальном).
@@mishanepЯ наверняка что то опускаю, но нету у меня такого вывода в VS. Компонент идентичен с вашим. Что может быта причиной ?
@@Skvdev Значит то, что функция не выполнилась в которой console.log().
я все еще не понял как вызывать эти route внутри страниц или компонетов (которые тоже внутри страниц)
Так же, как к любому апи на бэкэнде, через fetch
Fetch(localhost:3000/api/адрес роута)
Правильно ли я понимаю что все что в папке api относится к бекенду?
И да и нет. Папку не обязательно называть api. Главное название самих файлов, вложенных в папки. Плюс бэкенд часть есть и в других местах, что разбиралась во вводном видео по Нексту.
@@mishanep спасибо большое Михаил)
Не совсем понятно практическое применение с бэком. Допустим у меня есть бэк на Node.js. Получается я просто эндпоинты прописываю на фронте, а не на бэке, только в этом отличие?
NextJS может использоваться как полноценный nodejs бэкенд. Внутри API хэндлеров могут быть запросы к базе данных - эта часть не уходит на клиент.
А ок, понятно. То есть у меня может быть какая-то бд, типа Mongo db или реляционная типа Postgre. И я могу писать прямо с фронта?
да, з нехта@@Ksushapi
да видео гораздо лучше доки, в доке в примерах даж я не вижу где сказано как достать params
мне кажется лучше использовать nestjs
мне кажется лучше использовать ассемблер
А к чему вообще писать на фронте ендпоинты , которые не взаимодействуют с датабазой ? Если нам надо лениво что-то подгружать , то мы можем использовать динамические импорты / react.lazy ? Или я упускаю какой-то ( какие-то ) другие кейсы использование , которые могут быть полезны ? Выглядит , честно говоря , как что-то абсолютно необязательное , мол использовать кое-как можно , но не совсем понятно зачем .
Вопрос не ясен. Эндпойнты - это бэкенд. И с базой может взаимодействовать.
Как вы лениво поиск хотите реализовать в данном случае?
@@mishanep, с дб может взаимодействовать , если дб будет подключена к фронтенду ( по крайней мере , я о других способах не осведомлен) , я признать сомневаюсь в оправданности такой архитектуры .Потому что в таком случае начинаешь задумываться , почему бы нам в принципе не отказаться от бекенда / не использовать его , например , в текущем примере.
Мы можем взять и когда нам понадобится импортировать те же сами posts , а потом отфильтровать их. В принципе сделать примерно тоже самое , что было сделано в запросе на взятие поста по query-параметру.
У нас же в любом случае в реализованном вами кейсе будет лететь запрос и этот запрос будет всё так же обрабатываться в рамках нашего приложения , где этот же массив постов будет отфильтрован , лишь после чего мы получим итоговое значение , как response .
Это так , теория , я признаться на практике ничего подобного не делал (в принципе не сталкивался с необходимостью или требованиями по отложенной загрузке), но в рамках теории не понимаю преимуществ , продемонстрированного вами подхода. Разве что он как-то помогает нам перераспределить нагрузку между браузером и node . Тут я , честно говоря , не силён и не совсем понимаю , какие конкретно процессы обрабатываются node в рамках React/Next-приложения.
Если я заблуждаюсь - будьте добры , дайте мне об этом знать , я буду крайне благодарен.
NextJS - это фуллстек фреймворк. У него есть часть, которая работает только на сервере, часть - только на клиенте, и смежные истории. Поэтому база данных к фронтенду никак не подключается. На клиент не пойдут даже npm-зависимости, если они были использованы только в серверной части. Next - больше про монолит. Но мы можем использовать бэкенд независимо и тогда уже делать через Некст запросы к бэкенду
@@mishanep , Благодарю за ответ. А вы не подскажете где можно найти какую-то конкретную информацию о том , как работает север в рамках react / next - приложения ?
То есть , как я понимаю у нас код исполняется на сервере ( в Node среде ) , но не совсем понимаю , как именно .
И какие операции по умолчанию выполняются в node на react. Ведь там у нас вроде как нет серверных компонентов или SSR методов ( в дефолтном варианте ) , но всё же какие-то манипуляции выполняются на стороне Node.js .
Не вижу смысла без бд это обьяснять
Нет проблем сделать с бд. Я решил не усложнять видео темой подключения к бд. А так - действие происходит на сервере, мы можем работать с базой.
Спасибо!