feat: graphql client with fetches for initial pages

env/client.mjs

@@ -0,0 +1,36 @@
+// @ts-check
+import { clientEnv, clientSchema } from './schema.mjs'
+
+const _clientEnv = clientSchema.safeParse(clientEnv)
+
+export const formatErrors = (
+  /** @type {import('zod').ZodFormattedError<Map<string,string>,string>} */
+  errors
+) =>
+  Object.entries(errors)
+    .map(([name, value]) => {
+      if (value && '_errors' in value) {
+        return `${name}: ${value._errors.join(', ')}\n`
+      }
+      return null
+    })
+    .filter(Boolean)
+
+if (!_clientEnv.success) {
+  const msg = [
+    '❌ Invalid environment variables [Client]:\n',
+    ...formatErrors(_clientEnv.error.format()),
+  ].join('')
+  console.error(msg)
+  throw new Error(msg)
+}
+
+for (let key of Object.keys(_clientEnv.data)) {
+  if (!key.startsWith('NEXT_PUBLIC_')) {
+    const msg = `❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`
+    console.warn(msg)
+    throw new Error(msg)
+  }
+}
+
+export const env = _clientEnv.data

env/schema.mjs

@@ -0,0 +1,46 @@
+// @ts-check
+import { z } from "zod"
+
+/**
+ * Specify your server-side environment variables schema here.
+ * This way you can ensure the app isn"t built with invalid env vars.
+ */
+export const serverSchema = z.object({
+  CMS_ACCESS_TOKEN: z.string(),
+  CMS_API_KEY: z.string(),
+  CMS_ENVIRONMENT: z.enum(["development", "production", "staging", "test"]),
+  CMS_URL: z.string(),
+  NODE_ENV: z.enum(["development", "test", "production"]),
+  PRINT_QUERY: z.boolean().default(false),
+})
+
+/**
+ * You can't destruct `process.env` as a regular object in the Next.js
+ * middleware, so you have to do it manually here.
+ * @type {{ [k in keyof z.input<typeof serverSchema>]: string | undefined }}
+ */
+export const serverEnv = {
+  CMS_ACCESS_TOKEN: process.env.CMS_ACCESS_TOKEN,
+  CMS_API_KEY: process.env.CMS_API_KEY,
+  CMS_ENVIRONMENT: process.env.CMS_ENVIRONMENT,
+  CMS_URL: process.env.CMS_URL,
+  NODE_ENV: process.env.NODE_ENV,
+  PRINT_QUERY: process.env.PRINT_QUERY,
+}
+
+/**
+ * Specify your client-side environment variables schema here.
+ * This way you can ensure the app isn"t built with invalid env vars.
+ * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
+ */
+export const clientSchema = z.object({
+})
+
+/**
+ * You can't destruct `process.env` as a regular object, so you have to do
+ * it manually here. This is because Next.js evaluates this at build time,
+ * and only used environment variables are included in the build.
+ * @type {{ [k in keyof z.infer<typeof clientSchema>]: z.infer<typeof clientSchema>[k] | undefined }}
+ */
+export const clientEnv = {
+}

env/server.mjs

@@ -0,0 +1,33 @@
+// @ts-check
+/**
+ * This file is included in `/next.config.mjs` which ensures the app isn't built with invalid env vars.
+ * It has to be a `.mjs`-file to be imported there.
+ */
+import { serverSchema, serverEnv } from './schema.mjs'
+import { env as clientEnv, formatErrors } from './client.mjs'
+
+const _serverEnv = serverSchema.safeParse(serverEnv)
+
+if (!_serverEnv.success) {
+  const msg = [
+    '❌ Invalid environment variables [Server]:\n',
+    ...formatErrors(_serverEnv.error.format()),
+  ].join('')
+  console.error(msg)
+  throw new Error(msg)
+}
+
+for (let key of Object.keys(_serverEnv.data)) {
+  const msg = []
+  if (key.startsWith('NEXT_PUBLIC_')) {
+    msg.push(
+      `❌ You are exposing a server-side env-variable: ${key}\n`
+    )
+  }
+  if (msg.length) {
+    console.warn(msg.join(''))
+    throw new Error(msg.join(''))
+  }
+}
+
+export const env = { ..._serverEnv.data, ...clientEnv }