CheatSheet
Storyblok
Next.js
Storyblok Next.js Cheat Sheet
Setup Create a Storyblok client
Start by creating a new Next.js Get the preview token from your
application with their CLI. Storyblok space settings.
$ npm init next-app import StoryblokClient from
# or 'storyblok-js-client'
$ yarn create next-app
this.client = new StoryblokClient({
accessToken: ’sb-preview-token’,
cache: {
HINT: Follow the detailed Storyblok tutorial clear: 'auto',
here: https://www.storyblok.com/tp/next-js- type: 'memory'
react-guide }
})
Connect Next.js with Storyblok
The Storyblok client allows you to Create the Storyblok bridge
request content from Storyblok's API, Our Storyblok Service allows you to
and the storyblok-react module gives create a bridge to Storyblok. We need
you a wrapper component that creates to insert this bridge in our Layout.js.
editable blocks in the live visual editor.
import StoryblokService from '../
$ npm install storyblok-js-client utils/storyblok-service'
storyblok-react --save
const Layout = ({ children }) => (
# OR
<div>
$ yarn add storyblok-js-client <div className="max-w-5xl py-10
storyblok-react mx-auto">
{children}
{StoryblokService.bridge()}
HINT: Start with the Starter repository: </div>
</div>
https://github.com/storyblok/nextjs-
)
multilanguage-website
export default Layout
Storyblok Next.js Cheat Sheet
Create components Adding another language
with SbEditable As all our routes are dynamic, adding
another language is simple. Create a
To make the components editable in
new folder for each language and query
Storyblok we need to pass our blok
the desired language with the Storyblok
information to each component.
API.
import SbEditable from 'storyblok-
react' static async
getInitialProps({ query }) {
const Feature = ({blok}) => ( let language = query.language;
<SbEditable content={blok}> let res = await
<div> StoryblokService.get(`cdn/
<h2>{blok.name}</h2> stories/${language}/home`);
</div>
</SbEditable> return {
) res,
}
export default Feature }
Enable Live Preview
<li>
<Link href="/de/blog">
For the Live Preview to work, we need <a
to initialize the event listeners with the className="top-header__link">
German
initEditor function in the Storyblok </a>
Service. Add a componentDidMount </Link>
</li>
function to your pages/index.js.
import StoryblokService from
'../../../utils/storyblok-service'
export default class extends
React.Component {
componentDidMount() {
StoryblokService.initEditor(this)
}
}
Storyblok Next.js Cheat Sheet
Rendering Richtext Deployment
To render Richtext you can use the Deploy your website by running the
storyblok-rich-text-react-renderer vercel command in your console.
npm package.
npm i -g vercel
import { render } from "storyblok-
rich-text-react-renderer" vercel
<div>
{render(blok.long_text)} HINT: Deploy your site easily with Vercels
</div> auto-detection: https://nextjs.org/docs/
deployment
Directory Structure
Storyblok supports a component based
approach to edit your cotent
components
Feature.js
Connected
Grid.js
components
Page.js
pages
Multilanguage
[language]/blog
pages
index.js
utils
Storyblok
storyblok-service.js connection
