pages__admin__index.tsx

> import dynamic from "next/dynamic";
> 
> import { createAdmin } from "../../../services/Cms/ClientAdminUi";
> 
> const Blank = () => <></>;
> 
> export const AdminPageContainer = dynamic(
>   async () => {
>     if (typeof window === "undefined") return Blank;
>     await createAdmin();
>     return Blank;
>   },
>   { ssr: false, loading: Blank }
> );

services__Cms__ClientAdminUi.ts

"use client";

export async function createAdmin() {
  if (typeof window === undefined) return;

  const { ClientConfig } = await import("./ClientConfig");
  const { default: CMS } = await import("netlify-cms-app");

  /**
   * Tailwind Styles
   *
   * So page previews look the same as they do on the live site.
   *
   * This file is generated by commands in package.json
   *
   * @see {@link [package.json#scripts](package.json)}
   */
  CMS.registerPreviewStyle("/styles.css");
  
  /**
   * SNIP LOTS OF OTHER SETUP
   */


  CMS.init({ config: ClientConfig });

}

services__Cms__ClientConfig.ts

import type { CmsConfig } from "netlify-cms-core";

import { HomePageAppCmsFile } from "./Collections/HomePageApp/HomePageAppCmsFile";
import { PageDetailAppCmsFile } from "./Collections/PageDetailApp/PageDetailAppCmsFile";
import { PagesCmsCollection } from "./Collections/Pages/PagesCmsCollection";
import { PostsCmsCollection } from "./Collections/Posts/PostsCmsCollection";
import { SiteSettingsCmsCollection } from "./Collections/SiteSettings/SiteSettingsCmsCollection";

import { Config } from "../Config";

const ClientConfig: CmsConfig = {
  backend: {
    name: Config.backend.name,
    repo: Config.backend.repo,
    branch: Config.backend.branch,
    base_url: Config.backend.baseUrl,
    auth_endpoint: Config.backend.authEndpoint,
    squash_merges: true,
  },
  // TODO support language switching
  // i18n: {
  //   default_locale: "en-US",
  //   locales: ["en-US", "th_TH", "zh_CN", "ru-RU"],
  //   structure: "multiple_folders",
  // },
  local_backend: Config.useLocalBackend,
  media_folder: "/public/media",
  public_folder: "/media",
  publish_mode: Config.useLocalBackend ? "simple" : "editorial_workflow",
  slug: {
    clean_accents: true,
    encoding: "unicode",
    sanitize_replacement: "_",
  },
  collections: [
    SiteSettingsCmsCollection,
    {
      name: "apps",
      label: "Apps",
      editor: { preview: false },
      files: [
        HomePageAppCmsFile,
        PageDetailAppCmsFile,
      ],
    },
    PagesCmsCollection,
    PostsCmsCollection
  ],
};

export { ClientConfig };