Scribd
Upload
449 views

Cheat Sheet-Nextjs

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
Available Formats
Download as PDF, TXT or read online on Scribd
449 views

Cheat Sheet-Nextjs

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
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like