diff --git a/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts b/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts
index 201c410729..be5d6ed6d6 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts
+++ b/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts
@@ -4,6 +4,10 @@ import path from 'path';
 import { constantCase } from 'constant-case';
 import { JssConfig } from 'lib/config';
 import { jssConfigFactory } from './config';
+import { loadEnvConfig } from '@next/env';
+
+const projectDir = process.cwd();
+loadEnvConfig(projectDir);
 
 /*
   CONFIG GENERATION
@@ -15,7 +19,8 @@ const defaultConfig: JssConfig = {
   sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
   sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
   sitecoreSiteName:
-    process.env[`${constantCase('sitecoreSiteName')}`] || process.env[`${constantCase('jssAppName')}`],
+    process.env[`${constantCase('sitecoreSiteName')}`] ||
+    process.env[`${constantCase('jssAppName')}`],
   graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
   defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],