@monx/react-netlifycms v1.4.0

React NetlifyCMS with Identity Widget

yarn add @monx/react-netlifycms
yarn add -D @types/netlify-identity-widget 

collections.ts

import { CmsCollection } from '@monx/react-netlifycms';

export const collections: CmsCollection[] = [
  {
    name: 'blog',
    label: 'Post',
    folder: 'blog',
    create: true,
    fields: [
      { label: 'Published', name: 'published', widget: 'boolean' },
      { label: 'Title', name: 'title', widget: 'string' },
      { label: 'Publish Date', name: 'date', widget: 'datetime' },
      { label: 'Body', name: 'body', widget: 'editor' },
      { label: 'Authors', name: 'authors', widget: 'list' },
    ],
  },
]

Page

import dynamic from 'next/dynamic';
import { collections } from '~/admin/collections'
import { PostPreview } from '~/admin/previews/Post'
import { TinyMCEWidget } from '~/admin/widgets/TinyMCEWidget';

const NetlifyCMS = dynamic(() => import('@monx/react-netlifycms'), {
  ssr: false,
})

// import NetlifyCMS from '@monx/react-netlifycms'

export default function AdminPage() {
  return (
    <NetlifyCMS
      cms={{
        config: {
          backend: {
            name: 'git-gateway',
            branch: 'master',
          },
          media_folder: 'public/uploads',
          public_folder: 'uploads',
          collections,
          local_backend: process.env.NODE_ENV !== 'production',
          load_config_file: false,
        },
        onLoad: (cms) => {
          cms.registerPreviewTemplate('blog', PostPreview);
          cms.registerWidget('editor', TinyMCEWidget);
        },
      }}
      identity={{ // optional
        config: {
          logo: false
        },
        onLoad: (identity) => {

        }
      }}
    />
  );
}

Preview

import { Preview } from '@monx/react-netlifycms/dist/Preview';
import { PostTemplate } from '~/components/templates/Post';

interface Post {
  published:boolean;
  title: string;
  date: Date;
  body: string;
  authors: string[];
}

export const PostPreview = Preview<Post>(({ values }) => {
  return <PostTemplate post={values} />;
});

Widget

import Widget from '@monx/react-netlifycms/dist/Widget';
import { Editor } from '@tinymce/tinymce-react';

export const TinyMCEWidget = Widget<string>(({ onChange, value }) => {
  return (
    <Editor
      apiKey={process.env.NEXT_PUBLIC_TINY_API_KEY}
      value={value}
      init={{
        height: 500,
        menubar: true,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount',
          'codesample',
        ],
        toolbar:
          'undo redo | formatselect | bold italic backcolor | codesample | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
      }}
      onEditorChange={(content) => onChange(content)}
    />
  );
});

Dev mode

to access admin in dev mode

yarn add -D concurrently netlify-cms-proxy-server

add script in package.json

"dev:admin": "concurrently \"next dev\" \"netlify-cms-proxy-server\""

run

yarn dev:admin