🚀 nextjs-env-injector

💡 Inject runtime environment variables into your Next.js app — without rebuilding!
Perfect for Docker, Amplify, Vercel, or any platform where runtime configs are dynamic.

🔥 Why nextjs-env-injector?

✅ Load config at runtime — no rebuild required
✅ Compatible with Next.js App Router and Pages Router
✅ Fully typed hook support for useRuntimeEnv()
✅ Supports fallback UI during async config load
✅ Ideal for CI/CD and multi-environment deployments

🧠 "Stop hardcoding, start injecting."

📦 Installation

npm install nextjs-env-injector

🛠 How It Works

At runtime, it fetches a JSON config from /public/env-config.json
and makes it available via:

• window.env
• useRuntimeEnv() hook

No environment variable is bundled — just runtime injected 🪄

🧪 Usage

1️⃣ Create public/env-config.json

{
  "API_URL": "https://api.example.com",
  "APP_ENV": "production"
}

⚠️ DO NOT put secrets here — it's public.

2️⃣ Inject the runtime config in your layout/app file

App Router (app/layout.tsx) or Pages Router (pages/_app.tsx):

import { InjectRuntimeEnv } from "nextjs-env-injector";

<InjectRuntimeEnv
  envPath="/env-config.json"
  fallback={<div>Loading env...</div>}
/>

• envPath: (optional) path to JSON config file
• fallback: (optional) JSX fallback while loading config

3️⃣ Access env values

✅ Via hook (preferred)

import { useRuntimeEnv } from "nextjs-env-injector";

const env = useRuntimeEnv();
console.log(env.API_URL); // "https://api.example.com"

✅ Or via global window.env

console.log(window.env?.API_URL);

🌐 Common Use Cases

| Use Case | Supported ✅ | |------------------------------|--------------| | Docker runtime env injection | ✅ | | Amplify or Vercel configs | ✅ | | Multi-tenant deployments | ✅ | | Secrets management | ❌ (Don't use for secrets!) |

🧑‍💻 Dev Tips

• You can generate env-config.json dynamically in CI/CD or Docker:

echo '{"API_URL": "'"$API_URL"'"}' > public/env-config.json

• Always wrap your app early with <InjectRuntimeEnv /> to ensure availability before any access.

🛠 Build & Publish (for maintainers)

npm run build
npm publish --access public

📜 License

MIT © Hareesh Bhittam

💬 Contribute & Support

If you find this useful, give it a ⭐ and share it!
Open an issue or create a PR for improvements.

Made with ❤️ by Hareesh Bhittam