feat: ✨ add support for Next.js 14 caching and update dependencies

BREAKING CHANGE: This version introduces a dependency on the Next.js 14 caching. It therefore only works with `"next": "^14"`.
expatfile · Nov 8, 2023 · 02985fb · 02985fb
1 parent 69de3f3
commit 02985fb
Show file tree

Hide file tree

Showing 12 changed files with 351 additions and 199 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,17 @@ your environment variables at build time. The context provider safely exposes al
 
 ### Compatibility 🤝
 
-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.
+Because `next-runtime-env` uses Next.js 14 caching, it is only compatible with Next.js 14 and up.
+
+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.
+
+Use [version 1.x][pages-router-branch-link] for Next.js 12/13 Page Router support.
+
+### Versions 🔖
+
+- `[email protected]` - Next.js 12/13 Page Router support.
+- `[email protected]` - Next.js 13 App Router support.
+- `[email protected]` - Next.js 14 caching support.
 
 ### Getting started 🚀
 
@@ -54,11 +64,6 @@ export default function RootLayout({
     </html>
   );
 }
-
-// By default server components are statically generated at build-time. To make
-// sure the env vars are actually loaded use, add the following line to server
-// components that use [env]. 👇
-export const dynamic = 'force-dynamic';
 ```
 
 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() {
 
 ```tsx
 // app/server-page.tsx
+// This is as of Next.js 14, but you could also use other dynamic functions
+import { unstable_noStore as noStore } from 'next/cache';
 
 export default function SomePage() {
+  noStore(); // Opt into dynamic rendering
+
+  // This value will be evaluated at runtime
   return (
     <main >
       BAR: {process.env.BAR}
@@ -132,6 +142,8 @@ makeEnvPublic('FOO');
 makeEnvPublic(['BAR', 'BAZ']);
 ```
 
+> You can also use the experimental instrumentation hook introduced in Next.js 13. See the `with-app-router` example for more details.
+
 ### Maintenance 👷
 
 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.
 [fundamental-principle-link]: https://cloud.redhat.com/blog/build-once-deploy-anywhere
 [twelve-factor-link]: https://12factor.net
 [pages-router-branch-link]: https://github.com/expatfile/next-runtime-env/tree/1.x
+[app-router-branch-link]: https://github.com/expatfile/next-runtime-env/tree/2.x
 [nextjs-env-vars]: https://nextjs.org/docs/basic-features/environment-variables
 [react-env-repo]: https://github.com/andrewmclagan/react-env
 [expatfile-site]: https://expatfile.tax
diff --git a/docs/EXPOSING_CUSTOM_ENV.md b/docs/EXPOSING_CUSTOM_ENV.md
@@ -6,14 +6,18 @@ You might not only want to expose environment variables that are prefixed with `
 
 ```tsx
 // app/layout.tsx
-
+// This is as of Next.js 14, but you could also use other dynamic functions
+import { unstable_noStore as noStore } from 'next/cache';
 import { EnvProvider } from 'next-runtime-env';
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  noStore(); // Opt into dynamic rendering
+
+  // This value will be evaluated at runtime
   return (
     <html lang="en">
       <body>
@@ -31,9 +35,4 @@ export default function RootLayout({
     </html>
   );
 }
-
-// By default server components are statically generated at build-time. To make
-// sure the env vars are actually loaded use, add the following line to server
-// components that use [env]. 👇
-export const dynamic = 'force-dynamic';
 ```
diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md
@@ -33,19 +33,7 @@ export default function RootLayout({
 
 > Keep in mind that the RuntimeEnvProvider must be added in a Server Component.
 
-3. Next force dynamic generation for the Server Component by adding the following line:
-
-```tsx
-// src/app/layout.tsx
-
-// ...
-
-export const dynamic = 'force-dynamic';
-```
-
-> 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.
-
-4. Finally, use `useEnvContext` hook to access the runtime environment variables in your components:
+3. Finally, use `useEnvContext` hook to access the runtime environment variables in your components:
 
 ```tsx
 import { useEnvContext } from 'next-runtime-env';

diff --git a/docs/MAKING_ENV_PUBLIC.md b/docs/MAKING_ENV_PUBLIC.md
@@ -15,4 +15,6 @@ makeEnvPublic('FOO');
 
 // Or you can make multiple env vars public at once.
 makeEnvPublic(['BAR', 'BAZ']);
-```
+```
+
+> You can also use the experimental instrumentation hook introduced in Next.js 13. See the `with-app-router` example for more details.
diff --git a/examples/with-app-router/package.json b/examples/with-app-router/package.json
@@ -9,10 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/node": "20.8.10",
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14",
-    "eslint": "8.52.0",
+    "@types/node": "20.9.0",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "eslint": "8.53.0",
     "eslint-config-next": "14.0.1",
     "next": "14.0.1",
     "next-runtime-env": "link:../..",