How to enable preview on for unattached composition

Problem#

This guide is specifically for Next.js App Router. Uniform compositions that are not attached to a project map node are not resolved via the Route Client API, which means they are not loaded in preview by default. This guide provides with a solution.

Solution#

1. Locate your preview API handler, typically here: /api/preview/route.ts

2. Add the resolveFullPath ​function to createPreviewGETRouteHandler:

export const GET = createPreviewGETRouteHandler({
  playgroundPath: '/playground',
  resolveFullPath: ({ path }) => (path ? path : '/playground'),
});

See live example here.