Prefix env var with NEXT_PUBLIC_ to enable replacement

Author: junekimdev

components/meta/gtag.tsx

@@ -1,6 +1,6 @@
 import Script from 'next/script';
 
-const GTAG_ID = process.env.GTAG_ID || 'GTM-MXDVTH6';
+const GTAG_ID = process.env.NEXT_PUBLIC_GTAG_ID || 'GTM-MXDVTH6';
 const gtag = () => (
   <Script
     strategy="afterInteractive"

components/meta/meta.tsx

@@ -3,9 +3,9 @@ import Head from 'next/head';
 import { TMPropsMeta } from './metaType';
 
 const Meta = (props: TMPropsMeta) => {
-  const authorName = process.env.AUTHOR_NAME ?? 'junekimdev';
-  const siteName = process.env.SITE_NAME ?? "another junekimdev's website";
-  const homeUrl = process.env.PUBLIC_URL ?? 'localhost:3000';
+  const authorName = 'junekimdev';
+  const siteName = "another junekimdev's website";
+  const homeUrl = process.env.NEXT_PUBLIC_PUBLIC_URL ?? 'localhost:3000';
   const {
     image = `${homeUrl}/assets/images/LogoPlace_Extended_1200x627.png`,
     imageWidth = '1200',

next.config.js

@@ -2,10 +2,10 @@ module.exports = {
   // @see https://nextjs.org/docs/api-reference/next.config.js/environment-variables
   // This sets environment variable for SSR
   env: {
-    PUBLIC_URL: process.env.PUBLIC_URL,
-    // CMS_URL: process.env.CMS_URL,
-    // GTAG_ID: process.env.GTAG_ID,
-    API_URL: process.env.API_URL,
+    NEXT_PUBLIC_PUBLIC_URL: process.env.NEXT_PUBLIC_PUBLIC_URL,
+    // NEXT_PUBLIC_CMS_URL: process.env.NEXT_PUBLIC_CMS_URL,
+    // NEXT_PUBLIC_GTAG_ID: process.env.NEXT_PUBLIC_GTAG_ID,
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
   },
   // @see https://github.com/zeit/next.js/wiki/Deployment
   // When process.env.BUILD_ID is undefined, fall back to the default