Блог с 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 - Создаем отдельную страницу для статей.

Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка)

✔️Если хочешь изучать программирование со мной, не забудь подписаться :)

#nextjs #headlesscms #reactssr #reactapp #wisejs #typescript

Рекомендации по теме

Комментарии

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

rmnkot

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

VadimVoreNas

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

seoonlyRU

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

MoarDisorder

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

vlad-zfev

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

egorburunkov

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

sanek

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

larss

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

AleksandrNeo

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

ivanoliinyk

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

vitaliy

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

alisapogarskaya

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

ПыыфПыыфов

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

ilyaprotsenko

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

YuriKruglov

как пофиксить ошибку после yarn build?

Type error: Property 'title' does not exist on type '{} | {}'.
Property 'title' does not exist on type '{}'.

12 | <Head>
13 | <title>
> 14 | {article.fields.title}
| ^
15 | </title>
16 | </Head>
17 | <Container>
error Command failed with exit code 1.

aleksejsd

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

maxbogdan

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

Vasiliy_Bublikoff

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

Собственник-тк

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

sergey_c

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

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

Добавление контента с CMS в NextJS проект

Next JS быстрый курс SSR на React JS с нуля до деплоя

Wordpress Headless CMS, GraphQL, and Nextjs - Let's Build a Blog

Статический Блог на Next.js и Markdown

Создаём и деплоим собственный FULL STACK блог | NextJs + Sanity

Use Wordpress as a Headless CMS for Next JS

Next.js Blog Application with Tailwind CSS #shorts

Дружим WordPress с Nextjs. Передаем через GraphQL записи в приложение на Next.js...

Build a Blog With Next.js & Ghost

Next JS Вводный Курс #1 - Преимущества Next.js, обзор проекта, установка...

We built an INFINITELY scalable blog using Next.js and WordPress ($5 only)

Как использовать WordPress и Next.js в связке

Next.js с нуля

🍿 СТРИМ 👟 NIKE SHOP заполняем контент в cms, я content manager (strapi, next)...

Сайт-Портфолио с нуля до деплоя на: Next.js + TypeScript + Email.js + SASS + GSAP + Vercel...

#21: Integrating Contentful CMS with Next.js 13

Build a Notion Powered Blog w/ NextJS & TailwindCSS

Next.js. Полный курс

Next.js & Contentful Site Build Tutorial #1 - Intro & Setup

Next.js + Contentful minimal setup from scratch

🍿 СТРИМ 👟 NIKE SHOP генерация страниц для кроссовок, еще чуть-чуть и закончим проект...

Виды рендеринга в NextJS(SSR vs SSG)

Полный Full Stack курс ReactJS + NodeJS для начинающих за 4 часа! (MongoDB, Express, React, NodeJS)...