Блог с 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
круто, информативно сразу по нескольким технологиям, много мелких нюансов уточнил. жду некст видео по этой теме и сср)
@wisejs
2 жыл бұрын
Спасибо, будет)
Спасибо за видео!
Спасибо, будет время просмотрю полностью. Комментарий поддержки))
@wisejs
2 жыл бұрын
Спасибо за поддержку!
спасибо, давай больше видео по данной теме !!
@wisejs
2 жыл бұрын
Будет)
Хороший разбор возможностей next js. Только в видео показан не SSR, а SSG подход к созданию сайта☝🏻
ну тут с ходу лайк от вебмастера и сеошника СЕООНЛИ
Спасибо !
Запишите пожалуйста обучающее видео про toolkit . Подробное, без спешки. В идеале, уделить внимание работе toolkit+Saga+react+redux
@yockymai
Жыл бұрын
никогда не понимал, зачем сага в тулките, если он имеет превосходные api по работе с запросами, причем нативные
@igixprffikiberg2636
11 ай бұрын
Redux сложнее чем RTK
привет Интересный контент Побольше typescript'а, пожалуйста
@wisejs
2 жыл бұрын
Спасибо! Сделаю по typescript.
Огромное спасибо за проделанную работу, очень интересно смотреть и слушать! Я как раз изучаю NextJS и хотел найти что-то, что позволит использовать NextJS + CMS. Думал про NextJS + WP, но тогда, кажется, пропадает возможность использовать плагины после подключения NextJS и будет ли работать SSR с WP? Хотелось бы больше информации и практики с Contentful + NextJS13, буду очень благодарен! Лайк, подписка.👍💪😎
Крутяк! Подскажи, пожалуйста, как ещё three.js прикрутить к этому? Т.е. например в посты блога, где статьи чтобы ещё 3D можно было вставить.
@wisejs
2 жыл бұрын
В cms можно хранить json config.
Планируешь дальше снимать ролики?) Хороший материал у тебя, планирую много посмотреть
Круто, было бы сделать более обширный урок с большими плюшками или еще лучше с wordpress + react(next.js), так очень мало контента по данной теме
@yockymai
Жыл бұрын
извращенец)
Добрый день. Очень хорошее видео. Хотел бы спросить по поводу самой Contentful . На ней можно делать только всякие сайтики типо блогов, витрин и тд или можно как то сделать интернет магазин с личным кабинетом и регистрацией? и как примерно такое реализовать?
@wisejs
2 жыл бұрын
Это только контент - статика.
@vitaliy794
2 жыл бұрын
@@wisejs То есть для уже чего то крупного вроде магазина или площадки нужно будет использовать уже что то серьезнее типо Strapi?
@wisejs
2 жыл бұрын
Или свой бекенд.
На данный момент reactstrap не поддерживает ssr, поэтому падают ошибки. Каждый компонент из reactstrap оборачивать в dynamic с ssr: false + как-то мудрить с декларацией типов - не вариант. Как предлагаешь обойти этот случай?
Насколько правильно вытягивать сам article по slug? Это нормальная практика для продакш продуктов?
@wisejs
2 жыл бұрын
Конечно. Ещё и СЕОшники спасибо скажут.
@allusio
2 жыл бұрын
@@wisejs Выходит это как uuid. Сам contentful следит за уникальностью slug или за этим должен следить разработчик?
как пофиксить ошибку после 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.
я задеплоил проект но почему мне не приходить обновленые данные с Contentful, в локалхосте все ок. а в деплои нет
Привет, а как создавать модель для вещей, котрый есть НА КАЖДОЙ странице (навигация, футер и тп.) ?
@wisejs
2 жыл бұрын
Не совсем понимаю вопрос.
@dmitriybalamozhnov9424
2 жыл бұрын
@@wisejs ты создаёшь тип материала "Главная страница", а я думаю как сделать чтобы один тип материала (Header например) отправлялся ВСЕГДА в json. Ну чтобы не делать для каждой страницы - повторяющиейся блоки (лого и тп.) нужно вынести в отдельный тип материала. По идеи там как то reference (ссылку-привязку) можно сделать.
А в Nextjs используется redux, redux toolkit? Или там эта логика пишется иначе? Если да, то как, и проще ли? (а то честно говоря, не нравится мне редаксовская логика))
cms сам писал или это готовое решение ?
@wisejs
2 жыл бұрын
Конечно же готовое решение)
какой смысл всего этого, если при загрузке на сервер (vercel например) это все статика
Contentful не дает зарегистрироваться у себя. Это санкции?
@vadicus6534
Жыл бұрын
привет, видимо так. Не дает зарегистрироваться на Контентфул. Может быть ты уже нашел альтернативу?
@alisapogarskaya
Жыл бұрын
@@vadicus6534 "Нашел" - я девушка ))) установила orbot (vpn). Но по уроку у меня все ломается и решила по другим урокам заниматься и искать альтернативы внешним сервисам.
Мне не донца понятно. Получается, что здесь будет зависимость от облачного хранилища, которое хранится "где-то там"? Как-то не секьюрно получается.
@wisejs
2 жыл бұрын
Мда.. А когда ты от базы зависишь секьюрно?
@sergey_c
2 жыл бұрын
@@wisejs , хм, а разьве нет? Вот есть провайдер(в РФ) и он дал виртуалку с вэб сервером и бд. Всё хотя бы в одном месте. Хотя бы понимаешь, где все данные хранятся и тебе просто так не отрубят к ним доступ. Может я слишком заморачиваюсь, но если заблокируют ip, то непонятно что делать. Сейчас это вполне может быть.
@sergey_c
2 жыл бұрын
@@wisejs , дополню, что непонятно, что будет с этим фреймворком через несколько лет и сколько он будет хранить данные используемые на сайте.
Еще бы мультиязычность прикрутить сюда
@wisejs
2 жыл бұрын
CMS поддержтивает даже в бесплатной версии 2 языка, так что легко)
Contentful что ли заблочили в РФ. Никак не могу зарегаться, аксес форбиден
@wisejs
2 жыл бұрын
А что случилось?
@user-cw9ev9dq4v
2 жыл бұрын
@@wisejs что-то случилось :)