Блог с CMS на NextJS, React, Contentful и typescript. Блог с использованием SSR.

Создаем блог с CMS на React, NextJS и typescript. Блог с контентом в Contentful CSM и SSR/SSG отрисовку на стороне приложения. Разбираемся в основах Nextjs: routing, getStaticProps, getServerSideProps. Настраиваем Contentful Headless CMS. Используем typescript и генерацию типов исходя из контента.
Таймкоды:
00:00 - Вступление. Обзор работы приложения.
02:13 - Создаем Nextjs приложение.
05:16 - Роутинг в Nextjs. Пререндеринг страниц getStaticProps vs getServerSideProps.
11:59 - Создание профиля и настройка Contentful CMS. Создание content-type.
14:51 - Связываем приложение с CMS. Получаем и выводим данные.
20:55 - Генерируем typescript типы из Contentful.
25:14 - Обрисовывает главную страницу. Загружаем изображение в CMS.
31:22 - Создаем контент тайны и статьи блога в CMS.
34:04 - Выводим статьи на главную страницу.
41:08 - Создаем отдельную страницу для статей.
Код: github.com/maks1mp/nextjs-con...
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка)
✔️Если хочешь изучать программирование со мной, не забудь подписаться :)
kzread.info/dron/Oxq.html...
✔️Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
#nextjs #headlesscms #reactssr #reactapp #wisejs #typescript

