Provide a public variable "NEXT_PUBLIC_KEYSTATIC_STORAGE_KIND" to allow Keystatic to detect the storage client-side. This is fundamental to make the Admin work.

packages/cms/keystatic/src/create-reader.ts

@@ -1,18 +1,16 @@
 import { z } from 'zod';
 
+import { KeystaticStorage } from './keystatic-storage';
 import { keyStaticConfig } from './keystatic.config';
 
 /**
- * The kind of storage to use for the Keystatic reader.
- */
-const STORAGE_KIND = process.env.KEYSTATIC_STORAGE_KIND ?? 'local';
-
-/**
- * Creates a new Keystatic reader instance.
+ * @name createKeystaticReader
+ * @description Creates a new Keystatic reader instance.
  */
 export async function createKeystaticReader() {
-  switch (STORAGE_KIND) {
+  switch (KeystaticStorage.kind) {
     case 'local': {
+      // we need to import this dynamically to avoid parsing the package in edge environments
       if (process.env.NEXT_RUNTIME === 'nodejs') {
         const { createReader } = await import('@keystatic/core/reader');
 
@@ -26,28 +24,34 @@ export async function createKeystaticReader() {
 
     case 'github':
     case 'cloud': {
-      const githubConfig = z
-        .object({
-          token: z.string({
-            description: 'The GitHub token to use for authentication.',
-          }),
-          repo: z.custom<`${string}/${string}`>(),
-          pathPrefix: z.string().optional(),
-        })
-        .parse({
-          token: process.env.KEYSTATIC_GITHUB_TOKEN,
-          repo: process.env.KEYSTATIC_STORAGE_REPO,
-          pathPrefix: process.env.KEYSTATIC_PATH_PREFIX,
-        });
-
       const { createGitHubReader } = await import(
         '@keystatic/core/reader/github'
       );
 
-      return createGitHubReader(keyStaticConfig, githubConfig);
+      return createGitHubReader(
+        keyStaticConfig,
+        getKeystaticGithubConfiguration(),
+      );
     }
 
     default:
       throw new Error(`Unknown storage kind`);
   }
 }
+
+function getKeystaticGithubConfiguration() {
+  return z
+    .object({
+      token: z.string({
+        description:
+          'The GitHub token to use for authentication. Please provide the value through the "KEYSTATIC_GITHUB_TOKEN" environment variable.',
+      }),
+      repo: z.custom<`${string}/${string}`>(),
+      pathPrefix: z.string().optional(),
+    })
+    .parse({
+      token: process.env.KEYSTATIC_GITHUB_TOKEN,
+      repo: process.env.KEYSTATIC_STORAGE_REPO,
+      pathPrefix: process.env.KEYSTATIC_PATH_PREFIX,
+    });
+}