Блог с CMS на NextJS, React, Contentful и typescript. Блог с использованием SSR.
HTML-код
- Опубликовано: 22 май 2024
- Создаем блог с 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...
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка)
✔️Если хочешь изучать программирование со мной, не забудь подписаться :)
ruclips.net/channel/UCOxq...
✔️Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
#nextjs #headlesscms #reactssr #reactapp #wisejs #typescript
ну тут с ходу лайк от вебмастера и сеошника СЕООНЛИ
спасибо, давай больше видео по данной теме !!
Будет)
круто, информативно сразу по нескольким технологиям, много мелких нюансов уточнил. жду некст видео по этой теме и сср)
Спасибо, будет)
Хороший разбор возможностей next js. Только в видео показан не SSR, а SSG подход к созданию сайта☝🏻
Спасибо за видео!
Спасибо, будет время просмотрю полностью. Комментарий поддержки))
Спасибо за поддержку!
Спасибо !
привет
Интересный контент
Побольше typescript'а, пожалуйста
Спасибо! Сделаю по typescript.
Запишите пожалуйста обучающее видео про toolkit . Подробное, без спешки. В идеале, уделить внимание работе toolkit+Saga+react+redux
никогда не понимал, зачем сага в тулките, если он имеет превосходные api по работе с запросами, причем нативные
Redux сложнее чем RTK
Огромное спасибо за проделанную работу, очень интересно смотреть и слушать! Я как раз изучаю NextJS и хотел найти что-то, что позволит использовать NextJS + CMS. Думал про NextJS + WP, но тогда, кажется, пропадает возможность использовать плагины после подключения NextJS и будет ли работать SSR с WP? Хотелось бы больше информации и практики с Contentful + NextJS13, буду очень благодарен! Лайк, подписка.👍💪😎
Крутяк! Подскажи, пожалуйста, как ещё three.js прикрутить к этому? Т.е. например в посты блога, где статьи чтобы ещё 3D можно было вставить.
В cms можно хранить json config.
Планируешь дальше снимать ролики?) Хороший материал у тебя, планирую много посмотреть
Добрый день. Очень хорошее видео. Хотел бы спросить по поводу самой Contentful . На ней можно делать только всякие сайтики типо блогов, витрин и тд или можно как то сделать интернет магазин с личным кабинетом и регистрацией? и как примерно такое реализовать?
Это только контент - статика.
@@wisejs То есть для уже чего то крупного вроде магазина или площадки нужно будет использовать уже что то серьезнее типо Strapi?
Или свой бекенд.
я задеплоил проект но почему мне не приходить обновленые данные с Contentful, в локалхосте все ок. а в деплои нет
Насколько правильно вытягивать сам article по slug? Это нормальная практика для продакш продуктов?
Конечно. Ещё и СЕОшники спасибо скажут.
@@wisejs Выходит это как uuid. Сам contentful следит за уникальностью slug или за этим должен следить разработчик?
Круто, было бы сделать более обширный урок с большими плюшками или еще лучше с wordpress + react(next.js), так очень мало контента по данной теме
извращенец)
На данный момент reactstrap не поддерживает ssr, поэтому падают ошибки. Каждый компонент из reactstrap оборачивать в dynamic с ssr: false + как-то мудрить с декларацией типов - не вариант. Как предлагаешь обойти этот случай?
Привет, а как создавать модель для вещей, котрый есть НА КАЖДОЙ странице (навигация, футер и тп.) ?
Не совсем понимаю вопрос.
@@wisejs ты создаёшь тип материала "Главная страница", а я думаю как сделать чтобы один тип материала (Header например) отправлялся ВСЕГДА в json. Ну чтобы не делать для каждой страницы - повторяющиейся блоки (лого и тп.) нужно вынести в отдельный тип материала. По идеи там как то reference (ссылку-привязку) можно сделать.
как пофиксить ошибку после 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 не дает зарегистрироваться у себя. Это санкции?
привет, видимо так. Не дает зарегистрироваться на Контентфул. Может быть ты уже нашел альтернативу?
@@vadicus6534 "Нашел" - я девушка ))) установила orbot (vpn). Но по уроку у меня все ломается и решила по другим урокам заниматься и искать альтернативы внешним сервисам.
Мне не донца понятно. Получается, что здесь будет зависимость от облачного хранилища, которое хранится "где-то там"? Как-то не секьюрно получается.
Мда.. А когда ты от базы зависишь секьюрно?
@@wisejs , хм, а разьве нет? Вот есть провайдер(в РФ) и он дал виртуалку с вэб сервером и бд. Всё хотя бы в одном месте. Хотя бы понимаешь, где все данные хранятся и тебе просто так не отрубят к ним доступ. Может я слишком заморачиваюсь, но если заблокируют ip, то непонятно что делать. Сейчас это вполне может быть.
@@wisejs , дополню, что непонятно, что будет с этим фреймворком через несколько лет и сколько он будет хранить данные используемые на сайте.
А в Nextjs используется redux, redux toolkit? Или там эта логика пишется иначе? Если да, то как, и проще ли? (а то честно говоря, не нравится мне редаксовская логика))
какой смысл всего этого, если при загрузке на сервер (vercel например) это все статика
cms сам писал или это готовое решение ?
Конечно же готовое решение)
Еще бы мультиязычность прикрутить сюда
CMS поддержтивает даже в бесплатной версии 2 языка, так что легко)
Contentful что ли заблочили в РФ. Никак не могу зарегаться, аксес форбиден
А что случилось?
@@wisejs что-то случилось :)