refactor: migrate to t3-env (#1377)

* use pacakge for env

* fix script versioning

* whoops

* add a callout in docs

* fixies

.changeset/odd-queens-travel.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": patch
+---
+
+move env validation logic out to a separate package

.github/version-script-beta.js

@@ -11,7 +11,8 @@ try {
  console.log(err);
  process.exit(1);
  }
- pkg.version = "6.0.0-beta." + stdout.trim();
+ const [major, minor, patch] = pkg.version.split(".").map(Number);
+ pkg.version = `${major}.${minor}.${patch + 1}-beta.${stdout.trim()}`;
  fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n");
  });
 } catch (error) {

.github/version-script-next.js

@@ -11,7 +11,8 @@ try {
  console.log(err);
  process.exit(1);
  }
- pkg.version = "6.0.0-next." + stdout.trim();
+ const [major, minor, patch] = pkg.version.split(".").map(Number);
+ pkg.version = `${major}.${minor}.${patch + 1}-next.${stdout.trim()}`;
  fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n");
  });
 } catch (error) {

cli/package.json

@@ -52,6 +52,7 @@
  },
  "devDependencies": {
  "@prisma/client": "^4.11.0",
+ "@t3-oss/env-nextjs": "^0.2.1",
  "@tanstack/react-query": "^4.28.0",
  "@trpc/client": "^10.18.0",
  "@trpc/next": "^10.18.0",

cli/template/base/package.json

@@ -9,6 +9,7 @@
  "lint": "next lint"
  },
  "dependencies": {
+ "@t3-oss/env-nextjs": "^0.2.1",
  "next": "^13.2.4",
  "react": "18.2.0",
  "react-dom": "18.2.0",

cli/template/base/src/env.mjs

@@ -1,82 +1,30 @@
 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.
- */
-const server = z.object({
- NODE_ENV: z.enum(["development", "test", "production"]),
+import { createEnv } from "@t3-oss/env-nextjs";
+
+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: {
+ NODE_ENV: z.enum(["development", "test", "production"]),
+ },
+
+ /**
+ * 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().min(1),
+ },
+
+ /**
+ * 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: {
+ NODE_ENV: process.env.NODE_ENV,
+ // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+ },
 });
-
-/**
- * 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_`.
- */
-const client = z.object(
- /** @satisfies {Record<`NEXT_PUBLIC_${string}`, import('zod').ZodType>} */ (
- {
- // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
- }
- ),
-);
-
-/**
- * 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.
- *
- * @type {Record<keyof z.infer<typeof server> | keyof z.infer<typeof client>, string | undefined>}
- */
-const processEnv = {
- NODE_ENV: process.env.NODE_ENV,
- // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
-};
-
-// Don't touch the part below
-// --------------------------
-
-const merged = server.merge(client);
-
-/** @typedef {z.input<typeof merged>} MergedInput */
-/** @typedef {z.infer<typeof merged>} MergedOutput */
-/** @typedef {z.SafeParseReturnType<MergedInput, MergedOutput>} MergedSafeParseReturn */
-
-let env = /** @type {MergedOutput} */ (process.env);
-
-const skip =
- !!process.env.SKIP_ENV_VALIDATION &&
- process.env.SKIP_ENV_VALIDATION !== "false" &&
- process.env.SKIP_ENV_VALIDATION !== "0";
-if (!skip) {
- const isServer = typeof window === "undefined";
-
- const parsed = /** @type {MergedSafeParseReturn} */ (
- isServer
- ? merged.safeParse(processEnv) // on server we can validate all env vars
- : client.safeParse(processEnv) // on client we can only validate the ones that are exposed
- );
-
- if (parsed.success === false) {
- console.error(
- "❌ Invalid environment variables:",
- parsed.error.flatten().fieldErrors,
- );
- throw new Error("Invalid environment variables");
- }
-
- env = new Proxy(parsed.data, {
- get(target, prop) {
- if (typeof prop !== "string") return undefined;
- // Throw a descriptive error if a server-side env var is accessed on the client
- // Otherwise it would just be returning `undefined` and be annoying to debug
- if (!isServer && !prop.startsWith("NEXT_PUBLIC_"))
- throw new Error(
- process.env.NODE_ENV === "production"
- ? "❌ Attempted to access a server-side environment variable on the client"
- : `❌ Attempted to access server-side environment variable '${prop}' on the client`,
- );
- return target[/** @type {keyof typeof target} */ (prop)];
- },
- });
-}
-
-export { env };

cli/template/extras/src/env/with-auth-prisma.mjs

@@ -1,102 +1,49 @@
 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.
- */
-const server = z.object({
- DATABASE_URL: z.string().url(),
- NODE_ENV: z.enum(["development", "test", "production"]),
- NEXTAUTH_SECRET:
- process.env.NODE_ENV === "production"
- ? z.string().min(1)
- : z.string().min(1).optional(),
- NEXTAUTH_URL: z.preprocess(
- // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
- // Since NextAuth.js automatically uses the VERCEL_URL if present.
- (str) => process.env.VERCEL_URL ?? str,
- // VERCEL_URL doesn't include `https` so it cant be validated as a URL
- process.env.VERCEL ? z.string().min(1) : z.string().url(),
- ),
- // Add `.min(1) on ID and SECRET if you want to make sure they're not empty
- DISCORD_CLIENT_ID: z.string(),
- DISCORD_CLIENT_SECRET: z.string(),
+import { createEnv } from "@t3-oss/env-nextjs";
+
+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.string().url(),
+ NODE_ENV: z.enum(["development", "test", "production"]),
+ NEXTAUTH_SECRET:
+ process.env.NODE_ENV === "production"
+ ? z.string().min(1)
+ : z.string().min(1).optional(),
+ NEXTAUTH_URL: z.preprocess(
+ // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
+ // Since NextAuth.js automatically uses the VERCEL_URL if present.
+ (str) => process.env.VERCEL_URL ?? str,
+ // VERCEL_URL doesn't include `https` so it cant be validated as a URL
+ process.env.VERCEL ? z.string().min(1) : z.string().url(),
+ ),
+ // Add `.min(1) on ID and SECRET if you want to make sure they're not empty
+ DISCORD_CLIENT_ID: z.string(),
+ DISCORD_CLIENT_SECRET: z.string(),
+ },
+
+ /**
+ * 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().min(1),
+ },
+
+ /**
+ * 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,
+ NODE_ENV: process.env.NODE_ENV,
+ NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
+ NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+ DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
+ DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
+ },
 });
-
-/**
- * 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_`.
- */
-const client = z.object(
- /** @satisfies {Record<`NEXT_PUBLIC_${string}`, import('zod').ZodType>} */ (
- {
- // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
- }
- ),
-);
-
-/**
- * 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.
- *
- * @type {Record<keyof z.infer<typeof server> | keyof z.infer<typeof client>, string | undefined>}
- */
-const processEnv = {
- DATABASE_URL: process.env.DATABASE_URL,
- NODE_ENV: process.env.NODE_ENV,
- NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
- NEXTAUTH_URL: process.env.NEXTAUTH_URL,
- DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
- DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
- // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
-};
-
-// Don't touch the part below
-// --------------------------
-
-const merged = server.merge(client);
-
-/** @typedef {z.input<typeof merged>} MergedInput */
-/** @typedef {z.infer<typeof merged>} MergedOutput */
-/** @typedef {z.SafeParseReturnType<MergedInput, MergedOutput>} MergedSafeParseReturn */
-
-let env = /** @type {MergedOutput} */ (process.env);
-
-const skip =
- !!process.env.SKIP_ENV_VALIDATION &&
- process.env.SKIP_ENV_VALIDATION !== "false" &&
- process.env.SKIP_ENV_VALIDATION !== "0";
-if (!skip) {
- const isServer = typeof window === "undefined";
-
- const parsed = /** @type {MergedSafeParseReturn} */ (
- isServer
- ? merged.safeParse(processEnv) // on server we can validate all env vars
- : client.safeParse(processEnv) // on client we can only validate the ones that are exposed
- );
-
- if (parsed.success === false) {
- console.error(
- "❌ Invalid environment variables:",
- parsed.error.flatten().fieldErrors,
- );
- throw new Error("Invalid environment variables");
- }
-
- env = new Proxy(parsed.data, {
- get(target, prop) {
- if (typeof prop !== "string") return undefined;
- // Throw a descriptive error if a server-side env var is accessed on the client
- // Otherwise it would just be returning `undefined` and be annoying to debug
- if (!isServer && !prop.startsWith("NEXT_PUBLIC_"))
- throw new Error(
- process.env.NODE_ENV === "production"
- ? "❌ Attempted to access a server-side environment variable on the client"
- : `❌ Attempted to access server-side environment variable '${prop}' on the client`,
- );
- return target[/** @type {keyof typeof target} */ (prop)];
- },
- });
-}
-
-export { env };