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
server components. You can then use
Room.tsx in your server component, and
everything will work as expected.
To take this one step further, you can then server-render your layout within
children, whilst using other client components for real-time parts of