t3-oss · juliusmarminge · Jan 24, 2024 · Jan 24, 2024 · juliusmarminge · Jan 25, 2024
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/package.json b/docs/package.json
@@ -31,8 +31,8 @@
   "devDependencies": {
     "@types/mdx": "^2.0.5",
     "@types/node": "^18.15.13",
-    "@types/react": "18.0.38",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.3.1",

diff --git a/examples/nextjs/app/env.js b/examples/nextjs/app/env.js
@@ -1,4 +1,4 @@
-import { createEnv } from "@t3-oss/env-nextjs";
+import { createEnv } from "@t3-oss/env-nextjs/future";
 import { vercel } from "@t3-oss/env-nextjs/presets";
 import { z } from "zod";
 

diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx
@@ -1,6 +1,7 @@
 import { Inter } from "next/font/google";
 
 import { env } from "~/env";
+import { ClientComponent } from "./client-component";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -11,10 +12,13 @@ export const metadata = {
 };
 
 export default function RootLayout(props: { children: React.ReactNode }) {
+  console.log("Server says", env.SECRET);
+
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div>Server says {env.SECRET}!</div>
+        {/* 👇👇👇 rendering the server secret will cause error because it's tained 👇👇👇 */}
+        {/* <div>Server says {env.SECRET}!</div> */}
         <main>{props.children}</main>
       </body>
     </html>

diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js
@@ -1,10 +1,13 @@
-import "./app/env.js";
+// import "./app/env.js";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  experimental: {
+    taint: true,
+  },
 };
 
 export default nextConfig;
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -10,8 +10,8 @@
   },
   "devDependencies": {
     "@types/node": "^18.15.13",
-    "@types/react": "18.0.38",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
     "typescript": "^5.3.3"
   },
   "dependencies": {

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -25,6 +25,16 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./future": {
+      "import": {
+        "types": "./dist/future.d.ts",
+        "default": "./dist/future.js"
+      },
+      "require": {
+        "types": "./dist/future.d.cts",
+        "default": "./dist/future.cjs"
+      }
+    },
     "./presets": {
       "import": {
         "types": "./dist/presets.d.ts",
@@ -48,16 +58,22 @@
     "@t3-oss/env-core": "workspace:*"
   },
   "peerDependencies": {
+    "react": "experimental",
     "typescript": ">=5.0.0",
     "zod": "^3.0.0"
   },
   "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     }
   },
   "devDependencies": {
+    "@types/react": "18.2.48",
     "bunchee": "^4.3.3",
+    "react": "experimental",
     "typescript": "^5.3.3",
     "zod": "^3.20.2"
   }

diff --git a/packages/nextjs/src/future.ts b/packages/nextjs/src/future.ts
@@ -0,0 +1,109 @@
+/// <reference types="react/experimental" />
+
+/**
+ * This contains a potential future version of `createEnv` that
+ * uses the new Taint API to prevent server variables from being
+ * passed to client components.
+ */
+
+import type { ServerClientOptions, StrictOptions } from "@t3-oss/env-core";
+import { createEnv as createEnvCore } from "@t3-oss/env-core";
+import * as React from "react";
+import type { ZodType } from "zod";
+
+const CLIENT_PREFIX = "NEXT_PUBLIC_" as const;
+type ClientPrefix = typeof CLIENT_PREFIX;
+
+type Options<
+  TServer extends Record<string, ZodType>,
+  TClient extends Record<`${ClientPrefix}${string}`, ZodType>,
+  TShared extends Record<string, ZodType>,
+  TExtends extends Array<Record<string, unknown>>,
+> = Omit<
+  StrictOptions<ClientPrefix, TServer, TClient, TShared, TExtends> &
+    ServerClientOptions<ClientPrefix, TServer, TClient>,
+  "runtimeEnvStrict" | "runtimeEnv" | "clientPrefix"
+> &
+  (
+    | {
+        /**
+         * Manual destruction of `process.env`. Required for Next.js < 13.4.4.
+         */
+        runtimeEnv: StrictOptions<
+          ClientPrefix,
+          TServer,
+          TClient,
+          TShared,
+          TExtends
+        >["runtimeEnvStrict"];
+        experimental__runtimeEnv?: never;
+      }
+    | {
+        runtimeEnv?: never;
+        /**
+         * Can be used for Next.js ^13.4.4 since they stopped static analysis of server side `process.env`.
+         * Only client side `process.env` is statically analyzed and needs to be manually destructured.
+         */
+        experimental__runtimeEnv: Record<
+          | {
+              [TKey in keyof TClient]: TKey extends `${ClientPrefix}${string}`
+                ? TKey
+                : never;
+            }[keyof TClient]
+          | {
+              [TKey in keyof TShared]: TKey extends string ? TKey : never;
+            }[keyof TShared],
+          string | boolean | number | undefined
+        >;
+      }
+  );
+
+export function createEnv<
+  TServer extends Record<string, ZodType> = NonNullable<unknown>,
+  TClient extends Record<
+    `${ClientPrefix}${string}`,
+    ZodType
+  > = NonNullable<unknown>,
+  TShared extends Record<string, ZodType> = NonNullable<unknown>,
+  const TExtends extends Array<Record<string, unknown>> = [],
+>(opts: Options<TServer, TClient, TShared, TExtends>) {
+  const client = typeof opts.client === "object" ? opts.client : {};
+  const server = typeof opts.server === "object" ? opts.server : {};
+  const shared = opts.shared;
+
+  const runtimeEnv = opts.runtimeEnv
+    ? opts.runtimeEnv
+    : {
+        ...process.env,
+        ...opts.experimental__runtimeEnv,
+      };
+
+  const proxy = createEnvCore<
+    ClientPrefix,
+    TServer,
+    TClient,
+    TShared,
+    TExtends
+  >({
+    ...opts,
+    shared,
+    client,
+    server,
+    clientPrefix: CLIENT_PREFIX,
+    runtimeEnv,
+  });
+
+  for (const key in proxy) {
+    if (key in server) {
+      try {
+        React.experimental_taintUniqueValue(
+          "Passing server variables is not supported",
+          proxy,
+          proxy[key],
+        );
+      } catch {}
+    }
+  }
+
+  return proxy;
+}