Merge pull request #2 from jjablonski-it/t3-env

README.md

@@ -30,6 +30,7 @@ With this template, you get all the awesomeness you need:
 - 🤖🧠 **[Automated ChatGPT Code Reviews](https://openai.com/research/chatgpt)** - **Stay on the cutting edge with AI-powered code reviews!**
 - 💯 **Perfect Lighthouse score** - Because performance matters
 - 🚢 **[Semantic Release](https://github.com/semantic-release/semantic-release)** - for automatic changelog
+- 💻 **[T3 Env](https://env.t3.gg/)** - Manage your environment variables with ease
 
 ## Table of Contents
 
@@ -51,6 +52,7 @@ With this template, you get all the awesomeness you need:
     - [Jotai](#jotai)
     - [Recoil](#recoil)
   - [🤖 ChatGPT Code Review](#-chatgpt-code-review)
+  - [💻 Environment Variables handling](#-environment-variables-handling)
   - [🤝 Contribution](#-contribution)
   - [📜 License](#-license)
   - [Contributors](#contributors)
@@ -221,6 +223,36 @@ To use ChatGPT Code Review, add an `OPENAI_API_KEY` environment variable with an
 
 ![image](https://user-images.githubusercontent.com/28964599/233685071-e1371edf-6359-41c3-a989-335d6ee09cb7.png)
 
+## 💻 Environment Variables handling
+
+[T3 Env](https://env.t3.gg/) is a library that provides environmental variables checking at build time, type validation and transforming. It ensures that your application is using the correct environment variables and their values are of the expected type. You’ll never again struggle with runtime errors caused by incorrect environment variable usage.
+
+Config file is located at `env.mjs`. Simply set your client and server variables and import `env` from any file in your project.
+
+```ts
+export const env = createEnv({
+  server: {
+    // Server variables
+    SECRET_KEY: z.string(),
+  },
+  client: {
+    // Client variables
+    API_URL: z.string().url(),
+  },
+  runtimeEnv: {
+    // Assign runtime variables
+    SECRET_KEY: process.env.SECRET_KEY,
+    API_URL: process.env.NEXT_PUBLIC_API_URL,
+  },
+})
+```
+
+If the required environment variables are not set, you'll get an error message:
+
+```sh
+  ❌ Invalid environment variables: { SECRET_KEY: [ 'Required' ] }
+```
+
 ## 🤝 Contribution
 
 Contributions are always welcome! To contribute, please follow these steps:

env.mjs

@@ -0,0 +1,15 @@
+import { createEnv } from "@t3-oss/env-nextjs"
+import { z } from "zod"
+
+export const env = createEnv({
+  server: {
+    ANALYZE: z
+      .enum(["true", "false"])
+      .optional()
+      .transform((value) => value === "true"),
+  },
+  client: {},
+  runtimeEnv: {
+    ANALYZE: process.env.ANALYZE,
+  },
+})

next.config.mjs

@@ -1,13 +1,11 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
-  enabled: process.env.ANALYZE === "true",
-})
-const withPlugins = require("next-compose-plugins")
+import withBundleAnalyzer from "@next/bundle-analyzer"
+import withPlugins from "next-compose-plugins"
+import { env } from "./env.mjs"
 
 /**
  * @type {import('next').NextConfig}
  */
-module.exports = withPlugins([[withBundleAnalyzer]], {
+const config = withPlugins([[withBundleAnalyzer({ enabled: env.ANALYZE })]], {
   reactStrictMode: true,
   experimental: { instrumentationHook: true },
   rewrites() {
@@ -19,3 +17,5 @@ module.exports = withPlugins([[withBundleAnalyzer]], {
     ]
   },
 })
+
+export default config

package.json

@@ -37,13 +37,15 @@
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
+    "@t3-oss/env-nextjs": "^0.2.2",
     "@vercel/otel": "^0.2.0",
     "class-variance-authority": "^0.4.0",
     "lodash": "^4.17.21",
     "next": "^13.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwind-merge": "^1.10.0"
+    "tailwind-merge": "^1.10.0",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

tsconfig.json

@@ -18,6 +18,6 @@
     "incremental": true,
     "baseUrl": "."
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs"],
   "exclude": ["node_modules"]
 }

yarn.lock

@@ -3549,6 +3549,18 @@
   dependencies:
     tslib "^2.4.0"
 
+"@t3-oss/env-core@0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@t3-oss/env-core/-/env-core-0.2.2.tgz#e216ce44d4618d6f69c240efc02bd9e15221035b"
+  integrity sha512-Jiuph14/L3L9EDaU0O0YiLeaKUcWA9c3mWYuKem8+L64i3Iwz+IbKdl5Jp4cx+JbOsS/aptwGZplnxSHhm2gMQ==
+
+"@t3-oss/env-nextjs@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@t3-oss/env-nextjs/-/env-nextjs-0.2.2.tgz#e638e22563cb1782a3c8f5d837caa00714de22a2"
+  integrity sha512-9LnVpTkf/8WkggyVN6Liz9Ma9a7fLzV00b5BngWj3HI3iWDfddsWaqCf/H0f46Bgu29NubP3Bwajf1JieVrxFA==
+  dependencies:
+    "@t3-oss/env-core" "0.2.2"
+
 "@testing-library/dom@^8.3.0":
   version "8.20.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.0.tgz#914aa862cef0f5e89b98cc48e3445c4c921010f6"
@@ -12017,3 +12029,8 @@ yocto-queue@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
+
+zod@^3.21.4:
+  version "3.21.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
+  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==