[Nextjs] Allow empty string for getPublicUrl

CHANGELOG.md

@@ -32,7 +32,11 @@ Our versioning strategy is as follows:
 * `[templates/nextjs]` Fix custom headers. Now in cors-header plugin extends custom headers from next.config.js file. ([#1637](https://github.com/Sitecore/jss/pull/1637))
 * `[sitecore-jss-react]` Fix PlaceholderCommon with using two and more dynamic placeholders. ([#1641](https://github.com/Sitecore/jss/pull/1641))
 * `[templates/nextjs-multisite]` Fix site info fetch errors (now skipped) on XM Cloud rendering/editing host builds. ([#1649](https://github.com/Sitecore/jss/pull/1649))
+* `[templates/nextjs]` `[sitecore-jss-nextjs]` Fix making a fetch to a nextjs api route in an editing environment, by adding additional variable publicUrl in runtime config ([#1656](https://github.com/Sitecore/jss/pull/1656))
 
+### 🛠 Breaking Changes
+
+* `[templates/nextjs]` `[sitecore-jss-nextjs]` Allow setting an empty string in PUBLIC_URL environment variable; PUBLIC_URL is commented out by default in .env; ([#1656](https://github.com/Sitecore/jss/pull/1656))
 
 ## 21.5.0
 

packages/create-sitecore-jss/src/templates/nextjs/.env

@@ -9,7 +9,8 @@
 # in your Sitecore configuration (see \sitecore\config\<%- appName %>.config).
 # Be sure to update these values accordingly as your public endpoint changes.
 # See https://jss.sitecore.com/docs/fundamentals/services/view-engine
-PUBLIC_URL=http://localhost:3000
+# In production non-editing environments it is desirable to use relative urls, so this may be set to empty string
+#PUBLIC_URL=http://localhost:3000
 
 # To secure the Sitecore editor endpoint exposed by your Next.js app
 # (`/api/editing/render` by default), a secret token is used. This (client-side)

packages/create-sitecore-jss/src/templates/nextjs/scripts/config/plugins/fallback.ts

@@ -1,6 +1,7 @@
 import chalk from 'chalk';
 import { JssConfig } from 'lib/config';
 import { ConfigPlugin } from '..';
+import { getPublicUrl } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 
 /**
  * This config will set fallback values for properties that were left empty
@@ -24,6 +25,7 @@ class FallbackPlugin implements ConfigPlugin {
       sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
       layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
       sitecoreEdgeUrl: config.sitecoreEdgeUrl || 'https://edge-platform.sitecorecloud.io',
+      publicUrl: config.publicUrl || getPublicUrl(),
     });
   }
 }

packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts

@@ -22,6 +22,7 @@ const defaultConfig: JssConfig = {
   defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
   layoutServiceConfigurationName: process.env[`${constantCase('layoutServiceConfigurationName')}`],
+  publicUrl: process.env[`${constantCase('publicUrl')}`],
 };
 
 generateConfig(defaultConfig);
@@ -34,10 +35,10 @@ generateConfig(defaultConfig);
 function generateConfig(defaultConfig: JssConfig): void {
   jssConfigFactory
     .create(defaultConfig)
-    .then((config) => {
+    .then(config => {
       writeConfig(config);
     })
-    .catch((e) => {
+    .catch(e => {
       console.error('Error generating config');
       console.error(e);
       process.exit(1);
@@ -55,9 +56,10 @@ function writeConfig(config: JssConfig): void {
 const config = {};\n`;
 
   // Set configuration values, allowing override with environment variables
-  Object.keys(config).forEach((prop) => {
+  Object.keys(config).forEach(prop => {
     configText += `config.${prop} = process.env.${constantCase(prop)} || '${config[prop]}',\n`;
   });
+
   configText += `module.exports = config;`;
 
   const configPath = path.resolve('src/temp/config.js');

packages/create-sitecore-jss/src/templates/nextjs/src/lib/config.ts

@@ -11,4 +11,5 @@ export interface JssConfig extends Record<string, string | undefined> {
   defaultLanguage?: string;
   graphQLEndpoint?: string;
   layoutServiceConfigurationName?: string;
+  publicUrl?: string;
 }

packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/cors-header.js

@@ -9,12 +9,27 @@ const corsHeaderPlugin = (nextConfig = {}) => {
   }
   return Object.assign({}, nextConfig, {
     async headers() {
-      const extendHeaders = typeof nextConfig.headers === "function" ? await nextConfig.headers() : [];
+      const extendHeaders =
+        typeof nextConfig.headers === 'function' ? await nextConfig.headers() : [];
       return [
-        ...await extendHeaders,
+        ...(await extendHeaders),
         {
           source: '/_next/:path*',
-          headers: [{ key: 'Access-Control-Allow-Origin', value: config.sitecoreApiHost }],
+          headers: [
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: config.sitecoreApiHost.replace(/\/$/, ''),
+            },
+          ],
+        },
+        {
+          source: '/api/:path*',
+          headers: [
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: config.sitecoreApiHost.replace(/\/$/, ''),
+            },
+          ],
         },
       ];
     },

packages/sitecore-jss-nextjs/src/utils/utils.test.ts

@@ -4,7 +4,7 @@ import { getPublicUrl, getJssEditingSecret } from './utils';
 
 describe('utils', () => {
   describe('getPublicUrl', () => {
-    after(() => {
+    afterEach(() => {
       delete process.env.PUBLIC_URL;
       delete process.env.VERCEL_URL;
     });
@@ -33,11 +33,33 @@ describe('utils', () => {
       expect(() => getPublicUrl()).to.throw();
     });
 
-    it('should use VERCEL_URL', () => {
+    it('should use VERCEL_URL if PUBLIC_URL is not defined', () => {
       process.env.VERCEL_URL = 'jss.uniqueid.vercel.com';
       const result = getPublicUrl();
       expect(result).to.equal('https://jss.uniqueid.vercel.com');
     });
+
+    it('should use PUBLIC_URL if PUBLIC_URL and VERCEL_URL are defined', () => {
+      process.env.VERCEL_URL = 'jss.uniqueid.vercel.com';
+      process.env.PUBLIC_URL = 'http://test.com';
+      const result = getPublicUrl();
+      expect(result).to.equal('http://test.com');
+    });
+
+    it('should use PUBLIC_URL if it is an empty string and VERCEL_URL is defined', () => {
+      process.env.VERCEL_URL = 'jss.uniqueid.vercel.com';
+      const publicUrl = '';
+      process.env.PUBLIC_URL = publicUrl;
+      const result = getPublicUrl();
+      expect(result).to.equal(publicUrl);
+    });
+
+    it('should use PUBLIC_URL if it is defined and is empty string', () => {
+      const publicUrl = '';
+      process.env.PUBLIC_URL = publicUrl;
+      const result = getPublicUrl();
+      expect(result).to.equal(publicUrl);
+    });
   });
   describe('getJssEditingSecret', () => {
     after(() => {

packages/sitecore-jss-nextjs/src/utils/utils.ts

@@ -8,20 +8,24 @@ import { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/u
  * VERCEL_URL is provided by Vercel in case if we are in Preview deployment (deployment based on the custom branch),
  * preview deployment has unique url, we don't know exact url.
  * Similarly, DEPLOY_URL is provided by Netlify and would give us the deploy URL
+ * In production non-editing environments it is desirable to use relative urls, so in that case set PUBLIC_URL = ''
  */
 export const getPublicUrl = (): string => {
-  if (process.env.NETLIFY && process.env.DEPLOY_URL) return process.env.DEPLOY_URL;
-  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
-
   let url = process.env.PUBLIC_URL;
+
   if (url === undefined) {
+    if (process.env.NETLIFY && process.env.DEPLOY_URL) return process.env.DEPLOY_URL;
+    if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+
     console.warn(
       `${chalk.yellow.bold(
         'Warning:'
       )} An PUBLIC_URL environment variable is not defined. Falling back to http://localhost:3000.`
     );
     url = 'http://localhost:3000';
   } else {
+    if (url === '') return url;
+
     try {
       new URL(url);
     } catch (error) {