I am working on a JAMstack website using Next.js (SSG) and Storyblok (Headless CMS) and using the Storyblok Content Delivery API to fetch the content from Storyblok.
I have created the Storyblok service that has Storyblok configurations and Bridge function.
StoryblokService.js
import StoryblokClient from 'storyblok-js-client'
class StoryblokService {
constructor() {
this.devMode = false // Always loads draft
this.token = '#########'
this.client = new StoryblokClient({
accessToken: this.token,
cache: {
clear: 'auto',
type: 'memory'
}
})
this.query = {}
}
getCacheVersion() {
return this.client.cacheVersion
}
get(slug, params) {
params = params || {}
if (this.getQuery('_storyblok') || this.devMode || (typeof window !== 'undefined' && window.storyblok)) {
params.version = 'draft'
}
if (typeof window !== 'undefined' && typeof window.StoryblokCacheVersion !== 'undefined') {
params.cv = window.StoryblokCacheVersion
}
return this.client.get(slug, params)
}
initEditor(reactComponent) {
if (window.storyblok) {
window.storyblok.init()
window.storyblok.on(['change', 'published'], () => location.reload(true))
// this will alter the state and replaces the current story with a current raw story object (no resolved relations or links)
window.storyblok.on('input', (event) => {
if (event.story.content._uid === reactComponent.state.story.content._uid) {
reactComponent.setState({
story: {
...event.story,
content: window.storyblok.addComments(event.story.content, event.story.id)
}
})
}
})
}
}
setQuery(query) {
this.query = query
}
getQuery(param) {
return this.query[param]
}
bridge() {
if (!this.getQuery('_storyblok') && !this.devMode) {
return ''
}
return (<script src={'//app.storyblok.com/f/storyblok-latest.js?t=' + this.token}></script>)
}
}
const storyblokInstance = new StoryblokService()
export default storyblokInstance
I am calling the bridge function and getting the layout content in the layout.js which is getting called from the app.js.
app.js
import React, { useState } from 'react';
import StoryblokService from '../utils/storyblok-service';
function MyApp({ Component, pageProps, layoutContent }) {
return (
<Layout navColor={appendHeaderColor} title={`Test title`} description={`Test description`} content={layoutContent}>
);
}
MyApp.getInitialProps = async (query) => {
StoryblokService.setQuery(query)
const res = await StoryblokService.get('cdn/stories/layout')
const layoutContent = res.data.story.content
return {
layoutContent
}
}
export default MyApp;
Storyblok bridge is getting called like this in layout.js
layout.js
{StoryblokService.bridge()}
Problem Statement
The real-time content update with Storyblok i.e. if I change some content in Storyblok and publish it then as I reload the page the content gets updated in the Next.js Web application also, is working fine in the dev/local environment, but the same thing in the production environment or publishing the Next.js code to Vercel doesn't work.
Seems like the configuration is wrong or maybe it's related to Storyblok webhooks or workflows.
Any help would be appreciated. Thanks in advance!
