Skip to content

Commit 53e0361

Browse files
HofmannZHofmannZ
authored
Merge pull request #87 from expatfile/@HofmannZ/feature/cache-no-store
@hofmann z/feature/cache no store
2 parents 0abfe22 + 7f6fd39 commit 53e0361

File tree

12 files changed

+351
-199
lines changed

12 files changed

+351
-199
lines changed

‎README.md

+19-6
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,17 @@ your environment variables at build time. The context provider safely exposes al
3131

3232
### Compatibility 🤝
3333

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.
34+
Because `next-runtime-env` uses Next.js 14 caching, it is only compatible with Next.js 14 and up.
35+
36+
To use with Next.js 13 use [version 2.x][pages-router-branch-link]. Version 2.x is build on top of server components it is only compatible with Next.js 13 App Router.
37+
38+
Use [version 1.x][pages-router-branch-link] for Next.js 12/13 Page Router support.
39+
40+
### Versions 🔖
41+
42+
- `[email protected]` - Next.js 12/13 Page Router support.
43+
- `[email protected]` - Next.js 13 App Router support.
44+
- `[email protected]` - Next.js 14 caching support.
3545

3646
### Getting started 🚀
3747

@@ -54,11 +64,6 @@ export default function RootLayout({
5464
</html>
5565
);
5666
}
57-
58-
// 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-
export const dynamic = 'force-dynamic';
6267
```
6368

6469
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.
@@ -94,8 +99,13 @@ export default function SomePage() {
9499

95100
```tsx
96101
// app/server-page.tsx
102+
// This is as of Next.js 14, but you could also use other dynamic functions
103+
import { unstable_noStore as noStore } from 'next/cache';
97104

98105
export default function SomePage() {
106+
noStore(); // Opt into dynamic rendering
107+
108+
// This value will be evaluated at runtime
99109
return (
100110
<main >
101111
BAR: {process.env.BAR}
@@ -132,6 +142,8 @@ makeEnvPublic('FOO');
132142
makeEnvPublic(['BAR', 'BAZ']);
133143
```
134144

145+
> You can also use the experimental instrumentation hook introduced in Next.js 13. See the `with-app-router` example for more details.
146+
135147
### Maintenance 👷
136148

137149
This package is maintained and actively used by [Expatfile.tax][expatfile-site].
@@ -152,6 +164,7 @@ Also, a big shout out to @andonirdgz for the idea to use a context provider.
152164
[fundamental-principle-link]: https://cloud.redhat.com/blog/build-once-deploy-anywhere
153165
[twelve-factor-link]: https://12factor.net
154166
[pages-router-branch-link]: https://github.com/expatfile/next-runtime-env/tree/1.x
167+
[app-router-branch-link]: https://github.com/expatfile/next-runtime-env/tree/2.x
155168
[nextjs-env-vars]: https://nextjs.org/docs/basic-features/environment-variables
156169
[react-env-repo]: https://github.com/andrewmclagan/react-env
157170
[expatfile-site]: https://expatfile.tax

‎docs/EXPOSING_CUSTOM_ENV.md

+5-6
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,18 @@ You might not only want to expose environment variables that are prefixed with `
66

77
```tsx
88
// app/layout.tsx
9-
9+
// This is as of Next.js 14, but you could also use other dynamic functions
10+
import { unstable_noStore as noStore } from 'next/cache';
1011
import { EnvProvider } from 'next-runtime-env';
1112

1213
export default function RootLayout({
1314
children,
1415
}: {
1516
children: React.ReactNode;
1617
}) {
18+
noStore(); // Opt into dynamic rendering
19+
20+
// This value will be evaluated at runtime
1721
return (
1822
<html lang="en">
1923
<body>
@@ -31,9 +35,4 @@ export default function RootLayout({
3135
</html>
3236
);
3337
}
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
37-
// components that use [env]. 👇
38-
export const dynamic = 'force-dynamic';
3938
```

‎docs/GETTING_STARTED.md

+1-13
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,7 @@ export default function RootLayout({
3333

3434
> Keep in mind that the RuntimeEnvProvider must be added in a Server Component.
3535
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-
export const 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:
36+
3. Finally, use `useEnvContext` hook to access the runtime environment variables in your components:
4937

5038
```tsx
5139
import { useEnvContext } from 'next-runtime-env';

‎docs/MAKING_ENV_PUBLIC.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,6 @@ makeEnvPublic('FOO');
1515

1616
// Or you can make multiple env vars public at once.
1717
makeEnvPublic(['BAR', 'BAZ']);
18-
```
18+
```
19+
20+
> You can also use the experimental instrumentation hook introduced in Next.js 13. See the `with-app-router` example for more details.

‎examples/with-app-router/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@types/node": "20.8.10",
13-
"@types/react": "18.2.33",
14-
"@types/react-dom": "18.2.14",
15-
"eslint": "8.52.0",
12+
"@types/node": "20.9.0",
13+
"@types/react": "18.2.37",
14+
"@types/react-dom": "18.2.15",
15+
"eslint": "8.53.0",
1616
"eslint-config-next": "14.0.1",
1717
"next": "14.0.1",
1818
"next-runtime-env": "link:../..",

0 commit comments

Comments
 (0)