NextJS 13 — Управляйте своим контентом с помощью StoryBlok CMS : чистый репозиторий для начинающих !

Эта статья посвящена моему варианту использования StoryBlok и моему стартовому репозиторию, готовому к производству. Я также поделюсь с вами тем, что входит в эту демо/стартер. Это поможет вам начать хорошо типизированный проект NextJS + StoryBlok, наряду с чистой настройкой Storybook и TailwindCSS.

TLDR (я знаю, что вы заняты):

Демонстрационная ссылка: https://next-js-13-storyblok-starter.vercel.app/
Репозиторий: https://github.com/Thisisjuke/nextjs-13-storyblok-starter
Прочитайте Пошаговое иллюстрированное руководство
В этой демонстрации используется StoryBlok CMS: https://www.storyblok.com/

Введение

Управление контентом занимает центральное место в современной сети. В каждом проекте, над которым я работал в последнее время, возникает этот теперь общий вопрос во время подготовки стека с заказчиком или обсуждения с технической командой:

Какую CMS будем использовать?

Какие были требования к сайту:

Легко управляется одним или двумя людьми.
Мало вещей, которые нужно обновлять ежедневно, но есть возможность изменять вещи и создавать страницы без необходимости разработки.
Сильный предварительный просмотр: предварительный просмотр изменений в производстве перед публикацией.
Низкая ежемесячная цена и «пожалуйста, не используйте Contentful».

Какие функции нужны команде разработчиков:

NextJS для Статической генерации и ISR.
Простота реализации Preview с помощью NextJS Preview Mod.
CMS на основе API (REST или GQL) с простым управлением отношениями между нашими различными объектами.

Итак, мы выбрали: https://www.storyblok.com/.

Что в репозитории?

Демонстрационные страницы с Header / Footer / HeadingBlok / TestimonialsSlider / SEO, управляемые StoryBlok CMS.
pages/[[...slug]].tsx, который обрабатывает все страницы вашего приложения: все Page ресурсы в каталоге Pages на CMS создадут новую страницу NextJS.
NextJS для Статической генерации и ISR. Это приложение готово к работе (и вызовы API оптимизированы с помощью getStaticProps ).
Обработка ошибок 404 и 500 с дизайном, исходящим от CMS, на основе: NextJS Doc — Обработка ошибок сервера.
Карта сайта создается автоматически sitemap.xml после каждой сборки.
TypeScript: Типы автогенерируются из CMS и используются на components/blocks/. Компоненты типизированы.
Базовая настройка TailwindCSS (3.2.1).
Простой атомарный дизайн внутри components/lib/ с несколькими компонентами на основе TailwindUI.
Настройка Сборник рассказов с моками next/image и next/router. Все компоненты имеют свою историю.

Начиная

Вы можете найти всю необходимую информацию в этом репозитории Github: https://github.com/Thisisjuke/nextjs-13-storyblok-starter

Существует пошаговое руководство по настройке StoryBlok CMS для этого репозитория: https://scribehow.com/shared/How_to_init_Storyblok_CMS_to_work_with_NextJScomponents/blocks/_Story_Blok_Starter__YBPqInJ0QdSZ1-1GW-vNeg

Вы также можете найти пошаговую транскрипцию этого руководства на Github в папке .doc: https://github.com/Thisisjuke/nextjs-13-storyblok-starter/blob/master/.doc/CMS -SETUP.md

Еще немного информации о кодовой базе

У StoryBlok есть свой NextJS Starter. Перед использованием https://github.com/Thisisjuke/nextjs-13-storyblok-starter рекомендуется попробовать и поиграть с ним. Этот репозиторий является расширенной версией стартовой версии StoryBlok NextJS.

Какие функции были добавлены?

