How to Create a Preview Button in Strapi v3 for Next.js

daniel.j · February 16, 2022, 3:16pm

Managed to figure this out, maybe this can help anyone else who needs it…

Generated a plugin using strapi generate, deleted the strapi-server.js related file and made as minimal changes use this:

// src/plugins/preview-link/admin/src/components/PreviewLink/index.js
import React from 'react';
import { useCMEditViewDataManager } from '@strapi/helper-plugin';
import Eye from '@strapi/icons/Eye';
import { LinkButton } from '@strapi/design-system/LinkButton';

const PreviewLink = () => {
  const {initialData} = useCMEditViewDataManager();

  if (!initialData.slug) {
    return null;
  }

  return (
    <LinkButton
      size="S"
      startIcon={<Eye/>}
      style={{width: '100%'}}
      href={`http://foo.bar?slug=${initialData.slug}`}
      variant="secondary"
    >
      Preview on MainSite
    </LinkButton>
  );
};

export default PreviewLink;

// src/plugins/preview-link/admin/src/index.js
import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import Initializer from './components/Initializer';
import PreviewLink from './components/PreviewLink';

const name = pluginPkg.strapi.name;

export default {
  register(app) {
    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      isReady: false,
      name,
    });
  },

  bootstrap(app) {
    app.injectContentManagerComponent('editView', 'right-links', {
      name: 'preview-link',
      Component: PreviewLink
    });
  }
};

Which gives you: