feat: add t3-env for env var

app/(docs)/docs/[[...slug]]/page.tsx

@@ -10,6 +10,7 @@ import { DashboardTableOfContents } from "@/components/toc"
 import "@/styles/mdx.css"
 import { Metadata } from "next"
 
+import { env } from "@/env.mjs"
 import { absoluteUrl } from "@/lib/utils"
 
 interface DocPageProps {
@@ -38,7 +39,7 @@ export async function generateMetadata({
     return {}
   }
 
-  const url = process.env.NEXT_PUBLIC_APP_URL
+  const url = env.NEXT_PUBLIC_APP_URL
 
   const ogUrl = new URL(`${url}/api/og`)
   ogUrl.searchParams.set("heading", doc.description ?? doc.title)

app/(docs)/guides/[...slug]/page.tsx

@@ -11,6 +11,7 @@ import { DashboardTableOfContents } from "@/components/toc"
 import "@/styles/mdx.css"
 import { Metadata } from "next"
 
+import { env } from "@/env.mjs"
 import { absoluteUrl, cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 
@@ -40,7 +41,7 @@ export async function generateMetadata({
     return {}
   }
 
-  const url = process.env.NEXT_PUBLIC_APP_URL
+  const url = env.NEXT_PUBLIC_APP_URL
 
   const ogUrl = new URL(`${url}/api/og`)
   ogUrl.searchParams.set("heading", guide.title)

app/(marketing)/[...slug]/page.tsx

@@ -6,6 +6,7 @@ import { Mdx } from "@/components/mdx-components"
 import "@/styles/mdx.css"
 import { Metadata } from "next"
 
+import { env } from "@/env.mjs"
 import { siteConfig } from "@/config/site"
 import { absoluteUrl } from "@/lib/utils"
 
@@ -35,7 +36,7 @@ export async function generateMetadata({
     return {}
   }
 
-  const url = process.env.NEXT_PUBLIC_APP_URL
+  const url = env.NEXT_PUBLIC_APP_URL
 
   const ogUrl = new URL(`${url}/api/og`)
   ogUrl.searchParams.set("heading", page.title)

app/(marketing)/blog/[...slug]/page.tsx

@@ -8,6 +8,7 @@ import { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 
+import { env } from "@/env.mjs"
 import { absoluteUrl, cn, formatDate } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
@@ -38,7 +39,7 @@ export async function generateMetadata({
     return {}
   }
 
-  const url = process.env.NEXT_PUBLIC_APP_URL
+  const url = env.NEXT_PUBLIC_APP_URL
 
   const ogUrl = new URL(`${url}/api/og`)
   ogUrl.searchParams.set("heading", post.title)

app/(marketing)/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link"
 
+import { env } from "@/env.mjs"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
@@ -11,7 +12,7 @@ async function getGitHubStars(): Promise<string | null> {
       {
         headers: {
           Accept: "application/vnd.github+json",
-          Authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,
+          Authorization: `Bearer ${env.GITHUB_ACCESS_TOKEN}`,
         },
         next: {
           revalidate: 60,

app/api/webhooks/stripe/route.ts

@@ -1,6 +1,7 @@
 import { headers } from "next/headers"
 import Stripe from "stripe"
 
+import { env } from "@/env.mjs"
 import { db } from "@/lib/db"
 import { stripe } from "@/lib/stripe"
 
@@ -14,7 +15,7 @@ export async function POST(req: Request) {
     event = stripe.webhooks.constructEvent(
       body,
       signature,
-      process.env.STRIPE_WEBHOOK_SECRET || ""
+      env.STRIPE_WEBHOOK_SECRET
     )
   } catch (error) {
     return new Response(`Webhook Error: ${error.message}`, { status: 400 })

config/subscriptions.ts

@@ -1,4 +1,5 @@
 import { SubscriptionPlan } from "types"
+import { env } from "@/env.mjs"
 
 export const freePlan: SubscriptionPlan = {
   name: "Free",
@@ -10,5 +11,5 @@ export const freePlan: SubscriptionPlan = {
 export const proPlan: SubscriptionPlan = {
   name: "PRO",
   description: "The PRO plan has unlimited posts.",
-  stripePriceId: process.env.STRIPE_PRO_MONTHLY_PLAN_ID || "",
+  stripePriceId: env.STRIPE_PRO_MONTHLY_PLAN_ID || "",
 }

env.mjs

@@ -0,0 +1,41 @@
+import { createEnv } from "@t3-oss/env-nextjs"
+import { z } from "zod"
+
+export const env = createEnv({
+  server: {
+    // This is optional because it's only used in development.
+    // See https://next-auth.js.org/deployment.
+    NEXTAUTH_URL: z.string().url().optional(),
+    NEXTAUTH_SECRET: z.string().min(1),
+    GITHUB_CLIENT_ID: z.string().min(1),
+    GITHUB_CLIENT_SECRET: z.string().min(1),
+    GITHUB_ACCESS_TOKEN: z.string().min(1),
+    DATABASE_URL: z.string().min(1),
+    SMTP_FROM: z.string().min(1),
+    POSTMARK_API_TOKEN: z.string().min(1),
+    POSTMARK_SIGN_IN_TEMPLATE: z.string().min(1),
+    POSTMARK_ACTIVATION_TEMPLATE: z.string().min(1),
+    STRIPE_API_KEY: z.string().min(1),
+    STRIPE_WEBHOOK_SECRET: z.string().min(1),
+    STRIPE_PRO_MONTHLY_PLAN_ID: z.string().min(1),
+  },
+  client: {
+    NEXT_PUBLIC_APP_URL: z.string().min(1),
+  },
+  runtimeEnv: {
+    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
+    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
+    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
+    GITHUB_ACCESS_TOKEN: process.env.GITHUB_ACCESS_TOKEN,
+    DATABASE_URL: process.env.DATABASE_URL,
+    SMTP_FROM: process.env.SMTP_FROM,
+    POSTMARK_API_TOKEN: process.env.POSTMARK_API_TOKEN,
+    POSTMARK_SIGN_IN_TEMPLATE: process.env.POSTMARK_SIGN_IN_TEMPLATE,
+    POSTMARK_ACTIVATION_TEMPLATE: process.env.POSTMARK_ACTIVATION_TEMPLATE,
+    STRIPE_API_KEY: process.env.STRIPE_API_KEY,
+    STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
+    STRIPE_PRO_MONTHLY_PLAN_ID: process.env.STRIPE_PRO_MONTHLY_PLAN_ID,
+    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
+  },
+})

lib/auth.ts

@@ -4,11 +4,11 @@ import EmailProvider from "next-auth/providers/email"
 import GitHubProvider from "next-auth/providers/github"
 import { Client } from "postmark"
 
+import { env } from "@/env.mjs"
 import { siteConfig } from "@/config/site"
 import { db } from "@/lib/db"
 
-// TODO: Move env vars to env a la t3.
-const postmarkClient = new Client(process.env.POSTMARK_API_TOKEN || "")
+const postmarkClient = new Client(env.POSTMARK_API_TOKEN)
 
 export const authOptions: NextAuthOptions = {
   // huh any! I know.
@@ -23,11 +23,11 @@ export const authOptions: NextAuthOptions = {
   },
   providers: [
     GitHubProvider({
-      clientId: process.env.GITHUB_CLIENT_ID || "",
-      clientSecret: process.env.GITHUB_CLIENT_SECRET || "",
+      clientId: env.GITHUB_CLIENT_ID,
+      clientSecret: env.GITHUB_CLIENT_SECRET,
     }),
     EmailProvider({
-      from: process.env.SMTP_FROM,
+      from: env.SMTP_FROM,
       sendVerificationRequest: async ({ identifier, url, provider }) => {
         const user = await db.user.findUnique({
           where: {
@@ -39,8 +39,8 @@ export const authOptions: NextAuthOptions = {
         })
 
         const templateId = user?.emailVerified
-          ? process.env.POSTMARK_SIGN_IN_TEMPLATE
-          : process.env.POSTMARK_ACTIVATION_TEMPLATE
+          ? env.POSTMARK_SIGN_IN_TEMPLATE
+          : env.POSTMARK_ACTIVATION_TEMPLATE
         if (!templateId) {
           throw new Error("Missing template id")
         }

lib/stripe.ts

@@ -1,6 +1,8 @@
 import Stripe from "stripe"
 
-export const stripe = new Stripe(process.env.STRIPE_API_KEY || "", {
+import { env } from "@/env.mjs"
+
+export const stripe = new Stripe(env.STRIPE_API_KEY, {
   apiVersion: "2022-11-15",
   typescript: true,
 })

lib/utils.ts

@@ -1,6 +1,8 @@
 import { ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
+import { env } from "@/env.mjs"
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
@@ -15,5 +17,5 @@ export function formatDate(input: string | number): string {
 }
 
 export function absoluteUrl(path: string) {
-  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
+  return `${env.NEXT_PUBLIC_APP_URL}${path}`
 }

next.config.mjs

@@ -1,5 +1,7 @@
 import { withContentlayer } from "next-contentlayer"
 
+import "./env.mjs"
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,

package.json

@@ -56,6 +56,7 @@
     "@radix-ui/react-toggle": "^1.0.2",
     "@radix-ui/react-toggle-group": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
+    "@t3-oss/env-nextjs": "^0.2.2",
     "@typescript-eslint/parser": "^5.59.0",
     "@vercel/analytics": "^1.0.0",
     "@vercel/og": "^0.0.21",
@@ -66,7 +67,7 @@
     "contentlayer": "^0.3.1",
     "date-fns": "^2.29.3",
     "lucide-react": "^0.92.0",
-    "next": "^13.3.1",
+    "next": "13.3.2-canary.13",
     "next-auth": "4.22.1",
     "next-contentlayer": "^0.3.1",
     "next-themes": "^0.2.1",