You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+49-115
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@
5
5
Populate your environment at **runtime** rather than **build time**.
6
6
7
7
- Isomorphic - Server and browser compatible (and even in middleware.)
8
-
-Static site generation support.
8
+
-Next.js 13 App Router compatible.
9
9
-`.env` support during development, just like [Next.js][nextjs-env-vars-order].
10
10
11
11
### Why we created this package 🤔
@@ -26,151 +26,88 @@ once, deploy many principle?
26
26
27
27
### This package 📦
28
28
29
-
`next-runtime-env` solves this problem by generating a JavaScript file that
30
-
contains the environment variables at runtime, so you no longer have to declare
31
-
your environment variables at build time. This file is loaded in the client,
32
-
safely exposing those variables to the browser. This allows you to follow the
33
-
build once, deploy many principle by providing differed runtime variables to the
34
-
same build.
29
+
`next-runtime-env` solves this problem by creating a context that exposes your environment variables at runtime, so you no longer have to declare
30
+
your environment variables at build time. The context provider safely exposes all environment variables prefixed with `NEXT_PUBLIC_` to the browser. This allows you to follow the build once, deploy many principle by providing differed runtime variables to the same build.
35
31
36
32
### Compatibility 🤝
37
33
38
-
Our approach is compatible with
39
-
[static site generation][static-generation-link] and supports middleware.
40
-
41
-
For Next.js 13 App Router support, user `[email protected]` or higher.
34
+
Because `next-runtime-env` is build on top of server components it is only compatible with Next.js 13 App Router. Use [version 1.x][pages-router-branch-link] for Next.js 13 Page Router support.
42
35
43
36
### Getting started 🚀
44
37
45
-
1.Add the following lines to your `next.config.js`:
// By default server components are statically generated at build-time. To make
59
+
// sure the env vars are actually loaded use, add the following line to server
60
+
// components that use [env]. 👇
61
+
exportconstdynamic='force-dynamic';
61
62
```
62
63
63
-
This will load the generated file in the browser.
64
+
The `PublicEnvProvider`will automatically expose all environment variables prefixed with `NEXT_PUBLIC_` to the context. If you want more control over which variables are exposed to the context, you can use the `EnvProvider` and define the exposed variables manually.
64
65
65
66
### Usage 🧑💻
66
67
67
-
In the browser, your variables will now be available at
68
-
`window.__ENV.NEXT_PUBLIC_FOO` and on the server at
69
-
`process.env.NEXT_PUBLIC_FOO`. For example:
68
+
In the browser your environment variables are now accessible using the `useEnvContext` hook. On the server you can use `process.env` because the layout is forced to be dynamic. For example:
You might not only want to expose environment variables that are prefixed with `NEXT_PUBLIC_`. In this case you can use the `EnvProvider` to expose custom environment variables to the context.
4
+
5
+
## Example
6
+
7
+
```tsx
8
+
// app/layout.tsx
9
+
10
+
import { EnvProvider } from'next-runtime-env';
11
+
12
+
exportdefaultfunction RootLayout({
13
+
children,
14
+
}: {
15
+
children:React.ReactNode;
16
+
}) {
17
+
return (
18
+
<htmllang="en">
19
+
<body>
20
+
<EnvProvider
21
+
env={{
22
+
NEXT_PUBLIC_: process.env.NEXT_PUBLIC_FOO,
23
+
BAR: process.env.BAR,
24
+
BAZ: process.env.BAZ,
25
+
notAnEnvVar: 'not-an-env-var',
26
+
}}
27
+
>
28
+
{children}
29
+
</EnvProvider>
30
+
</body>
31
+
</html>
32
+
);
33
+
}
34
+
35
+
// By default server components are statically generated at build-time. To make
36
+
// sure the env vars are actually loaded use, add the following line to server
> Keep in mind that the RuntimeEnvProvider must be added in a Server Component.
35
+
36
+
3. Next force dynamic generation for the Server Component by adding the following line:
37
+
38
+
```tsx
39
+
// src/app/layout.tsx
40
+
41
+
// ...
42
+
43
+
exportconst dynamic ='force-dynamic';
44
+
```
45
+
46
+
> By default server components are statically generated at build-time. To make sure the env vars are actually loaded during runtime, you need to force dynamic generation.
47
+
48
+
4. Finally, use `useEnvContext` hook to access the runtime environment variables in your components:
In some cases you might have control over the naming of the environment variables. (Or you simply don't want to prefix them with `NEXT_PUBLIC_`.) In this case you can use the `makeEnvPublic` utility function to make them public.
0 commit comments