@sitecore-jss/sitecore-jss-nextjs 21.3.0-canary.2 → 21.3.0-canary.21

package/README.md

@@ -3,8 +3,10 @@
 This module is provided as a part of Sitecore JavaScript Rendering SDK. It contains Next.js components and integration for JSS.
 
 <!---
-@TODO: Update to version 20.0.0 docs before release
+@TODO: Update to next version docs before release
 -->
-[Documentation](https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
 
-[API reference documentation](/ref-docs/sitecore-jss-nextjs/).
+[Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
+
+[API reference documentation](/ref-docs/sitecore-jss-nextjs/)

package/dist/cjs/editing/editing-render-middleware.js

@@ -29,6 +29,7 @@ class EditingRenderMiddleware {
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
             var _e, _f;
             const { method, query, body, headers } = req;
+            const startTimestamp = Date.now();
             sitecore_jss_1.debug.editing('editing render middleware start: %o', {
                 method,
                 query,
@@ -104,7 +105,10 @@ class EditingRenderMiddleware {
                 }
                 const body = { html };
                 // Return expected JSON result
-                sitecore_jss_1.debug.editing('editing render middleware end: %o', { status: 200, body });
+                sitecore_jss_1.debug.editing('editing render middleware end in %dms: %o', Date.now() - startTimestamp, {
+                    status: 200,
+                    body,
+                });
                 res.status(200).json(body);
             }
             catch (err) {

package/dist/cjs/editing/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.EditingRenderMiddleware = exports.EditingDataMiddleware = exports.EditingDataDiskCache = void 0;
+exports.VercelEditingDataCache = exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.EditingRenderMiddleware = exports.EditingDataMiddleware = exports.EditingDataDiskCache = void 0;
 var editing_data_cache_1 = require("./editing-data-cache");
 Object.defineProperty(exports, "EditingDataDiskCache", { enumerable: true, get: function () { return editing_data_cache_1.EditingDataDiskCache; } });
 var editing_data_middleware_1 = require("./editing-data-middleware");
@@ -11,3 +11,5 @@ var editing_data_service_1 = require("./editing-data-service");
 Object.defineProperty(exports, "BasicEditingDataService", { enumerable: true, get: function () { return editing_data_service_1.BasicEditingDataService; } });
 Object.defineProperty(exports, "ServerlessEditingDataService", { enumerable: true, get: function () { return editing_data_service_1.ServerlessEditingDataService; } });
 Object.defineProperty(exports, "editingDataService", { enumerable: true, get: function () { return editing_data_service_1.editingDataService; } });
+var vercel_editing_data_cache_1 = require("./vercel-editing-data-cache");
+Object.defineProperty(exports, "VercelEditingDataCache", { enumerable: true, get: function () { return vercel_editing_data_cache_1.VercelEditingDataCache; } });

package/dist/cjs/editing/vercel-editing-data-cache.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VercelEditingDataCache = void 0;
+const kv_1 = require("@vercel/kv");
+const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
+/**
+ * Implementation of editing cache for Vercel deployments
+ * Uses Vercel KV database and client to store data
+ * Set TTL for cache data in constructor (default: 60 seconds)
+ */
+class VercelEditingDataCache {
+    /**
+     * @param {string} redisUrl KV endpoint URL. Usually stored in process.env.KV_REST_API_URL
+     * @param {string} redisToken KV endpoint tokem. Usually stored in process.env.KV_REST_API_TOKEN
+     */
+    constructor(redisUrl, redisToken) {
+        this.defaultTtl = 120;
+        if (!redisUrl || !redisToken) {
+            throw Error('API URL or token are missing, ensure you have set the KV or Upstash storage correctly.');
+        }
+        this.redisCache = (0, kv_1.createClient)({
+            url: redisUrl,
+            token: redisToken,
+        });
+    }
+    set(key, editingData) {
+        sitecore_jss_1.debug.editing(`Putting editing data for ${key} into redis storage...`);
+        return new Promise((resolve, reject) => {
+            this.redisCache
+                .set(key, JSON.stringify(editingData), { ex: this.defaultTtl })
+                .then(() => resolve())
+                .catch((err) => reject(err));
+        });
+    }
+    get(key) {
+        sitecore_jss_1.debug.editing(`Getting editing data for ${key} from redis storage...`);
+        return new Promise((resolve, reject) => {
+            this.redisCache
+                .get(key)
+                .then((entry) => {
+                const result = (entry || undefined);
+                this.redisCache.expire(key, 0).then(() => resolve(result));
+            })
+                .catch((err) => reject(err));
+        });
+    }
+}
+exports.VercelEditingDataCache = VercelEditingDataCache;

package/dist/cjs/index.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBuilder = exports.NextImage = exports.EditingComponentPlaceholder = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.GraphQLRequestClient = exports.PosResolver = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.tryParseEnvValue = exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.getPublicUrl = exports.handleEditorFastRefresh = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
-exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = exports.Image = void 0;
+exports.NextImage = exports.EditingComponentPlaceholder = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.GraphQLRequestClient = exports.PosResolver = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.tryParseEnvValue = exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.getPublicUrl = exports.handleEditorFastRefresh = exports.debug = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
+exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = exports.Image = exports.ComponentBuilder = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 Object.defineProperty(exports, "AxiosDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.AxiosDataFetcher; } });
 Object.defineProperty(exports, "NativeDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.NativeDataFetcher; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
+Object.defineProperty(exports, "debug", { enumerable: true, get: function () { return sitecore_jss_1.debug; } });
 // we will remove the root exports for these later
 // we cannot mark exports as deprected directly, so we're using this hack instead
 const utils_1 = require("@sitecore-jss/sitecore-jss/utils");

package/dist/cjs/middleware/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultisiteMiddleware = exports.PersonalizeMiddleware = exports.RedirectsMiddleware = void 0;
+exports.MultisiteMiddleware = exports.PersonalizeMiddleware = exports.RedirectsMiddleware = exports.debug = void 0;
+var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
+Object.defineProperty(exports, "debug", { enumerable: true, get: function () { return sitecore_jss_1.debug; } });
 var redirects_middleware_1 = require("./redirects-middleware");
 Object.defineProperty(exports, "RedirectsMiddleware", { enumerable: true, get: function () { return redirects_middleware_1.RedirectsMiddleware; } });
 var personalize_middleware_1 = require("./personalize-middleware");

package/dist/cjs/middleware/multisite-middleware.js

@@ -29,6 +29,7 @@ class MultisiteMiddleware extends middleware_1.MiddlewareBase {
             const pathname = req.nextUrl.pathname;
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
+            const startTimestamp = Date.now();
             sitecore_jss_1.debug.multisite('multisite middleware start: %o', {
                 pathname,
                 language,
@@ -58,7 +59,7 @@ class MultisiteMiddleware extends middleware_1.MiddlewareBase {
             response.cookies.set(this.SITE_SYMBOL, siteName);
             // Share rewrite path with following executed middlewares
             response.headers.set('x-sc-rewrite', rewritePath);
-            sitecore_jss_1.debug.multisite('multisite middleware end: %o', {
+            sitecore_jss_1.debug.multisite('multisite middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
                 siteName,
                 headers: this.extractDebugHeaders(response.headers),

package/dist/cjs/middleware/personalize-middleware.js

@@ -28,6 +28,7 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
             const pathname = req.nextUrl.pathname;
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
+            const startTimestamp = Date.now();
             let browserId = this.getBrowserId(req);
             sitecore_jss_1.debug.personalize('personalize middleware start: %o', {
                 pathname,
@@ -98,7 +99,7 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
             this.setBrowserId(response, browserId);
             // Share site name with the following executed middlewares
             response.cookies.set(this.SITE_SYMBOL, site.name);
-            sitecore_jss_1.debug.personalize('personalize middleware end: %o', {
+            sitecore_jss_1.debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
                 browserId,
                 headers: this.extractDebugHeaders(response.headers),
@@ -149,7 +150,10 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
     }
     getExperienceParams(req) {
         return {
-            referrer: req.referrer,
+            // It's expected that the header name "referer" is actually a misspelling of the word "referrer"
+            // req.referrer is used during fetching to determine the value of the Referer header of the request being made,
+            // used as a fallback
+            referrer: req.headers.get('referer') || req.referrer,
             utm: {
                 campaign: req.nextUrl.searchParams.get('utm_campaign'),
                 content: req.nextUrl.searchParams.get('utm_content'),

package/dist/cjs/middleware/redirects-middleware.js

@@ -35,6 +35,7 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
             let site;
+            const startTimestamp = Date.now();
             sitecore_jss_1.debug.redirects('redirects middleware start: %o', {
                 pathname,
                 language,
@@ -71,11 +72,12 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                     const urlFirstPart = existsRedirect.target.split('/')[1];
                     if (this.locales.includes(urlFirstPart)) {
                         url.locale = urlFirstPart;
-                        url.pathname = existsRedirect.target.replace(`/${urlFirstPart}`, '');
-                    }
-                    else {
-                        url.pathname = existsRedirect.target;
+                        existsRedirect.target = existsRedirect.target.replace(`/${urlFirstPart}`, '');
                     }
+                    url.pathname = existsRedirect.target;
+                    url.pathname = url.pathname
+                        .replace((0, regex_parser_1.default)(existsRedirect.pattern), existsRedirect.target)
+                        .replace(/^\/\//, '/');
                 }
                 const redirectUrl = decodeURIComponent(url.href);
                 /** return Response redirect with http code of redirect type **/
@@ -94,7 +96,7 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
             // Share site name with the following executed middlewares
             // Don't need to set when middleware is disabled
             site && response.cookies.set(this.SITE_SYMBOL, site.name);
-            sitecore_jss_1.debug.redirects('redirects middleware end: %o', {
+            sitecore_jss_1.debug.redirects('redirects middleware end in %dms: %o', Date.now() - startTimestamp, {
                 redirected: response.redirected,
                 status: response.status,
                 url: response.url,
@@ -137,13 +139,14 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
             const targetQS = req.nextUrl.search || '';
             return redirects.length
                 ? redirects.find((redirect) => {
-                    const pattern = `/^/${redirect.pattern
+                    redirect.pattern = `/^\/${redirect.pattern
                         .replace(/^\/|\/$/g, '')
+                        .replace(/^\^\/|\/\$$/g, '')
                         .replace(/^\^|\$$/g, '')}$/gi`;
-                    return (((0, regex_parser_1.default)(pattern).test(tragetURL) ||
-                        (0, regex_parser_1.default)(pattern).test(`${tragetURL}${targetQS}`) ||
-                        (0, regex_parser_1.default)(pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
-                        (0, regex_parser_1.default)(pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
+                    return (((0, regex_parser_1.default)(redirect.pattern).test(tragetURL) ||
+                        (0, regex_parser_1.default)(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
+                        (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
+                        (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
                         (redirect.locale
                             ? redirect.locale.toLowerCase() === req.nextUrl.locale.toLowerCase()
                             : true));

package/dist/esm/editing/editing-render-middleware.js

@@ -26,6 +26,7 @@ export class EditingRenderMiddleware {
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
             var _e, _f;
             const { method, query, body, headers } = req;
+            const startTimestamp = Date.now();
             debug.editing('editing render middleware start: %o', {
                 method,
                 query,
@@ -101,7 +102,10 @@ export class EditingRenderMiddleware {
                 }
                 const body = { html };
                 // Return expected JSON result
-                debug.editing('editing render middleware end: %o', { status: 200, body });
+                debug.editing('editing render middleware end in %dms: %o', Date.now() - startTimestamp, {
+                    status: 200,
+                    body,
+                });
                 res.status(200).json(body);
             }
             catch (err) {

package/dist/esm/editing/index.js

@@ -2,3 +2,4 @@ export { EditingDataDiskCache } from './editing-data-cache';
 export { EditingDataMiddleware } from './editing-data-middleware';
 export { EditingRenderMiddleware, } from './editing-render-middleware';
 export { BasicEditingDataService, ServerlessEditingDataService, editingDataService, } from './editing-data-service';
+export { VercelEditingDataCache } from './vercel-editing-data-cache';

package/dist/esm/editing/vercel-editing-data-cache.js

@@ -0,0 +1,44 @@
+import { createClient } from '@vercel/kv';
+import { debug } from '@sitecore-jss/sitecore-jss';
+/**
+ * Implementation of editing cache for Vercel deployments
+ * Uses Vercel KV database and client to store data
+ * Set TTL for cache data in constructor (default: 60 seconds)
+ */
+export class VercelEditingDataCache {
+    /**
+     * @param {string} redisUrl KV endpoint URL. Usually stored in process.env.KV_REST_API_URL
+     * @param {string} redisToken KV endpoint tokem. Usually stored in process.env.KV_REST_API_TOKEN
+     */
+    constructor(redisUrl, redisToken) {
+        this.defaultTtl = 120;
+        if (!redisUrl || !redisToken) {
+            throw Error('API URL or token are missing, ensure you have set the KV or Upstash storage correctly.');
+        }
+        this.redisCache = createClient({
+            url: redisUrl,
+            token: redisToken,
+        });
+    }
+    set(key, editingData) {
+        debug.editing(`Putting editing data for ${key} into redis storage...`);
+        return new Promise((resolve, reject) => {
+            this.redisCache
+                .set(key, JSON.stringify(editingData), { ex: this.defaultTtl })
+                .then(() => resolve())
+                .catch((err) => reject(err));
+        });
+    }
+    get(key) {
+        debug.editing(`Getting editing data for ${key} from redis storage...`);
+        return new Promise((resolve, reject) => {
+            this.redisCache
+                .get(key)
+                .then((entry) => {
+                const result = (entry || undefined);
+                this.redisCache.expire(key, 0).then(() => resolve(result));
+            })
+                .catch((err) => reject(err));
+        });
+    }
+}

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { constants, AxiosDataFetcher, NativeDataFetcher, enableDebug, } from '@sitecore-jss/sitecore-jss';
+export { constants, AxiosDataFetcher, NativeDataFetcher, enableDebug, debug, } from '@sitecore-jss/sitecore-jss';
 // we will remove the root exports for these later
 // we cannot mark exports as deprected directly, so we're using this hack instead
 import { isEditorActive as isEditorActiveDep, resetEditorChromes as resetEditorChromesDep, resolveUrl as resolveUrlDep, tryParseEnvValue as tryParseEnvValueDep, } from '@sitecore-jss/sitecore-jss/utils';

package/dist/esm/middleware/index.js

@@ -1,3 +1,4 @@
+export { debug } from '@sitecore-jss/sitecore-jss';
 export { RedirectsMiddleware } from './redirects-middleware';
 export { PersonalizeMiddleware } from './personalize-middleware';
 export { MultisiteMiddleware } from './multisite-middleware';

package/dist/esm/middleware/multisite-middleware.js

@@ -26,6 +26,7 @@ export class MultisiteMiddleware extends MiddlewareBase {
             const pathname = req.nextUrl.pathname;
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
+            const startTimestamp = Date.now();
             debug.multisite('multisite middleware start: %o', {
                 pathname,
                 language,
@@ -55,7 +56,7 @@ export class MultisiteMiddleware extends MiddlewareBase {
             response.cookies.set(this.SITE_SYMBOL, siteName);
             // Share rewrite path with following executed middlewares
             response.headers.set('x-sc-rewrite', rewritePath);
-            debug.multisite('multisite middleware end: %o', {
+            debug.multisite('multisite middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
                 siteName,
                 headers: this.extractDebugHeaders(response.headers),

package/dist/esm/middleware/personalize-middleware.js

@@ -25,6 +25,7 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             const pathname = req.nextUrl.pathname;
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
+            const startTimestamp = Date.now();
             let browserId = this.getBrowserId(req);
             debug.personalize('personalize middleware start: %o', {
                 pathname,
@@ -95,7 +96,7 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             this.setBrowserId(response, browserId);
             // Share site name with the following executed middlewares
             response.cookies.set(this.SITE_SYMBOL, site.name);
-            debug.personalize('personalize middleware end: %o', {
+            debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
                 browserId,
                 headers: this.extractDebugHeaders(response.headers),
@@ -146,7 +147,10 @@ export class PersonalizeMiddleware extends MiddlewareBase {
     }
     getExperienceParams(req) {
         return {
-            referrer: req.referrer,
+            // It's expected that the header name "referer" is actually a misspelling of the word "referrer"
+            // req.referrer is used during fetching to determine the value of the Referer header of the request being made,
+            // used as a fallback
+            referrer: req.headers.get('referer') || req.referrer,
             utm: {
                 campaign: req.nextUrl.searchParams.get('utm_campaign'),
                 content: req.nextUrl.searchParams.get('utm_content'),

package/dist/esm/middleware/redirects-middleware.js

@@ -29,6 +29,7 @@ export class RedirectsMiddleware extends MiddlewareBase {
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
             let site;
+            const startTimestamp = Date.now();
             debug.redirects('redirects middleware start: %o', {
                 pathname,
                 language,
@@ -65,11 +66,12 @@ export class RedirectsMiddleware extends MiddlewareBase {
                     const urlFirstPart = existsRedirect.target.split('/')[1];
                     if (this.locales.includes(urlFirstPart)) {
                         url.locale = urlFirstPart;
-                        url.pathname = existsRedirect.target.replace(`/${urlFirstPart}`, '');
-                    }
-                    else {
-                        url.pathname = existsRedirect.target;
+                        existsRedirect.target = existsRedirect.target.replace(`/${urlFirstPart}`, '');
                     }
+                    url.pathname = existsRedirect.target;
+                    url.pathname = url.pathname
+                        .replace(regexParser(existsRedirect.pattern), existsRedirect.target)
+                        .replace(/^\/\//, '/');
                 }
                 const redirectUrl = decodeURIComponent(url.href);
                 /** return Response redirect with http code of redirect type **/
@@ -88,7 +90,7 @@ export class RedirectsMiddleware extends MiddlewareBase {
             // Share site name with the following executed middlewares
             // Don't need to set when middleware is disabled
             site && response.cookies.set(this.SITE_SYMBOL, site.name);
-            debug.redirects('redirects middleware end: %o', {
+            debug.redirects('redirects middleware end in %dms: %o', Date.now() - startTimestamp, {
                 redirected: response.redirected,
                 status: response.status,
                 url: response.url,
@@ -131,13 +133,14 @@ export class RedirectsMiddleware extends MiddlewareBase {
             const targetQS = req.nextUrl.search || '';
             return redirects.length
                 ? redirects.find((redirect) => {
-                    const pattern = `/^/${redirect.pattern
+                    redirect.pattern = `/^\/${redirect.pattern
                         .replace(/^\/|\/$/g, '')
+                        .replace(/^\^\/|\/\$$/g, '')
                         .replace(/^\^|\$$/g, '')}$/gi`;
-                    return ((regexParser(pattern).test(tragetURL) ||
-                        regexParser(pattern).test(`${tragetURL}${targetQS}`) ||
-                        regexParser(pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
-                        regexParser(pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
+                    return ((regexParser(redirect.pattern).test(tragetURL) ||
+                        regexParser(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
+                        regexParser(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
+                        regexParser(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
                         (redirect.locale
                             ? redirect.locale.toLowerCase() === req.nextUrl.locale.toLowerCase()
                             : true));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "21.3.0-canary.2",
+  "version": "21.3.0-canary.21",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -70,9 +70,10 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^21.3.0-canary.2",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^21.3.0-canary.2",
-    "@sitecore-jss/sitecore-jss-react": "^21.3.0-canary.2",
+    "@sitecore-jss/sitecore-jss": "^21.3.0-canary.21",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^21.3.0-canary.21",
+    "@sitecore-jss/sitecore-jss-react": "^21.3.0-canary.21",
+    "@vercel/kv": "^0.2.1",
     "node-html-parser": "^6.1.4",
     "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
@@ -80,7 +81,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "a498d1b8b6bab066a58907a2a01a554b9d20bd42",
+  "gitHead": "5c3f12c1712a188fa9f91a549dd688f71a74c4e8",
   "files": [
     "dist",
     "types",

package/types/editing/index.d.ts

@@ -3,3 +3,4 @@ export { EditingDataCache, EditingDataDiskCache } from './editing-data-cache';
 export { EditingDataMiddleware, EditingDataMiddlewareConfig } from './editing-data-middleware';
 export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, } from './editing-render-middleware';
 export { EditingPreviewData, EditingDataService, BasicEditingDataService, BasicEditingDataServiceConfig, ServerlessEditingDataService, ServerlessEditingDataServiceConfig, editingDataService, } from './editing-data-service';
+export { VercelEditingDataCache } from './vercel-editing-data-cache';

package/types/editing/vercel-editing-data-cache.d.ts

@@ -0,0 +1,19 @@
+import { VercelKV } from '@vercel/kv';
+import { EditingDataCache } from './editing-data-cache';
+import { EditingData } from './editing-data';
+/**
+ * Implementation of editing cache for Vercel deployments
+ * Uses Vercel KV database and client to store data
+ * Set TTL for cache data in constructor (default: 60 seconds)
+ */
+export declare class VercelEditingDataCache implements EditingDataCache {
+    protected redisCache: VercelKV;
+    private defaultTtl;
+    /**
+     * @param {string} redisUrl KV endpoint URL. Usually stored in process.env.KV_REST_API_URL
+     * @param {string} redisToken KV endpoint tokem. Usually stored in process.env.KV_REST_API_TOKEN
+     */
+    constructor(redisUrl: string | undefined, redisToken: string | undefined);
+    set(key: string, editingData: EditingData): Promise<void>;
+    get(key: string): Promise<EditingData | undefined>;
+}

package/types/index.d.ts

@@ -1,4 +1,4 @@
-export { constants, HttpDataFetcher, HttpResponse, AxiosResponse, AxiosDataFetcher, AxiosDataFetcherConfig, NativeDataFetcher, NativeDataFetcherConfig, HTMLLink, enableDebug, } from '@sitecore-jss/sitecore-jss';
+export { constants, HttpDataFetcher, HttpResponse, AxiosResponse, AxiosDataFetcher, AxiosDataFetcherConfig, NativeDataFetcher, NativeDataFetcherConfig, HTMLLink, enableDebug, debug, } from '@sitecore-jss/sitecore-jss';
 import { resolveUrl as resolveUrlDep } from '@sitecore-jss/sitecore-jss/utils';
 /** @deprecated use import from '@sitecore-jss/sitecore-jss-nextjs/utils' instead */
 declare const isEditorActive: () => boolean, resetEditorChromes: () => void, resolveUrl: typeof resolveUrlDep, tryParseEnvValue: <T>(envValue: string | undefined, defaultValue: T) => T, handleEditorFastRefresh: (forceReload?: boolean) => void, getPublicUrl: () => string;

package/types/middleware/index.d.ts

@@ -1,3 +1,4 @@
+export { debug } from '@sitecore-jss/sitecore-jss';
 export { RedirectsMiddleware, RedirectsMiddlewareConfig } from './redirects-middleware';
 export { PersonalizeMiddleware, PersonalizeMiddlewareConfig } from './personalize-middleware';
 export { MultisiteMiddleware, MultisiteMiddlewareConfig } from './multisite-middleware';