\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."},"warnings":[{"fix":"Consult the `next-runtime-env` documentation for the correct version matching your Next.js setup: v1.x for Next.js 12/13 Pages Router, v2.x for Next.js 13 App Router, and v3.x for Next.js 14 App Router with improved caching.","message":"next-runtime-env has distinct major versions that are compatible with specific Next.js major versions and router types. Using an incompatible version will lead to unexpected behavior or breakage.","severity":"breaking","affected_versions":">=1.0"},{"fix":"Always use the `env('YOUR_VAR_NAME')` function provided by `next-runtime-env` within client components to correctly access environment variables exposed at runtime. `process.env` is only reliable for server-side or build-time variables.","message":"When using `next-runtime-env`, developers might mistakenly attempt to access runtime-injected environment variables via `process.env` in client-side code, which will only yield build-time values or `undefined`.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Add `next-runtime-env` to the `experimental.serverComponentsExternalPackages` array in your `next.config.js` to ensure proper functionality and avoid potential issues with server-side rendering and hydration.","message":"For `next-runtime-env` v3.x and Next.js 14, specifically when using server components or a 'context approach', you might need to explicitly configure `next-runtime-env` in `serverComponentsExternalPackages` within `next.config.js`.","severity":"gotcha","affected_versions":">=3.2.2"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"For runtime-injected environment variables in client-side code, use `import { env } from 'next-runtime-env';` and then `env('YOUR_VAR_NAME')`.","cause":"Attempting to access `process.env.VAR_NAME` directly in a client-side component or browser environment where `process` is not available.","error":"ReferenceError: process is not defined"},{"fix":"Ensure `PublicEnvScript` is present and correctly placed in the ``. Verify that public variables are prefixed with `NEXT_PUBLIC_`. For non-public variables, follow the documentation on using `makeEnvPublic`.","cause":"`PublicEnvScript` is not correctly rendered in the `` of your root layout (`app/layout.tsx` for App Router or `pages/_document.tsx` for Pages Router), or variables are not prefixed with `NEXT_PUBLIC_` (or explicitly exposed).","error":"Environment variables appear as `undefined` or empty strings on the client."},{"fix":"Check the `next-runtime-env` compatibility guide in its README. For Next.js 12/13 Pages Router, use `next-runtime-env@1.x`. For Next.js 13 App Router, use `next-runtime-env@2.x`. For Next.js 14 App Router, use `next-runtime-env@3.x`.","cause":"The installed version of `next-runtime-env` does not match the major version of your Next.js project or its configured router type (Pages Router vs. App Router).","error":"Error: \"next-runtime-env\" is not compatible with Next.js X. Please use version Y. (or similar message indicating version mismatch)"}],"ecosystem":"npm"}