create-lx2-app 0.11.5-beta.879764 → 0.11.5-beta.a472eda

package/template/packages/src/app/page/with-authjs-drizzle.tsx

@@ -15,7 +15,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -94,6 +94,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -112,6 +113,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -130,6 +132,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-authjs-prisma.tsx

@@ -4,6 +4,12 @@ import { revalidatePath } from "next/cache"
 import { auth, signIn, signOut } from "@/server/auth"
 import { db } from "@/server/db"
 
+/**
+ * Force dynamic rendering for pnpm + prisma
+ * @see https://github.com/prisma/prisma/issues/28581
+ */
+export const dynamic = "force-dynamic"
+
 export default async function HomePage() {
   const session = await auth()
   const user = session?.user
@@ -13,7 +19,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -92,6 +98,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -110,6 +117,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -128,6 +136,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-authjs.tsx

@@ -9,7 +9,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -88,6 +88,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -106,6 +107,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -124,6 +126,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-better-auth-drizzle.tsx

@@ -19,7 +19,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -110,6 +110,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -128,6 +129,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -146,6 +148,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-better-auth-prisma.tsx

@@ -6,6 +6,12 @@ import { redirect } from "next/navigation"
 import { auth } from "@/server/auth"
 import { db } from "@/server/db"
 
+/**
+ * Force dynamic rendering for pnpm + prisma
+ * @see https://github.com/prisma/prisma/issues/28581
+ */
+export const dynamic = "force-dynamic"
+
 export default async function HomePage() {
   const session = await auth.api.getSession({
     headers: await headers(),
@@ -17,7 +23,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -108,6 +114,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -126,6 +133,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -144,6 +152,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-better-auth.tsx

@@ -13,7 +13,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -104,6 +104,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -122,6 +123,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -140,6 +142,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-drizzle.tsx

@@ -11,7 +11,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       <div className="flex grow flex-col items-center justify-center">
         {/* Logo */}
         <picture className="relative">
@@ -52,6 +52,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -70,6 +71,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -88,6 +90,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-payload.tsx

@@ -12,7 +12,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       <div className="flex grow flex-col items-center justify-center">
         {/* Logo */}
         <picture className="relative">
@@ -86,6 +86,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -104,6 +105,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -122,6 +124,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-prisma.tsx

@@ -3,13 +3,19 @@ import { revalidatePath } from "next/cache"
 
 import { db } from "@/server/db"
 
+/**
+ * Force dynamic rendering for pnpm + prisma
+ * @see https://github.com/prisma/prisma/issues/28581
+ */
+export const dynamic = "force-dynamic"
+
 export default async function HomePage() {
   const posts = await db.post.findMany()
 
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       <div className="flex grow flex-col items-center justify-center">
         {/* Logo */}
         <picture className="relative">
@@ -50,6 +56,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -68,6 +75,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -86,6 +94,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-trpc.tsx

@@ -0,0 +1,118 @@
+import { fileURLToPath } from "url"
+
+import { Greeting } from "@/components/greeting"
+import { api, HydrateClient } from "@/lib/api/server"
+
+export const dynamic = "force-dynamic"
+
+export default async function HomePage() {
+  const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
+
+  void api.post.greeting({ text: "from tRPC!" })
+
+  return (
+    <HydrateClient>
+      <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
+        <div className="flex grow flex-col items-center justify-center">
+          {/* Logo */}
+          <picture className="relative">
+            <div className="absolute inset-0 animate-pulse bg-linear-to-r from-[oklch(0.7468_0.1455_302.21)] via-[oklch(0.7345_0.0464_270.71)] to-[oklch(0.7563_0.1807_347.17)] opacity-20 blur-lg dark:via-[oklch(0.5567_0.0816_269.53)]" />
+
+            <source srcSet="https://github.com/SlickYeet/create-lx2-app/blob/f1209465d59e03e284702d9f492f1bc1cfa49c32/docs/v2/public/android-chrome-192x192.png?raw=true" />
+            <img
+              src="https://github.com/SlickYeet/create-lx2-app/blob/f1209465d59e03e284702d9f492f1bc1cfa49c32/docs/v2/public/android-chrome-192x192.png?raw=true"
+              alt="Logo"
+              width={65}
+              height={65}
+              className="block h-auto max-w-full"
+            />
+          </picture>
+
+          {/* Title & Description */}
+          <h1 className="mt-6 text-5xl font-bold tracking-tight text-balance md:text-6xl lg:text-7xl">
+            Create{" "}
+            <span className="text-[oklch(0.7468_0.1455_302.21)]">Lx2</span> App
+          </h1>
+          <p className="text-center text-lg text-neutral-700 md:text-xl lg:mt-6 dark:text-neutral-300">
+            The Most Opinionated Way to Build Next.js Apps
+          </p>
+
+          {/* Links */}
+          <div className="mt-12 flex items-center gap-3">
+            <a
+              href="https://create.lx2.dev/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center rounded-md border border-white/25 px-2 py-1 outline-none hover:opacity-80 focus:opacity-80 active:opacity-70"
+            >
+              Docs
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+              >
+                <title>Docs</title>
+                <path d="M7 7h10v10" />
+                <path d="M7 17 17 7" />
+              </svg>
+            </a>
+            <a
+              href="https://link.lx2.dev/discord"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center rounded-md border border-white/25 px-2 py-1 outline-none hover:opacity-80 focus:opacity-80 active:opacity-70"
+            >
+              Discord
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+              >
+                <title>Discord</title>
+                <path d="M7 7h10v10" />
+                <path d="M7 17 17 7" />
+              </svg>
+            </a>
+            <a
+              href="https://github.com/SlickYeet/create-lx2-app"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center rounded-md border border-white/25 px-2 py-1 outline-none hover:opacity-80 focus:opacity-80 active:opacity-70"
+            >
+              GitHub
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="mb-1.5 size-4 fill-none stroke-current stroke-2"
+              >
+                <title>GitHub</title>
+                <path d="M7 7h10v10" />
+                <path d="M7 17 17 7" />
+              </svg>
+            </a>
+          </div>
+
+          {/* tRPC Greeting */}
+          <Greeting />
+        </div>
+
+        {/* Footer */}
+        <div className="flex flex-col items-center gap-1 text-sm text-neutral-600 lg:flex-row lg:gap-2 dark:text-neutral-400">
+          <p className="m-0">Get started by editing </p>
+          <a
+            href={fileURL}
+            className="rounded-md bg-neutral-200 px-2 py-1 dark:bg-neutral-800"
+          >
+            <code>src/app/page.tsx</code>
+          </a>
+        </div>
+      </main>
+    </HydrateClient>
+  )
+}

package/template/packages/src/components/greeting.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { api } from "@/lib/api/client"
+
+export function Greeting() {
+  const [greeting] = api.post.greeting.useSuspenseQuery({
+    text: "from tRPC!",
+  })
+
+  return (
+    <div className="mt-12 flex flex-col items-center gap-3">
+      <div className="mb-4">
+        <h2 className="mb-4 text-center">
+          <span className="text-2xl text-neutral-700 dark:text-neutral-300">
+            {greeting}
+          </span>
+        </h2>
+      </div>
+    </div>
+  )
+}

package/template/packages/src/env/with-better-auth-db.js

@@ -23,7 +23,7 @@ export const env = createEnv({
    */
   client: {
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
-    NEXT_PUBLIC_BETTER_AUTH_URL: z.url(),
+    NEXT_PUBLIC_URL: z.url(),
   },
 
   /**
@@ -34,7 +34,7 @@ export const env = createEnv({
     NODE_ENV: process.env.NODE_ENV,
     DATABASE_URL: process.env.DATABASE_URL,
     BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
-    NEXT_PUBLIC_BETTER_AUTH_URL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL,
+    NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
     DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
     DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
   },

package/template/packages/src/env/with-better-auth.js

@@ -20,7 +20,7 @@ export const env = createEnv({
    */
   client: {
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
-    NEXT_PUBLIC_BETTER_AUTH_URL: z.url(),
+    NEXT_PUBLIC_URL: z.url(),
   },
 
   /**
@@ -31,7 +31,7 @@ export const env = createEnv({
     NODE_ENV: process.env.NODE_ENV,
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
     BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
-    NEXT_PUBLIC_BETTER_AUTH_URL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL,
+    NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
     DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
     DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
   },

package/template/packages/src/env/with-trpc-authjs-db.js

@@ -0,0 +1,55 @@
+import { createEnv } from "@t3-oss/env-nextjs"
+import { z } from "zod"
+
+export const env = createEnv({
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    DATABASE_URL: z.url(),
+    AUTH_SECRET:
+      process.env.NODE_ENV === "production"
+        ? z.string()
+        : z.string().optional(),
+    DISCORD_CLIENT_ID: z.string(),
+    DISCORD_CLIENT_SECRET: z.string(),
+    NODE_ENV: z
+      .enum(["development", "test", "production"])
+      .default("development"),
+  },
+
+  /**
+   * 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_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_URL: z.url(),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    DATABASE_URL: process.env.DATABASE_URL,
+    AUTH_SECRET: process.env.AUTH_SECRET,
+    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
+    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
+    NODE_ENV: process.env.NODE_ENV,
+    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+    NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  /**
+   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+   * `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
+})

package/template/packages/src/env/with-trpc-authjs.js

@@ -0,0 +1,53 @@
+import { createEnv } from "@t3-oss/env-nextjs"
+import { z } from "zod"
+
+export const env = createEnv({
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    AUTH_SECRET:
+      process.env.NODE_ENV === "production"
+        ? z.string()
+        : z.string().optional(),
+    DISCORD_CLIENT_ID: z.string(),
+    DISCORD_CLIENT_SECRET: z.string(),
+    NODE_ENV: z
+      .enum(["development", "test", "production"])
+      .default("development"),
+  },
+
+  /**
+   * 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_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_URL: z.url(),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    AUTH_SECRET: process.env.AUTH_SECRET,
+    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
+    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
+    NODE_ENV: process.env.NODE_ENV,
+    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+    NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  /**
+   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+   * `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
+})