Scribd
Upload
1K views4 pages

Next.js 15 Storyblok Cheat Sheet

This cheat sheet provides instructions for setting up Storyblok content management with a Next.js application. It outlines how to: 1) Create a Storyblok client and connect it to the Next.js app. 2) Create a Storyblok bridge component and insert it into the layout to enable content requests and live editing. 3) Make components editable in Storyblok using SbEditable wrappers. 4) Add additional languages by creating language folders and querying content by language.

Uploaded by

Sagar Chaudhari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views4 pages

Next.js 15 Storyblok Cheat Sheet

This cheat sheet provides instructions for setting up Storyblok content management with a Next.js application. It outlines how to: 1) Create a Storyblok client and connect it to the Next.js app. 2) Create a Storyblok bridge component and insert it into the layout to enable content requests and live editing. 3) Make components editable in Storyblok using SbEditable wrappers. 4) Add additional languages by creating language folders and querying content by language.

Uploaded by

Sagar Chaudhari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
  • Setup Instructions
  • Additional Features
  • Content Management and Deployment

CheatSheet

Storyblok
[Link]
Storyblok [Link] Cheat Sheet

Setup Create a Storyblok client


Start by creating a new [Link] 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
[Link] = new StoryblokClient({
accessToken: ’sb-preview-token’,
cache: {
HINT: Follow the detailed Storyblok tutorial clear: 'auto',
here: [Link] type: 'memory'
react-guide }
})

Connect [Link] 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 [Link].
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}
{[Link]()}
HINT: Start with the Starter repository: </div>
</div>
[Link]
)
multilanguage-website
export default Layout
Storyblok [Link] 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 = [Link];
<SbEditable content={blok}> let res = await
<div> [Link](`cdn/
<h2>{[Link]}</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/[Link].

import StoryblokService from


'../../../utils/storyblok-service'

export default class extends


[Link] {
componentDidMount() {
[Link](this)
}
}
Storyblok [Link] 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: [Link]
deployment

Directory Structure
Storyblok supports a component based
approach to edit your cotent

components
[Link]
Connected
[Link]
components
[Link]
pages
Multilanguage
[language]/blog
pages
[Link]
utils
Storyblok
[Link] connection

You might also like