{"library":"next-runtime-env","title":"Next.js Runtime Environment Configuration","description":"next-runtime-env is a crucial utility for Next.js applications, enabling the dynamic injection of environment variables at runtime rather than solely at build time. This capability is fundamental for adhering to the \"build once, deploy many\" philosophy, a cornerstone of continuous delivery and the twelve-factor methodology, which Next.js often lacks native support for in frontend contexts. The library allows developers to use the same build artifact across various environments, such as development, staging, and production, without the need for environment-specific rebuilds. The current stable version is `3.3.0`, with recent alpha and stable releases indicating active maintenance. It offers isomorphic design, ensuring seamless operation across server, browser, and middleware environments. Key differentiators include full compatibility with Next.js 13 and 14, and native support for `.env` files during development. The package maintains distinct major versions (1.x, 2.x, 3.x) to align with specific Next.js router types and major versions, providing tailored solutions for the Pages Router (1.x), Next.js 13 App Router (2.x), and Next.js 14 with enhanced caching (3.x).","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install next-runtime-env"],"cli":null},"imports":["import { PublicEnvScript } from 'next-runtime-env';","import { env } from 'next-runtime-env';","import { makeEnvPublic } from 'next-runtime-env';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { PublicEnvScript } from 'next-runtime-env';\nimport { env } from 'next-runtime-env';\nimport React, { useEffect, useState } from 'react';\n\n// next.config.mjs (Optional, but recommended for Next.js 14 / v3.x)\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n experimental: {\n // This ensures next-runtime-env functions correctly with server components\n serverComponentsExternalPackages: ['next-runtime-env'],\n },\n};\nexport default nextConfig;\n\n// app/layout.tsx\n// Place PublicEnvScript in the of your root layout\nexport default function RootLayout({\n children,\n}: { children: React.ReactNode }) {\n return (\n \n \n \n \n \n

My Next.js Runtime Environment App

\n {children}\n \n \n );\n}\n\n// app/client-page.tsx (Example of consuming variables client-side)\n'use client'; // Mark as a client component\n\nexport default function SomePage() {\n const [fooEnv, setFooEnv] = useState();\n const [barEnv, setBarEnv] = useState();\n\n useEffect(() => {\n // Access variables using the 'env' function\n setFooEnv(env('NEXT_PUBLIC_FOO_RUNTIME'));\n setBarEnv(env('NEXT_PUBLIC_BAR_RUNTIME'));\n }, []);\n\n return (\n
\n

Client-Side Runtime Variables

\n

NEXT_PUBLIC_FOO_RUNTIME: {fooEnv ?? 'Not set'}

\n

NEXT_PUBLIC_BAR_RUNTIME: {barEnv ?? 'Not set'}

\n

To see these, ensure NEXT_PUBLIC_FOO_RUNTIME and NEXT_PUBLIC_BAR_RUNTIME are in your .env.local or deployment environment.

\n
\n );\n}\n\n// Example .env.local file (for local development)\n// NEXT_PUBLIC_FOO_RUNTIME=hello-from-runtime-dev\n// NEXT_PUBLIC_BAR_RUNTIME=another-runtime-var-dev","lang":"typescript","description":"This quickstart demonstrates how to configure `next-runtime-env` for a Next.js App Router project (v3.x), placing `PublicEnvScript` in `app/layout.tsx` to expose environment variables and then accessing them in a client component using the `env` function.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}