Пікірлер: 55

  • @VadimVoreNas
    @VadimVoreNas2 жыл бұрын

    круто, информативно сразу по нескольким технологиям, много мелких нюансов уточнил. жду некст видео по этой теме и сср)

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо, будет)

  • @fleshdroppp6063
    @fleshdroppp60632 жыл бұрын

    Спасибо за видео!

  • @379sanek
    @379sanek2 жыл бұрын

    Спасибо, будет время просмотрю полностью. Комментарий поддержки))

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо за поддержку!

  • @rmnkot
    @rmnkot2 жыл бұрын

    спасибо, давай больше видео по данной теме !!

  • @wisejs

    @wisejs

    2 жыл бұрын

    Будет)

  • @MoarDisorder
    @MoarDisorder Жыл бұрын

    Хороший разбор возможностей next js. Только в видео показан не SSR, а SSG подход к созданию сайта☝🏻

  • @seoonlyRU
    @seoonlyRU2 жыл бұрын

    ну тут с ходу лайк от вебмастера и сеошника СЕООНЛИ

  • @frozeninside5004
    @frozeninside50042 жыл бұрын

    Спасибо !

  • @vlad-zf1ev
    @vlad-zf1ev2 жыл бұрын

    Запишите пожалуйста обучающее видео про toolkit . Подробное, без спешки. В идеале, уделить внимание работе toolkit+Saga+react+redux

  • @yockymai

    @yockymai

    Жыл бұрын

    никогда не понимал, зачем сага в тулките, если он имеет превосходные api по работе с запросами, причем нативные

  • @igixprffikiberg2636

    @igixprffikiberg2636

    11 ай бұрын

    Redux сложнее чем RTK

  • @egorburunkov3842
    @egorburunkov38422 жыл бұрын

    привет Интересный контент Побольше typescript'а, пожалуйста

  • @wisejs

    @wisejs

    2 жыл бұрын

    Спасибо! Сделаю по typescript.

  • @larss2772
    @larss277211 ай бұрын

    Огромное спасибо за проделанную работу, очень интересно смотреть и слушать! Я как раз изучаю NextJS и хотел найти что-то, что позволит использовать NextJS + CMS. Думал про NextJS + WP, но тогда, кажется, пропадает возможность использовать плагины после подключения NextJS и будет ли работать SSR с WP? Хотелось бы больше информации и практики с Contentful + NextJS13, буду очень благодарен! Лайк, подписка.👍💪😎

  • @YuriKruglov
    @YuriKruglov2 жыл бұрын

    Крутяк! Подскажи, пожалуйста, как ещё three.js прикрутить к этому? Т.е. например в посты блога, где статьи чтобы ещё 3D можно было вставить.

  • @wisejs

    @wisejs

    2 жыл бұрын

    В cms можно хранить json config.

  • @DoSmth
    @DoSmth Жыл бұрын

    Планируешь дальше снимать ролики?) Хороший материал у тебя, планирую много посмотреть

  • @ivanoliinyk8404
    @ivanoliinyk8404 Жыл бұрын

    Круто, было бы сделать более обширный урок с большими плюшками или еще лучше с wordpress + react(next.js), так очень мало контента по данной теме

  • @yockymai

    @yockymai

    Жыл бұрын

    извращенец)

  • @vitaliy794
    @vitaliy7942 жыл бұрын

    Добрый день. Очень хорошее видео. Хотел бы спросить по поводу самой Contentful . На ней можно делать только всякие сайтики типо блогов, витрин и тд или можно как то сделать интернет магазин с личным кабинетом и регистрацией? и как примерно такое реализовать?

  • @wisejs

    @wisejs

    2 жыл бұрын

    Это только контент - статика.

  • @vitaliy794

    @vitaliy794

    2 жыл бұрын

    @@wisejs То есть для уже чего то крупного вроде магазина или площадки нужно будет использовать уже что то серьезнее типо Strapi?

  • @wisejs

    @wisejs

    2 жыл бұрын

    Или свой бекенд.

  • @ilyaprotsenko1023
    @ilyaprotsenko1023 Жыл бұрын

    На данный момент reactstrap не поддерживает ssr, поэтому падают ошибки. Каждый компонент из reactstrap оборачивать в dynamic с ssr: false + как-то мудрить с декларацией типов - не вариант. Как предлагаешь обойти этот случай?

  • @allusio
    @allusio2 жыл бұрын

    Насколько правильно вытягивать сам article по slug? Это нормальная практика для продакш продуктов?

  • @wisejs

    @wisejs

    2 жыл бұрын

    Конечно. Ещё и СЕОшники спасибо скажут.

  • @allusio

    @allusio

    2 жыл бұрын

    @@wisejs Выходит это как uuid. Сам contentful следит за уникальностью slug или за этим должен следить разработчик?

  • @aleksejsd1340
    @aleksejsd1340 Жыл бұрын

    как пофиксить ошибку после yarn build? Type error: Property 'title' does not exist on type '{} | {}'. Property 'title' does not exist on type '{}'. 12 | 13 | > 14 | {article.fields.title} | ^ 15 | 16 | 17 | error Command failed with exit code 1.

  • @maxbogdan9298
    @maxbogdan9298 Жыл бұрын

    я задеплоил проект но почему мне не приходить обновленые данные с Contentful, в локалхосте все ок. а в деплои нет

  • @dmitriybalamozhnov9424
    @dmitriybalamozhnov94242 жыл бұрын

    Привет, а как создавать модель для вещей, котрый есть НА КАЖДОЙ странице (навигация, футер и тп.) ?

  • @wisejs

    @wisejs

    2 жыл бұрын

    Не совсем понимаю вопрос.

  • @dmitriybalamozhnov9424

    @dmitriybalamozhnov9424

    2 жыл бұрын

    @@wisejs ты создаёшь тип материала "Главная страница", а я думаю как сделать чтобы один тип материала (Header например) отправлялся ВСЕГДА в json. Ну чтобы не делать для каждой страницы - повторяющиейся блоки (лого и тп.) нужно вынести в отдельный тип материала. По идеи там как то reference (ссылку-привязку) можно сделать.

  • @user-lf6bl7jf3p
    @user-lf6bl7jf3p8 ай бұрын

    А в Nextjs используется redux, redux toolkit? Или там эта логика пишется иначе? Если да, то как, и проще ли? (а то честно говоря, не нравится мне редаксовская логика))

  • @awenn2015
    @awenn20152 жыл бұрын

    cms сам писал или это готовое решение ?

  • @wisejs

    @wisejs

    2 жыл бұрын

    Конечно же готовое решение)

  • @Vasiliy_Bublikoff
    @Vasiliy_Bublikoff Жыл бұрын

    какой смысл всего этого, если при загрузке на сервер (vercel например) это все статика

  • @alisapogarskaya
    @alisapogarskaya Жыл бұрын

    Contentful не дает зарегистрироваться у себя. Это санкции?

  • @vadicus6534

    @vadicus6534

    Жыл бұрын

    привет, видимо так. Не дает зарегистрироваться на Контентфул. Может быть ты уже нашел альтернативу?

  • @alisapogarskaya

    @alisapogarskaya

    Жыл бұрын

    @@vadicus6534 "Нашел" - я девушка ))) установила orbot (vpn). Но по уроку у меня все ломается и решила по другим урокам заниматься и искать альтернативы внешним сервисам.

  • @sergey_c
    @sergey_c2 жыл бұрын

    Мне не донца понятно. Получается, что здесь будет зависимость от облачного хранилища, которое хранится "где-то там"? Как-то не секьюрно получается.

  • @wisejs

    @wisejs

    2 жыл бұрын

    Мда.. А когда ты от базы зависишь секьюрно?

  • @sergey_c

    @sergey_c

    2 жыл бұрын

    @@wisejs , хм, а разьве нет? Вот есть провайдер(в РФ) и он дал виртуалку с вэб сервером и бд. Всё хотя бы в одном месте. Хотя бы понимаешь, где все данные хранятся и тебе просто так не отрубят к ним доступ. Может я слишком заморачиваюсь, но если заблокируют ip, то непонятно что делать. Сейчас это вполне может быть.

  • @sergey_c

    @sergey_c

    2 жыл бұрын

    @@wisejs , дополню, что непонятно, что будет с этим фреймворком через несколько лет и сколько он будет хранить данные используемые на сайте.

  • @vladyslavvovk
    @vladyslavvovk2 жыл бұрын

    Еще бы мультиязычность прикрутить сюда

  • @wisejs

    @wisejs

    2 жыл бұрын

    CMS поддержтивает даже в бесплатной версии 2 языка, так что легко)

  • @user-cw9ev9dq4v
    @user-cw9ev9dq4v2 жыл бұрын

    Contentful что ли заблочили в РФ. Никак не могу зарегаться, аксес форбиден

  • @wisejs

    @wisejs

    2 жыл бұрын

    А что случилось?

  • @user-cw9ev9dq4v

    @user-cw9ev9dq4v

    2 жыл бұрын

    ​@@wisejs что-то случилось :)