如何解决Storyblok+Next.js15中‘Component page不存在’错误

按照Storyblok React SDK v4官方文档编写代码，已在storyblokInit的components对象中配置了page组件，但始终触发服务器错误：Component page doesn't exist.。已尝试查阅多份文档、重启开发服务器、重装相关依赖包，问题仍未解决。

以下是项目相关文件代码：

src/lib/storyblok.ts #

import Page from '@/components/Page'
import { apiPlugin, storyblokInit, getStoryblokApi } from '@storyblok/react'

storyblokInit({
  accessToken: process.env.NEXT_PUBLIC_STORYBLOK_API_KEY,
  use: [apiPlugin],
  apiOptions: {
    region: 'us',
  },
  components: {
    page: Page,
  },
})

export { getStoryblokApi }

src/app/layout.tsx #

import StoryblokProvider from "@/components/StoryblokProvider";
import "./globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <StoryblokProvider>
      <html lang="en">
        <body>
          {children}
        </body>
      </html>
    </StoryblokProvider>
  );
}

src/components/StoryblokProvider.jsx #

'use client';

import { getStoryblokApi } from '@/lib/storyblok';

export default function StoryblokProvider({ children }) {
  getStoryblokApi();
  return children;
}

src/app/page.tsx #

import { getStoryblokApi } from '@/lib/storyblok';
import { StoryblokStory } from '@storyblok/react/rsc';

export default async function Home() {
  const { data } = await fetchData();
 
  return (
    <div>
      <StoryblokStory story={data.story} />
    </div>
  );
}
 
export async function fetchData() {
  const storyblokApi = getStoryblokApi();
  return storyblokApi.get('cdn/stories/home', { version: 'draft' });
}

src/components/Page.jsx #

import { storyblokEditable, StoryblokServerComponent } from '@storyblok/react/rsc';
 
const Page = ({ blok }) => (
  <main {...storyblokEditable(blok)}>
    {blok.body.map(nestedBlok => (
      <StoryblokServerComponent blok={nestedBlok} key={nestedBlok._uid} />
    ))}
  </main>
);
 
export default Page;

1. 严格匹配组件名称与Storyblok后台Handle #

Storyblok组件匹配区分大小写，确认你在Storyblok后台创建的页面组件的handle是小写的page。如果后台组件handle是Page或其他形式，需要同步修改storyblokInit中components的键名，保证完全一致。

2. 确保storyblokInit在服务器端正确初始化 #

storyblokInit需要在服务器组件环境中执行才能正确注册组件。可以在src/app/layout.tsx中直接引入@/lib/storyblok，确保初始化逻辑在服务器端运行：

import '@/lib/storyblok'; // 添加这行
import StoryblokProvider from "@/components/StoryblokProvider";
import "./globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <StoryblokProvider>
      <html lang="en">
        <body>
          {children}
        </body>
      </html>
    </StoryblokProvider>
  );
}

3. 修复StoryblokProvider的实现 #

当前自定义的StoryblokProvider不符合RSC场景要求，需要替换为SDK提供的官方StoryblokProvider（从@storyblok/react/rsc导入）：

'use client';

import { StoryblokProvider } from '@storyblok/react/rsc';

export default function StoryblokProviderWrapper({ children }) {
  return <StoryblokProvider>{children}</StoryblokProvider>;
}

这个客户端组件负责管理编辑模式所需的上下文，确保客户端与服务器端的组件状态同步。

4. 验证组件导入路径与文件名一致性 #

检查src/lib/storyblok.ts中Page组件的导入路径是否正确，确认src/components/Page.jsx文件名的大小写与导入语句匹配（比如文件是page.jsx则导入路径要改成@/components/page）。

5. 确认SDK版本为v4及以上 #

运行以下命令检查@storyblok/react版本：

npm list @storyblok/react

如果版本低于v4，升级到最新版本：

npm install @storyblok/react@latest

内容的提问来源于stack exchange，提问作者J-vbrc