[Next.js] JSS Edge Proxy and Context Support

CHANGELOG.md

@@ -13,6 +13,10 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
+* `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` ([#1640](https://github.com/Sitecore/jss/pull/1640)) Sitecore Edge Platform and Context support:
+  * Introducing the _clientFactory_ property. This property can be utilized by GraphQL-based services, the previously used _endpoint_ and _apiKey_ properties are deprecated. The _clientFactory_ serves as the central hub for executing GraphQL requests within the application.
+  * New SITECORE_EDGE_CONTEXT_ID environment variable has been added.
+  * The JSS_APP_NAME environment variable has been updated and is now referred to as SITE_NAME.
 * `[templates/nextjs]` Enable client-only BYOC component imports. Client-only components can be imported through src/byoc/index.client.ts. Hybrid (server render with client hydration) components can be imported through src/byoc/index.hybrid.ts. BYOC scaffold logic is also moved from nextjs-sxa addon into base template ([#1628](https://github.com/Sitecore/jss/pull/1628)[#1636](https://github.com/Sitecore/jss/pull/1636))
 * `[templates/nextjs]` Import SitecoreForm component into sample nextjs app ([#1628](https://github.com/Sitecore/jss/pull/1628))
 * `[sitecore-jss-nextjs]` (Vercel/Sitecore) Deployment Protection Bypass support for editing integration. ([#1634](https://github.com/Sitecore/jss/pull/1634))

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

@@ -1,6 +1,8 @@
 import chalk from 'chalk';
-import { ConfigPlugin, JssConfig } from '..';
 import { GraphQLSiteInfoService, SiteInfo } from '@sitecore-jss/sitecore-jss-nextjs';
+import { createGraphQLClientFactory } from 'lib/graphql-client-factory/create';
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
 
 /**
  * This plugin will set the "sites" config prop.
@@ -13,19 +15,16 @@ class MultisitePlugin implements ConfigPlugin {
   async exec(config: JssConfig) {
     let sites: SiteInfo[] = [];
 
-    const endpoint = config.graphQLEndpoint;
-    const apiKey = config.sitecoreApiKey;
+    const endpoint = config.sitecoreEdgeContextId ? config.sitecoreEdgeUrl : config.graphQLEndpoint;
 
-    if (!endpoint || !apiKey) {
-      console.warn(
-        chalk.yellow('Skipping site information fetch (missing GraphQL endpoint or API key).')
-      );
+    if (!endpoint) {
+      console.warn(chalk.yellow('Skipping site information fetch (missing GraphQL endpoint).'));
     } else {
       console.log(`Fetching site information from ${endpoint}`);
+
       try {
         const siteInfoService = new GraphQLSiteInfoService({
-          endpoint,
-          apiKey,
+          clientFactory: createGraphQLClientFactory(config),
         });
         sites = await siteInfoService.fetchSiteInfo();
       } catch (error) {

packages/create-sitecore-jss/src/templates/nextjs-multisite/src/lib/page-props-factory/plugins/site.ts

@@ -19,7 +19,7 @@ class SitePlugin implements Plugin {
         : context.params.path ?? '/';
 
     // Get site name (from path)
-    const siteData = getSiteRewriteData(path, config.jssAppName);
+    const siteData = getSiteRewriteData(path, config.siteName);
 
     // Resolve site by name
     props.site = siteResolver.getByName(siteData.siteName);

packages/create-sitecore-jss/src/templates/nextjs-multisite/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts

@@ -8,14 +8,14 @@ import config from 'temp/config';
 import { SitemapFetcherPlugin } from '..';
 import { GetStaticPathsContext } from 'next';
 import { siteResolver } from 'lib/site-resolver';
+import clientFactory from 'lib/graphql-client-factory';
 
 class GraphqlSitemapServicePlugin implements SitemapFetcherPlugin {
   _graphqlSitemapService: MultisiteGraphQLSitemapService;
 
   constructor() {
     this._graphqlSitemapService = new MultisiteGraphQLSitemapService({
-      endpoint: config.graphQLEndpoint,
-      apiKey: config.sitecoreApiKey,
+      clientFactory,
       sites: [...new Set(siteResolver.sites.map((site: SiteInfo) => site.name))],
     });
   }

packages/create-sitecore-jss/src/templates/nextjs-personalize/src/components/CdpPageView.tsx

@@ -68,7 +68,7 @@ const CdpPageView = (): JSX.Element => {
       return;
     }
 
-    const siteInfo = siteResolver.getByName(site?.name || config.jssAppName);
+    const siteInfo = siteResolver.getByName(site?.name || config.siteName);
     const language = route.itemLanguage || config.defaultLanguage;
     const scope = process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE;
 

packages/create-sitecore-jss/src/templates/nextjs-personalize/src/lib/middleware/plugins/personalize.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { PersonalizeMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/middleware';
 import { MiddlewarePlugin } from '..';
-import config from 'temp/config';
+import clientFactory from 'lib/graphql-client-factory';
 import { siteResolver } from 'lib/site-resolver';
 
 /**
@@ -24,8 +24,7 @@ class PersonalizePlugin implements MiddlewarePlugin {
     this.personalizeMiddleware = new PersonalizeMiddleware({
       // Configuration for your Sitecore Experience Edge endpoint
       edgeConfig: {
-        endpoint: config.graphQLEndpoint,
-        apiKey: config.sitecoreApiKey,
+        clientFactory,
         timeout:
           (process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT &&
             parseInt(process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT)) ||
@@ -52,7 +51,7 @@ class PersonalizePlugin implements MiddlewarePlugin {
       // Site resolver implementation
       siteResolver,
       // Personalize middleware will use PosResolver.resolve(site, language) (same as CdpPageView) by default to get point of sale.
-      // You can also pass a custom point of sale resolver into middleware to override it like so: 
+      // You can also pass a custom point of sale resolver into middleware to override it like so:
       // getPointOfSale: (site, language) => { ... }
     });
   }

packages/create-sitecore-jss/src/templates/nextjs-personalize/src/lib/site-resolver/plugins/default.ts

@@ -13,7 +13,7 @@ class DefaultPlugin implements SiteResolverPlugin {
   exec(sites: SiteInfo[]): SiteInfo[] {
     // Add default/configured site
     sites.unshift({
-      name: config.jssAppName,
+      name: config.siteName,
       language: config.defaultLanguage,
       hostName: '*',
       pointOfSale,

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

@@ -1,7 +1,8 @@
 import 'dotenv/config';
 import chalk from 'chalk';
 import { constants } from '@sitecore-jss/sitecore-jss-nextjs';
-import { ConfigPlugin, JssConfig } from '..';
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
 
 /**
  * This plugin will override the "sitecoreApiHost" config prop

packages/create-sitecore-jss/src/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts

@@ -18,7 +18,7 @@ const touchToReloadFilePath = 'src/temp/config.js';
 
 const serverOptions = {
   appRoot: path.join(__dirname, '..'),
-  appName: config.jssAppName,
+  appName: config.siteName,
   // Prevent require of ./sitecore/definitions/config.js, because ts-node is running
   requireArg: null,
   watchPaths: ['./data'],

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

@@ -1,7 +1,8 @@
-import { ConfigPlugin, JssConfig } from '..';
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
 
 /**
- * This plugin will set configuration specific for SXA. 
+ * This plugin will set configuration specific for SXA.
  */
 class SXAPlugin implements ConfigPlugin {
   // should come before fallback

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/lib/middleware/plugins/redirects.ts

@@ -1,17 +1,17 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { RedirectsMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/middleware';
-import config from 'temp/config';
 import { MiddlewarePlugin } from '..';
 import { siteResolver } from 'lib/site-resolver';
+import clientFactory from 'lib/graphql-client-factory';
 
 class RedirectsPlugin implements MiddlewarePlugin {
   private redirectsMiddleware: RedirectsMiddleware;
   order = 0;
 
   constructor() {
     this.redirectsMiddleware = new RedirectsMiddleware({
-      endpoint: config.graphQLEndpoint,
-      apiKey: config.sitecoreApiKey,
+      // Client factory implementation
+      clientFactory,
       // These are all the locales you support in your application.
       // These should match those in your next.config.js (i18n.locales).
       locales: ['en'],

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/404.tsx

@@ -10,6 +10,7 @@ import { componentBuilder } from 'temp/componentBuilder';
 import Layout from 'src/Layout';
 import { GetStaticProps } from 'next';
 import { siteResolver } from 'lib/site-resolver';
+import clientFactory from 'lib/graphql-client-factory';
 
 const Custom404 = (props: SitecorePageProps): JSX.Element => {
   if (!(props && props.layoutData)) {
@@ -27,10 +28,9 @@ const Custom404 = (props: SitecorePageProps): JSX.Element => {
 };
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  const site = siteResolver.getByName(config.jssAppName);
+  const site = siteResolver.getByName(config.siteName);
   const errorPagesService = new GraphQLErrorPagesService({
-    endpoint: config.graphQLEndpoint,
-    apiKey: config.sitecoreApiKey,
+    clientFactory,
     siteName: site.name,
     language: context.locale || config.defaultLanguage,
     retries:

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/500.tsx

@@ -10,6 +10,7 @@ import { componentBuilder } from 'temp/componentBuilder';
 import { GetStaticProps } from 'next';
 import config from 'temp/config';
 import { siteResolver } from 'lib/site-resolver';
+import clientFactory from 'lib/graphql-client-factory';
 
 /**
  * Rendered in case if we have 500 error
@@ -43,10 +44,9 @@ const Custom500 = (props: SitecorePageProps): JSX.Element => {
 };
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  const site = siteResolver.getByName(config.jssAppName);
+  const site = siteResolver.getByName(config.siteName);
   const errorPagesService = new GraphQLErrorPagesService({
-    endpoint: config.graphQLEndpoint,
-    apiKey: config.sitecoreApiKey,
+    clientFactory,
     siteName: site.name,
     language: context.locale || context.defaultLocale || config.defaultLanguage,
     retries:

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

@@ -17,6 +17,16 @@ PUBLIC_URL=http://localhost:3000
 # We recommend an alphanumeric value of at least 16 characters.
 JSS_EDITING_SECRET=
 
+# ===== Sitecore Edge Platform ======
+
+# Your unified Sitecore Edge Context Id.
+SITECORE_EDGE_CONTEXT_ID=
+
+# ================================
+
+# ====== Sitecore Preview / Delivery Edge ======
+# (Sitecore Edge Proxy environment variables should be set empty, otherwise they will be prioritized and applied)
+
 # Your Sitecore API key is needed to build the app. Typically, the API key is
 # defined in `scjssconfig.json` (as `sitecore.apiKey`). This file may not exist
 # when building locally (if you've never run `jss setup`), or when building in a
@@ -36,8 +46,12 @@ SITECORE_API_HOST=
 # the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
 GRAPH_QL_ENDPOINT=
 
-# Your JSS app name (also used as the default site name). Overrides 'config.appName' defined in a package.json
-JSS_APP_NAME=
+# ================================
+
+# Your Sitecore site name.
+# Uses your `package.json` config `appName` if empty.
+# When using the Next.js Multisite add-on, the value of the variable represents the default/configured site.
+SITE_NAME=
 
 # Your default app language.
 DEFAULT_LANGUAGE=

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

@@ -1,18 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const plugins = require('scripts/temp/config-plugins');
-
-/**
- * JSS configuration object
- */
-export interface JssConfig extends Record<string, string | undefined> {
-  sitecoreApiKey?: string;
-  sitecoreApiHost?: string;
-  jssAppName?: string;
-  graphQLEndpointPath?: string;
-  defaultLanguage?: string;
-  graphQLEndpoint?: string;
-  layoutServiceConfigurationName?: string;
-}
+import { JssConfig } from 'lib/config';
 
 export interface ConfigPlugin {
   /**

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

@@ -1,4 +1,5 @@
-import { ConfigPlugin, JssConfig } from '..';
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
 
 /**
  * This plugin will set computed config props.

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

@@ -1,4 +1,6 @@
-import { ConfigPlugin, JssConfig } from '..';
+import chalk from 'chalk';
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
 
 /**
  * This config will set fallback values for properties that were left empty
@@ -9,10 +11,19 @@ class FallbackPlugin implements ConfigPlugin {
   order = 100;
 
   async exec(config: JssConfig) {
+    if (config.sitecoreApiKey && config.sitecoreEdgeContextId) {
+      console.log(
+        chalk.yellow(
+          "You have configured both 'sitecoreApiKey' and 'sitecoreEdgeContextId' values. The 'sitecoreEdgeContextId' is used instead."
+        )
+      );
+    }
+
     return Object.assign({}, config, {
       defaultLanguage: config.defaultLanguage || 'en',
       sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
       layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
+      sitecoreEdgeUrl: config.sitecoreEdgeUrl || 'https://edge-platform.sitecorecloud.io',
     });
   }
 }

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

@@ -1,4 +1,5 @@
-import { ConfigPlugin, JssConfig } from '..';
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
 import packageConfig from 'package.json';
 
 /**
@@ -11,7 +12,7 @@ class PackageJsonPlugin implements ConfigPlugin {
     if (!packageConfig.config) return config;
 
     return Object.assign({}, config, {
-      jssAppName: config.jssAppName || packageConfig.config.appName,
+      siteName: config.siteName || packageConfig.config.appName,
       graphQLEndpointPath: config.graphQLEndpointPath || packageConfig.config.graphQLEndpointPath,
       defaultLanguage: config.defaultLanguage || packageConfig.config.language,
     });

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

@@ -1,4 +1,5 @@
-import { ConfigPlugin, JssConfig } from '..';
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
 
 /**
  * This plugin will set config props based on scjssconfig.json.

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

@@ -2,7 +2,8 @@ import 'dotenv/config';
 import fs from 'fs';
 import path from 'path';
 import { constantCase } from 'constant-case';
-import { JssConfig, jssConfigFactory } from './config';
+import { JssConfig } from 'lib/config';
+import { jssConfigFactory } from './config';
 
 /*
   CONFIG GENERATION
@@ -13,7 +14,10 @@ import { JssConfig, jssConfigFactory } from './config';
 const defaultConfig: JssConfig = {
   sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
   sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
-  jssAppName: process.env[`${constantCase('jssAppName')}`],
+  sitecoreEdgeUrl: process.env[`${constantCase('sitecoreEdgeUrl')}`],
+  sitecoreEdgeContextId: process.env[`${constantCase('sitecoreEdgeContextId')}`],
+  siteName:
+    process.env[`${constantCase('siteName')}`] || process.env[`${constantCase('jssAppName')}`],
   graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
   defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],

packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.ts

@@ -4,6 +4,15 @@
 
 // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side
 import dynamic from 'next/dynamic';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import config from 'temp/config';
+
+// Set context properties to be available within BYOC components
+FEAAS.setContextProperties({
+  sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+  sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+});
+
 const ClientBundle = dynamic(() => import('./index.client'), {
   ssr: false,
 });

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

@@ -0,0 +1,14 @@
+/*
+ * Represents the type of config object available within the generated temp/config.js
+ */
+export interface JssConfig extends Record<string, string | undefined> {
+  sitecoreApiKey?: string;
+  sitecoreApiHost?: string;
+  sitecoreEdgeUrl?: string;
+  sitecoreEdgeContextId?: string;
+  siteName?: string;
+  graphQLEndpointPath?: string;
+  defaultLanguage?: string;
+  graphQLEndpoint?: string;
+  layoutServiceConfigurationName?: string;
+}

packages/create-sitecore-jss/src/templates/nextjs/src/lib/dictionary-service-factory.ts

@@ -5,6 +5,7 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
+import clientFactory from 'lib/graphql-client-factory';
 
 /**
  * Factory responsible for creating a DictionaryService instance
@@ -17,9 +18,8 @@ export class DictionaryServiceFactory {
   create(siteName: string): DictionaryService {
     return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLDictionaryService({
-          endpoint: config.graphQLEndpoint,
-          apiKey: config.sitecoreApiKey,
           siteName,
+          clientFactory,
           /*
             The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current app. 
             When not provided, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.