Типизированные компоненты и блоки с помощью TypeScript с использованием https://www.npmjs.com/package/storyblok-generate-ts.
Обновленное приложение NextJS 13 с некоторыми передовыми практиками NextJS.
Настройка TailwindCSS как рекомендовано в документации.
Готовая работающая автоматически сгенерированная карта сайта с использованием https://www.npmjs.com/package/next-sitemap.
Истории установки и компонентов StoryBook, а также сторонние компоненты и блоки.
Работает в производстве StoryBlok bridge, с исправленными проблемами, для автоматического развертывания на Vercel.
gitlab-ci.yml для развертывания вашего приложения и StoryBook из частной Gitlab.
Предварительный просмотр в производственном режиме с использованием URL-адресов предварительного просмотра NextJS + StoryBlok.
Обновите производственный контент без пересборки приложения с помощью инкрементной статической регенерации NextJS.

Я не публиковал ни одного фрагмента кода, так что вот! Они представляют собой ключевые функции внутри кодовой базы.

_app.tsx :

const components = {
  'error-display-blok': ErrorDisplayBlok,
  'footer': FooterBlok,
  'header': HeaderBlok,
  'heading-blok': HeadingsBlok,
  'page': PageBlokWrapper,
  'testimonials-slider-blok': TestimonialsSliderBlok,
}

export const initStoryblok = (options = {}) =>
  storyblokInit({
    bridge: false,
    accessToken: process.env.REACT_STORYBLOK_ACCESS_TOKEN,
    apiOptions: { cache: { type: 'memory' } },
    use: [apiPlugin],
    components,
    ...options,
  })
initStoryblok()

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Component {...pageProps} />
  )
}

Вы должны управлять исчерпывающим списком, чтобы он соответствовал вашему «блоку StoryBlok» и вашему «блоку кода TSX». Затем вы инициализируете StoryBlok: вот и все 🎉!

components/bloks/HeaderBlok.tsx :

import { storyblokEditable } from '@storyblok/react'

export const HeaderBlok = ({ blok }: HeaderDefaultBlokProps) => {
  const { menu, ctaText, ctaUrl } = blok
  return (
    <Row
      {...storyblokEditable(blok)}
      key={blok._uid}
      className={'sticky pt-0 top-0 z-30'}
    >
      <Header
        links={menu}
        ctaText={ctaText}
        ctaUrl={getHrefFromStoryblokLink(ctaUrl)}
      />
    </Row>
  )
})

Каждый из ваших блоков (интерфейсные компоненты, отображаемые в вашем приложении) должен вызывать call...storyBlokEditable(block) . Теперь в вашей CMS вы можете наводить курсор на элементы и нажимать на пользовательский интерфейс компонента, чтобы перейти непосредственно к его содержимому 🎉 !

Краткое руководство по CMS

Этот тур будет простым, в основном по демонстрационному репозиторию. Если вам нужна дополнительная информация, вот ссылки на официальную документацию о некоторых основных темах и функциях:

Существует Библиотека блоков, в которой легко увидеть, какие у вас блоки, объекты и типы контента:

На скриншоте выше показаны блоки, доступные в демо-репозитории. Вы можете создавать страницы с ContentType Page, которые содержат Header, Seo_content, body (любой блок, например слайдер) и Footer.

Вот она Домашняя страница демо 🐸 ! https://next-js-13-storyblok-starter.vercel.app/

Как видите, есть:

header: содержит навигацию (массив ссылок, здесь только одна «Главная») и призыв к действию справа.
body : HeadingsBlock (заголовок + подзаголовок) и TestimonialsSliderBlock .
footer : с paragraph и sitemap (список страниц справа внизу).

Это 2 блока, доступных в демоверсии:

HeadingsBlock : отображать заголовок и подзаголовок.
TestimonialsSliderBlock : бесконечный горизонтальный скроллер, отображающий отзыв (ContentType = Testiomonial ).

Итак, как выглядит наша StoryBlok CMS?

Вы можете увидеть редактировать свойства справа и увидеть изменения в режиме реального времени!

Заключительное слово 🐸

Спасибо за ваше время, я надеюсь, что этот репозиторий даст вам хорошие советы о том, как запустить приложение StoryBlok в реальной жизни, с целью запустить его! Не стесняйтесь делиться, писать комментарии, добавлять задачи на Github и помечать репозиторий звездочкой, если он вам понравился!

Увидимся в следующий раз,
Артур ✌️