Storyblok 的实时内容更新在生产环境 Next.js 中不起作用

如何解决Storyblok 的实时内容更新在生产环境 Next.js 中不起作用

我正在使用 Next.js (SSG) 和 Storyblok（无头 CMS）开发 JAMstack 网站，并使用 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 中获取布局内容，而 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 Web 应用程序中的内容也会更新，在开发/本地环境中运行良好，但是同样的事情在生产环境中或者将Next.js代码发布到Vercel中是行不通的。

似乎配置有误，或者可能与 Storyblok 网络钩子或工作流程有关。

任何帮助将不胜感激。提前致谢！