Редактирование в реальном времени с мостом Storyblok не работает в производственной среде Next.js
Я работаю над веб-сайтом JAMstack, используя Next.js (SSG) и Storyblok (Headless CMS) и использую Storyblok Content Delivery API для извлечения контента из Storyblok.
Я создал службу Storyblok, которая имеет конфигурации Storyblok и функцию моста.
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
Я вызываю функцию моста и получаю содержимое макета в layout.js, которое вызывается из 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 называется так в layout.js
layout.js
{StoryblokService.bridge()}
Постановка задачи
Редактирование в реальном времени с помощью Storyblok, то есть если я изменю какой-либо контент в Storyblok и опубликую его, тогда, когда я перезагружаю страницу, контент также обновляется в веб-приложении Next.js, отлично работает в среде dev / local, но то же вещь в производственной среде или публикация кода Next.js в Vercel не работает.
Похоже, что конфигурация неправильная или мне что-то не хватает.
Любая помощь будет оценена по достоинству. Заранее спасибо!
2 ответа
Вы добавили режим предварительного просмотра ? У меня была такая же проблема из-за отсутствия режима предварительного просмотра.