@flotiq/nextjs-live-preview NPM

@flotiq/nextjs-live-preview

Home for Next.js + Flotiq live preview integrating code, including @flotiq/flotiq-api-sdk middleware, that enhances requests to Flotiq api with Next.js functionality.

Flotiq listing single content object requests are connected to the Flotiq websockets.

If room for the content object exists, requests are overriden by data from the websocket.
Only requests in draftMode can access live preview Flotiq data.
To create suitable room name for content object, cookies with spaceId and apiKey are required. The package contains the livePreview async function with enable and disable methods for generating cookies from request searchParams.

Package contains components that support live preview. You can find:

LivePreviewStatus - client component with router refresh on any changes in your content objects for provided space
useLivePreviewStatus - client hook that returns latest date of data update and if connection to websockets is opened
LivePreviewBox - server wrapper for content object field, that shows currently editing users

Installation

npm install @flotiq/nextjs-live-preview

Requirements

To use Live Preview components, your application needs to use:

React 19 or higher and
Next.js version 15 or higher.

Usage

Using middleware to override object with live data:

import { Flotiq } from "@flotiq/flotiq-api-sdk";
import { createNextLivePreviewMiddleware } from "@flotiq/nextjs-live-preview";

const api = new Flotiq({
  middleware: [createNextLivePreviewMiddleware()],
});

By default, createNextLivePreviewMiddleware uses your FLOTIQ_API_KEY from the environment for authorization. You can override this by passing your own key as a parameter:

const api = new Flotiq({
  middleware: [
    createNextLivePreviewMiddleware({
      flotiqApiKey: process.env.OTHER_KEY,
    }),
  ],
});

Live preview route for enabling/disabling live preview (if using Live Preview plugin in Flotiq, add this code to src/api/flotiq/live-preview file):

import { livePreview } from '@flotiq/nextjs-live-preview/server';

export async function GET(req: NextRequest) {
  const redirectPath = req.nextUrl.searchParams.get('redirect') || '/';
  const livePreviewState = await livePreview();

  const newLivePreview = req.nextUrl.searchParams.has('live-preview')
    ? req.nextUrl.searchParams.get('live-preview') === 'true'
    : !livePreviewState.isEnabled;
  
  if (newLivePreview) {
    livePreviewState.enable(req);
  } else {
    livePreviewState.disable();
  }

  redirect(redirectPath);
}

Example for LivePreviewStatus to show latest update time:

import { livePreview } from '@flotiq/nextjs-live-preview/server';
import { LivePreviewStatus } from "@flotiq/nextjs-live-preview/client";

export default async function RootLayout() {
  const { isEnabled } = await livePreview();
  return (
    <html>
      <body>
        <main>
          {isEnabled && <LivePreviewStatus editorKey={'<editor key provided in live preview plugin settings>'}/>}
        </main>
      </body>
    </html>
  )
}

Example for LivePreviewBox to show who is currently editing the object field:

import { content } from "@/flotiq-api-client";
import { LivePreviewBox } from "@flotiq/nextjs-live-preview/server";

export default async function Page() {
  const contentObject = await content.object.get("object-id");
  return (
    <LivePreviewBox
      objectId={contentObject?.id || "add"}
      ctdName={"object"}
      fieldName={"name"}
    >
      {contentObject.name}
    </LivePreviewBox>
  )
}

react-cookie winston y-websocket yjs

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago