How to use Liveblocks with Next.js /app directory
A pattern we’d recommend when using Next.js /app directory
is creating a Room.tsx
client component in the current route, and using
RoomProvider
within here.
Doing this avoids an issue when importing LiveObject/LiveMap/ListList
into
server components. You can then use Room.tsx
in your server component, and
everything will work as expected.
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 real-time parts of
your app:
Related guides
Edit this page
Was this page helpful?Helpful?