The document discusses Storyblok CMS and how it can be used with Next.js. Some key points: - Storyblok CMS allows non-technical users to build landing pages from predefined components and developers to collaborate asynchronously on new components. - With Storyblok, content is modeled as the whole website layout rather than just text. It delivers JSON data to render pages. - Storyblok provides features like live preview, internationalization utilities, and an image service. - The presentation demonstrates modeling data in Storyblok, receiving it in Next.js, and coding the app to iterate over Storyblok data and map it to components to create pages dynamically.

1. Uszanowanko Programowanko
Storyblok CMS + Next.js

2. Łukasz Tyszkiewicz
Frontend Developer @ TSH
Traveling, skateboarding, plants & simply being
Creative coding with a sprinkle of animations and
stuff
https://github.com/luksari

3. Agenda
1
Background
2
Storyblok CMS
3
Coding stuff

4. Business background
● Building landing pages by non technical people from
the predefined components
● Easy to learn
● Streamlined process of deploying websites to the
production environment
● Asynchronous work with technical people on new
components
● Customizable components

5. Technical background
● Content is not only the text or assets
● Content is the whole website layout
● Rendering JSON formatted data
● Live preview of the built page
��

6. Example
components

7. Atomic Design

8. JAMStack
● Javascript + Api + HTML Markup
● Performant
● Static site generation (SSG or ISR if you do it correctly 󰣻)
● Maintainability
● Wide choice of hosting, no server, static files
https://jamstack.org/

9. Storyblok CMS - Features
● Live Preview
● Internationalization utilities (i18n)
● Copy&Paste features

10. Storyblok CMS - Features
● Storyblok Image Service
https://www.storyblok.com/docs/image-service
● Datasources, Tags, Workflows
● Assets hosting

11. Storyblok CMS - Features
● Great docs and technology hub,
● Framework Agnostic
https://www.storyblok.com/technologies
GraphQl REST
https://www.storyblok.com/docs/graphql-api https://www.storyblok.com/docs/api/content-delivery/v2
https://www.storyblok.com/docs

12. Besides that it is simply fresh and fast
growing ecosystem

13. Storyblok CMS - How do we model the data?

14. Storyblok CMS - What do we receive?

15. Storyblok CMS - How do we code it?
Getting paths for all the pages
Getting the data for the page

16. Storyblok CMS - How do we code it?
Some logic regarding internationalization and image service

17. Storyblok CMS - How do we code it?
Get the components done

18. Storyblok CMS - How do we code it?
Iterating over the data from Storyblok and mapping it to
components

19. Storyblok CMS - What will we create?

20. Let’s create a page

21. Not exactly but let’s pretend it was

22. Coding - What will we create?

23. Coding - How will we create it?
● Storyblok + Next boilerplate available on my github
https://github.com/luksari/uszanowanko-storyblokowanko
● Few already created styles
● Creating module in Storyblok
● Corresponding component in React app with below configuration
● Deploy it on Vercel
● Or run it locally

24. Coding - Let’s go!

25. Hope so that was not like this

26. Storyblok CMS - Is it really that awesome?
● Pros
○ Cheaper alternative
○ Great tech hub
○ Live Preview
○ Customizable, almost every paid feature can be achieved by
simple data modelling
○ Multiple plans
○ Really powerful
○ Easy to understand
● Cons
○ Fresh, still evolving technology
○ Not so consistent API
○ Paid game-changing features
○ Everything might be customizable, but it is time consuming
○ Version 1 UI/UX is a little bit buggy
○ Hard to master

27. Useful links
● https://www.storyblok.com/tc/nextjs - Next.JS + Storyblok Hub
● https://github.com/luksari/uszanowanko-storyblokowanko - Presentation Next.JS + Storyblok
repository
● https://github.com/storyblok/awesome-storyblok - Set of useful things connected with Storyblok
● https://www.storyblok.com/docs - Storyblok docs

29. Q&A