### Step 5 — Wire up the root layout with the provider The Bridge is client-side. The SDK loads it when `storyblokInit` runs in the browser. You need a client-component provider that re-initializes the SDK on the client. ```typescript // src/components/providers/StoryblokProvider.tsx "use client"; import { ReactNode } from "react"; import { getStoryblokApi } from "@/lib/storyblok"; export default function StoryblokProvider({ children, }: { children: ReactNode; }) { getStoryblokApi(); return children; } ``` That's the whole component. `getStoryblokApi()` triggers the Bridge load on the client. Without this, the iframe sees your page but the Bridge never initializes — outlines, drag handles, live updates all silently break. Wire it into the root layout. Pre-fetch global Stories (header, footer) in parallel so they hydrate with the rest: ```typescript import StoryblokProvider from "@/components/providers/StoryblokProvider"; import { getStoryblokApi, storyblokVersion } from "@/lib/storyblok"; import Header from "@/components/organisms/Header"; import Footer from "@/components/organisms/Footer"; export default async function RootLayout({ children }) { let headerStory = null; let footerStory = null; try { const api = getStoryblokApi(); const [headerData, footerData] = await Promise.all([ api.get('cdn/stories/global/header', { version: storyblokVersion }), api.get('cdn/stories/global/footer', { version: storyblokVersion }), ]); headerStory = headerData.data.story; footerStory = footerData.data.story; } catch (error) { console.error('Error fetching global components:', error); } return ( {headerStory &&

}

{children}

{footerStory &&

Storyblok and Next.js: the complete setup in 2026