Use Next.js Runtime Environment Variables (#26)

* use runtime environment variables * fixes https://codeberg.org/nesaku/BiblioReads/issues/85
nesaku · Nov 5, 2024 · 7f58be7 · 7f58be7
1 parent aa42d17
commit 7f58be7
Show file tree

Hide file tree

Showing 25 changed files with 188 additions and 112 deletions.
diff --git a/.gitignore b/.gitignore
@@ -42,4 +42,8 @@ next-env.d.ts
 **/public/worker-*.js
 **/public/worker-*.js.map
 **/public/workbox-*.js
-**/public/workbox-*.js.map
+**/public/workbox-*.js.map
+
+# Auto Generated Runtime ENV files
+**/public/__ENV.js
+**/public/fallback-*.js
diff --git a/components/aboutpage/FAQ.js b/components/aboutpage/FAQ.js
@@ -1,3 +1,4 @@
+import { env } from "next-runtime-env";
 import React from "react";
 
 const FAQ = () => {
@@ -56,13 +57,11 @@ const FAQ = () => {
               1. Visit{" "}
               <a
                 className="underline text-green-600 dark:text-green-500/80"
-                href={
-                  process.env.NEXT_PUBLIC_HOST_URL || "http://localhost:3000"
-                }
+                href={env("NEXT_PUBLIC_HOST_URL") || "http://localhost:3000"}
                 target="_blank"
                 rel="noreferrer"
               >
-                {process.env.NEXT_PUBLIC_HOST_URL || "http://localhost:3000"}
+                {env("NEXT_PUBLIC_HOST_URL") || "http://localhost:3000"}
               </a>{" "}
               and either paste the Goodreads book URL into the input box or
               search for a book using the input box.
@@ -74,7 +73,7 @@ const FAQ = () => {
               </span>{" "}
               of any book page URL with{" "}
               <span className="text-green-600 dark:text-green-500/80">
-                {process.env.NEXT_PUBLIC_HOST_URL || "http://localhost:3000"}
+                {env("NEXT_PUBLIC_HOST_URL") || "http://localhost:3000"}
               </span>
               .
             </p>

diff --git a/components/contactpage/ContactForm.js b/components/contactpage/ContactForm.js
@@ -1,3 +1,4 @@
+import { env } from "next-runtime-env";
 import Link from "next/link";
 import React from "react";
 
@@ -6,8 +7,8 @@ const ContactForm = () => {
     <div className="px-4 py-8 mb-20 mx-auto max-w-screen-sm text-center backdrop-blur-lg rounded-2xl">
       <form
         action={
-          process.env.NEXT_PUBLIC_CONTACT_FORM_SUBMISSION
-            ? process.env.NEXT_PUBLIC_CONTACT_FORM_SUBMISSION
+          env("NEXT_PUBLIC_CONTACT_FORM_SUBMISSION")
+            ? env("NEXT_PUBLIC_CONTACT_FORM_SUBMISSION")
             : "https://submit-form.com/4GkO3Bo7"
         }
         method="POST"
@@ -18,8 +19,8 @@ const ContactForm = () => {
             type="hidden"
             name="_redirect"
             value={
-              process.env.NEXT_PUBLIC_HOST_URL
-                ? `${process.env.NEXT_PUBLIC_HOST_URL}/success`
+              env("NEXT_PUBLIC_HOST_URL")
+                ? `${env("NEXT_PUBLIC_HOST_URL")}/success`
                 : "https://biblioreads.eu.org/success"
             }
           />

diff --git a/components/contactpage/ContactHero.js b/components/contactpage/ContactHero.js
@@ -1,11 +1,12 @@
+import { env } from "next-runtime-env";
 import React from "react";
 
 const ContactHero = () => {
   return (
     /*     <div className="mx-auto max-w-screen-xl min-h-[70vh] px-4 pt-20 pb-4 lg:flex lg:mt-20"> */
     <div
       className={`mx-auto max-w-screen-xl px-4 pt-20 pb-4 lg:flex lg:mt-20 ${
-        process.env.NEXT_PUBLIC_ENABLE_CONTACT_FORM != "true" && "min-h-[70vh]"
+        env("NEXT_PUBLIC_ENABLE_CONTACT_FORM") != "true" && "min-h-[70vh]"
       }`}
     >
       <div className="mx-auto max-w-3xl text-center text-gray-900 dark:text-white ">
@@ -36,14 +37,14 @@ const ContactHero = () => {
             </span>
           </a>
           .
-          {process.env.NEXT_PUBLIC_ENABLE_CONTACT_FORM === "true"
+          {env("NEXT_PUBLIC_ENABLE_CONTACT_FORM") === "true"
             ? " Alternatively, you can use the contact form below."
-            : process.env.NEXT_PUBLIC_INSTANCE_OPERATOR_LINK && (
+            : env("NEXT_PUBLIC_INSTANCE_OPERATOR_LINK") && (
                 <div className="mt-16 text-xl h-[45vh]">
                   You can reach the owner of this instance{" "}
                   <a
                     className="group text-blue-600 dark:text-blue-500 transition-all duration-300 ease-in-out"
-                    href={process.env.NEXT_PUBLIC_INSTANCE_OPERATOR_LINK}
+                    href={env("NEXT_PUBLIC_INSTANCE_OPERATOR_LINK")}
                     target="_blank"
                     rel="noreferrer"
                   >

diff --git a/components/global/Meta.js b/components/global/Meta.js
@@ -1,5 +1,6 @@
 import React from "react";
 import Head from "next/head";
+import { env } from "next-runtime-env";
 
 const Meta = (props) => {
   const title = `BiblioReads ${props.title ? `- ${props.title}` : ""}  `;
@@ -46,10 +47,10 @@ const Meta = (props) => {
       <meta property="og:description" content={descriptionOG} />
       <meta property="og:site_name" content="BiblioReads" />
       <meta property="og:type" content="website" />
-      {process.env.NEXT_PUBLIC_HOST_URL && (
+      {env("NEXT_PUBLIC_HOST_URL") && (
         <meta
           property="og:image"
-          content={`${process.env.NEXT_PUBLIC_HOST_URL}/social.png`}
+          content={`${env("NEXT_PUBLIC_HOST_URL")}/social.png`}
         />
       )}
     </Head>

diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
+
+const { configureRuntimeEnv } = require("next-runtime-env/build/configure");
+
+configureRuntimeEnv();
+
 const withPWA = require("next-pwa")({
   dest: "public",
   register: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "idb": "^8.0.0",
     "next": "12.3.1",
     "next-pwa": "^5.6.0",
+    "next-runtime-env": "^1.7.4",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,16 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        {/* eslint-disable-next-line @next/next/no-sync-scripts */}
+        <script src="/__ENV.js" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}