fix(preview): handle slug conflict, fix tests

src/next/__tests__/previewHandlers.test.ts

@@ -108,12 +108,42 @@ describe('[next] nextPreviewHandlers', () => {
     expect(setPreviewDataMock).not.toBeCalled();
   });
 
+  it('should enable preview mode and redirect if disable story check', async () => {
+    server.use(
+      rest.get(
+        `https://api.storyblok.com/v1/cdn/stories/${slug}`,
+        async (_, res, ctx) => {
+          return res(ctx.status(404), ctx.json({}));
+        },
+      ),
+    );
+
+    const setPreviewDataMock = jest.fn();
+    EventEmitter.prototype.setPreviewData = setPreviewDataMock;
+
+    const { req, res } = createMocks(
+      { method: 'GET', query: { slug, token: previewToken, anything: true } },
+      {
+        eventEmitter: EventEmitter,
+      },
+    );
+
+    await nextPreviewHandlers({
+      disableStoryCheck: true,
+      previewToken,
+      storyblokToken,
+    })(req as any, res as any);
+
+    expect(res._getRedirectUrl()).toBe(`/${slug}?anything=true`);
+    expect(setPreviewDataMock).toBeCalledWith({});
+  });
+
   it('should exit preview mode on clear route', async () => {
     const clearPreviewData = jest.fn();
     EventEmitter.prototype.clearPreviewData = clearPreviewData;
 
     const { req, res } = createMocks(
-      { method: 'GET', query: { slug: ['clear'] } },
+      { method: 'GET', query: { handle: ['clear'] } },
       {
         eventEmitter: EventEmitter,
       },

src/next/previewHandlers.ts

@@ -26,9 +26,9 @@ export const nextPreviewHandlers = ({
   req: NextApiRequest,
   res: NextApiResponse,
 ) => {
-  const { token, slug, ...rest } = req.query || {};
+  const { token, slug, handle, ...rest } = req.query;
 
-  if (slug?.[0] === 'clear') {
+  if (handle?.[0] === 'clear') {
     res.clearPreviewData();
     return res.redirect(req.headers.referer || '/');
   }
@@ -39,10 +39,12 @@ export const nextPreviewHandlers = ({
     return res.status(401).json({ message: 'Invalid token' });
   }
 
+  const restParams =
+    rest && Object.keys(rest).length ? `?${qs.stringify(rest)}` : '';
+
   if (disableStoryCheck) {
     res.setPreviewData({});
-    res.redirect(`${slug}?${qs.stringify(rest)}`);
-    return;
+    return res.redirect(`/${slug}${restParams}`);
   }
 
   // Fetch Storyblok to check if the provided `slug` exists
@@ -63,5 +65,5 @@ export const nextPreviewHandlers = ({
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.redirect(`/${story.full_slug}?${qs.stringify(rest)}`);
+  res.redirect(`/${story.full_slug}${restParams}`);
 };

website/docs/api/nextPreviewHandlers.md

@@ -38,7 +38,7 @@ const nextPreviewHandlers: (options: NextPreviewHandlersProps) => (req: NextApiR
 
 ### Basic example
 
-Create the file `./pages/api/preview/[[...slug]].ts` with the following contents:
+Create the file `./pages/api/preview/[[...handle]].ts` with the following contents:
 
 ```ts
 import { nextPreviewHandlers } from '@storyofams/storyblok-toolkit';
@@ -50,10 +50,10 @@ export default nextPreviewHandlers({
 ```
 
 To open preview mode of a story at `/article/article-1`, go to:
-`/api/preview?token=YOUR_PREVIEW_TOKEN&slug=/article/article-1`
+`/api/preview?token=YOUR_PREVIEW_TOKEN&slug=article/article-1`
 
 You can configure preview mode as a preview URL in Storyblok:
-`YOUR_WEBSITE/api/preview?token=YOUR_PREVIEW_TOKEN&slug=/`
+`YOUR_WEBSITE/api/preview?token=YOUR_PREVIEW_TOKEN&slug=`
 
 If you are using the preview handlers and are on a page configured with `withStory`, you will automatically be shown a small indicator to remind you that you are viewing the page in preview mode. It also allows you to exit preview mode. Alternatively you can go to `/api/preview/clear` to exit preview mode.