diff --git a/README.md b/README.md index eaba514..f39a864 100644 --- a/README.md +++ b/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: diff --git a/env.mjs b/env.mjs new file mode 100644 index 0000000..a3adf0e --- /dev/null +++ b/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, + }, +}) diff --git a/next.config.js b/next.config.mjs similarity index 59% rename from next.config.js rename to next.config.mjs index 113fd61..72864c7 100644 --- a/next.config.js +++ b/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 diff --git a/package.json b/package.json index 6f8a8e8..f7463fa 100644 --- a/package.json +++ b/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", diff --git a/tsconfig.json b/tsconfig.json index 5d88d20..32b3fdd 100644 --- a/tsconfig.json +++ b/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"] } diff --git a/yarn.lock b/yarn.lock index 478b4cf..a070881 100644 --- a/yarn.lock +++ b/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==