[NextJS] Enable monorepo in Vercel

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

@@ -69,7 +69,7 @@ export {
   useComponentProps,
 } from './components/ComponentPropsContext';
 
-export { handleExperienceEditorFastRefresh } from './utils';
+export { handleExperienceEditorFastRefresh, getPublicUrl } from './utils';
 
 export { EditingData, EditingPreviewData, isEditingData } from './sharedTypes/editing-data';
 export {

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

@@ -6,6 +6,7 @@ describe('utils', () => {
   describe('getPublicUrl', () => {
     after(() => {
       delete process.env.PUBLIC_URL;
+      delete process.env.VERCEL_URL;
     });
 
     it('should fallback to localhost:3000 if not defined', () => {
@@ -31,6 +32,12 @@ describe('utils', () => {
       process.env.PUBLIC_URL = 'nope';
       expect(() => getPublicUrl()).to.throw();
     });
+
+    it('should use VERCEL_URL', () => {
+      process.env.VERCEL_URL = 'jss.uniqueid.vercel.com';
+      const result = getPublicUrl();
+      expect(result).to.equal('https://jss.uniqueid.vercel.com');
+    })
   });
   describe('getJssEditingSecret', () => {
     after(() => {

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

@@ -1,7 +1,16 @@
 import chalk from 'chalk';
 import { isExperienceEditorActive, resetExperienceEditorChromes } from '@sitecore-jss/sitecore-jss';
 
+/**
+ * Get the publicUrl.
+ * This is used primarily to enable compatibility with the Sitecore Experience Editor.
+ * This is set to http://localhost:3000 by default.
+ * 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.
+ */
 export const getPublicUrl = (): string => {
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+
   let url = process.env.PUBLIC_URL;
   if (url === undefined) {
     console.warn(

samples/nextjs/next.config.js

@@ -1,13 +1,11 @@
 const jssConfig = require('./src/temp/config');
 const packageConfig = require('./package.json').config;
-const { JSS_MODE_DISCONNECTED } = require('@sitecore-jss/sitecore-jss-nextjs');
+const { JSS_MODE_DISCONNECTED, getPublicUrl } = require('@sitecore-jss/sitecore-jss-nextjs');
 
 const disconnectedServerUrl = `http://localhost:${process.env.PROXY_PORT || 3042}/`;
 const isDisconnected = process.env.JSS_MODE === JSS_MODE_DISCONNECTED;
 
-// A public URL (and uses below) is required for Sitecore Experience Editor support.
-// This is set to http://localhost:3000 by default. See .env for more details.
-const publicUrl = process.env.PUBLIC_URL;
+const publicUrl = getPublicUrl();
 
 const nextConfig = {
 

samples/nextjs/src/Layout.tsx

@@ -2,11 +2,11 @@ import Head from 'next/head';
 import Link from 'next/link';
 import { useEffect } from 'react';
 import { useI18n } from 'next-localization';
-import { getPublicUrl } from 'lib/util';
 import {
   Placeholder,
   VisitorIdentification,
   useSitecoreContext,
+  getPublicUrl,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { StyleguideSitecoreContextValue } from 'lib/component-props';