How to use Liveblocks with Next.js /app directory

A pattern we’d recommend when using Next.js /app directory is creating a providers client component for LiveblocksProvider and importing it into layout.tsx.

app/Providers.tsx

import { ReactNode } from "react";import { LiveblocksProvider } from "@liveblocks/react/suspense";
export function Providers({ children }: { children: ReactNode }) {  return (    <LiveblocksProvider authEndpoint="/api/liveblocks-auth">      {children}    </LiveblocksProvider>  );}

app/layout.tsx

import { ReactNode } from "react";import { Providers } from "./Providers";
export default function Layout({ children }: { children: ReactNode }) {  return (    <html lang="en">      <body>        <Providers>{children}</Providers>      </body>    </html>  );}

To join rooms, create a Room.tsx client component in the current route, using RoomProvider within here.

app/Room.tsx

"use client";
import { ReactNode } from "react";import { RoomProvider } from "../liveblocks.config";import { LiveObject } from "@liveblocks/client";
export default function Room({ children }: { children: ReactNode }) {  return (    <RoomProvider      id="my-room-name"      initialStorage={{        // ✅ This is a client component, so everything works!        session: new LiveObject(),      }}    >      {children}    </RoomProvider>  );}

Doing this avoids an issue when importing LiveObject/LiveMap/ListList into server components. You can then use Room.tsx in your page component, and everything will work as expected.

app/page.tsx

import { Room } from "./Room";
export default function Page() {  return <Room>{/* Your Liveblocks app */}</Room>;}

Structuring your app

To take this one step further, you can then server-render your layout within Room’s children, whilst using other client components for realtime parts of your app:

room.tsx

import { ReactNode } from "react";import { Room } from "./Room";import { LiveCanvas } from "./LiveCanvas";
export default function Page({ children }: { children: ReactNode }) {  return (    // Room.tsx is a client component that contains RoomProvider    <Room>      {/* This layout is server rendered */}      <header style={{ height: "150px" }}>My drawing app</header>      <main style={{ width: "100%" }}>        {/* LiveCanvas is a client component using Liveblocks features */}        <LiveCanvas />      </main>    </Room>  );}

How to use Liveblocks with Next.js /app directory

Structuring your app

Fixing Next.js server component errors

Revalidate API data in realtime with SWR

How to use Liveblocks with Next.js /app directory

Structuring your app

Related guides

Fixing Next.js server component errors

Revalidate API data in realtime with SWR