@sitecore-jss/sitecore-jss-nextjs 21.10.0 → 21.10.1-canary.1

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

@@ -17,6 +17,7 @@ const regex_parser_1 = __importDefault(require("regex-parser"));
 const server_1 = require("next/server");
 const site_1 = require("@sitecore-jss/sitecore-jss/site");
 const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
+const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
 const middleware_1 = require("./middleware");
 const REGEXP_CONTEXT_SITE_LANG = new RegExp(/\$siteLang/, 'i');
 const REGEXP_ABSOLUTE_URL = new RegExp('^(?:[a-z]+:)?//', 'i');
@@ -25,13 +26,100 @@ const REGEXP_ABSOLUTE_URL = new RegExp('^(?:[a-z]+:)?//', 'i');
  * compares with current url and redirects to target url
  */
 class RedirectsMiddleware extends middleware_1.MiddlewareBase {
-    /**
-     * @param {RedirectsMiddlewareConfig} [config] redirects middleware config
-     */
     constructor(config) {
         super(config);
         this.config = config;
-        this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
+        // NOTE: we provide native fetch for compatibility on Next.js Edge Runtime
+        // (underlying default 'cross-fetch' is not currently compatible: https://github.com/lquixada/cross-fetch/issues/78)
+        this.redirectsService = new site_1.GraphQLRedirectsService(Object.assign(Object.assign({}, config), { fetch: fetch }));
+        this.locales = config.locales;
+    }
+    /**
+     * Gets the Next.js middleware handler with error handling
+     * @returns route handler
+     */
+    getHandler() {
+        return (req, res) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                return this.processRedirectRequest(req, res);
+            }
+            catch (error) {
+                console.log('Redirect middleware failed:');
+                console.log(error);
+                return res || server_1.NextResponse.next();
+            }
+        });
+    }
+    /**
+     * Method returns RedirectInfo when matches
+     * @param {NextRequest} req request
+     * @param {string} siteName site name
+     * @returns Promise<RedirectInfo | undefined> The redirect info or undefined if no redirect is found
+     * @protected
+     */
+    getExistsRedirect(req, siteName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { pathname: incomingURL, search: incomingQS = '' } = this.normalizeUrl(req.nextUrl.clone());
+            const locale = this.getLanguage(req);
+            const normalizedPath = incomingURL.replace(/\/*$/gi, '').toLowerCase();
+            const redirects = yield this.getRedirects(siteName);
+            const language = this.getLanguage(req);
+            const modifyRedirects = structuredClone(redirects);
+            let matchedQueryString;
+            const localePath = `/${locale.toLowerCase()}${normalizedPath}`;
+            return modifyRedirects.length
+                ? modifyRedirects.find((redirect) => {
+                    // process static URL (non-regex) rules
+                    if ((0, utils_1.isRegexOrUrl)(redirect.pattern) === 'url') {
+                        const urlArray = redirect.pattern.endsWith('/')
+                            ? redirect.pattern.slice(0, -1).split('?')
+                            : redirect.pattern.split('?');
+                        const patternQS = urlArray[1];
+                        let patternPath = urlArray[0].toLowerCase();
+                        // nextjs routes are case-sensitive, but locales should be compared case-insensitively
+                        const patternParts = patternPath.split('/');
+                        const maybeLocale = patternParts[1].toLowerCase();
+                        // case insensitive lookup of locales
+                        if (new RegExp(this.locales.join('|'), 'i').test(maybeLocale)) {
+                            patternPath = patternPath.replace(`/${patternParts[1]}`, `/${maybeLocale}`);
+                        }
+                        return ((patternPath === localePath || patternPath === normalizedPath) &&
+                            (!patternQS ||
+                                (0, utils_1.areURLSearchParamsEqual)(new URLSearchParams(patternQS), new URLSearchParams(incomingQS))));
+                    }
+                    // process regex rules
+                    // Modify the redirect pattern to ignore the language prefix in the path
+                    // And escapes non-special "?" characters in a string or regex.
+                    redirect.pattern = (0, utils_1.escapeNonSpecialQuestionMarks)(redirect.pattern.replace(new RegExp(`^[^]?/${language}/`, 'gi'), ''));
+                    // Prepare the redirect pattern as a regular expression, making it more flexible for matching URLs
+                    redirect.pattern = `/^\/${redirect.pattern
+                        .replace(/^\/|\/$/g, '') // Removes leading and trailing slashes
+                        .replace(/^\^\/|\/\$$/g, '') // Removes unnecessary start (^) and end ($) anchors
+                        .replace(/^\^|\$$/g, '') // Further cleans up anchors
+                        .replace(/\$\/gi$/g, '')}[\/]?$/i`; // Ensures the pattern allows an optional trailing slash
+                    // Redirect pattern matches the full incoming URL with query string present
+                    matchedQueryString = [
+                        (0, regex_parser_1.default)(redirect.pattern).test(`/${localePath}${incomingQS}`),
+                        (0, regex_parser_1.default)(redirect.pattern).test(`${normalizedPath}${incomingQS}`),
+                    ].some(Boolean)
+                        ? incomingQS
+                        : undefined;
+                    // Save the matched query string (if found) into the redirect object
+                    redirect.matchedQueryString = matchedQueryString || '';
+                    return (!!((0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${incomingURL}`) ||
+                        (0, regex_parser_1.default)(redirect.pattern).test(incomingURL) ||
+                        matchedQueryString) && (redirect.locale ? redirect.locale.toLowerCase() === locale.toLowerCase() : true));
+                })
+                : undefined;
+        });
+    }
+    /**
+     * @param {NextRequest} req request
+     * @param {Response} res response
+     * @returns {Promise<NextResponse>} The redirect response.
+     */
+    processRedirectRequest(req, res) {
+        return __awaiter(this, void 0, void 0, function* () {
             const pathname = req.nextUrl.pathname;
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
@@ -43,70 +131,69 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                 hostname,
             });
             const createResponse = () => __awaiter(this, void 0, void 0, function* () {
-                if (this.config.disabled && this.config.disabled(req, res || server_1.NextResponse.next())) {
+                var _a;
+                const response = res || server_1.NextResponse.next();
+                if (this.config.disabled && this.config.disabled(req, response)) {
                     sitecore_jss_1.debug.redirects('skipped (redirects middleware is disabled)');
-                    return res || server_1.NextResponse.next();
+                    return response;
                 }
                 if (this.isPreview(req) || this.excludeRoute(pathname)) {
                     sitecore_jss_1.debug.redirects('skipped (%s)', this.isPreview(req) ? 'preview' : 'route excluded');
-                    return res || server_1.NextResponse.next();
+                    return response;
                 }
-                site = this.getSite(req, res);
+                // Skip prefetch requests from Next.js, which are not original client requests
+                // as they load unnecessary requests that burden the redirects middleware with meaningless traffic
+                if (this.isPrefetch(req)) {
+                    sitecore_jss_1.debug.redirects('skipped (prefetch)');
+                    response.headers.set('x-middleware-cache', 'no-cache');
+                    response.headers.set('Cache-Control', 'no-store, must-revalidate');
+                    return response;
+                }
+                site = this.getSite(req, response);
                 // Find the redirect from result of RedirectService
                 const existsRedirect = yield this.getExistsRedirect(req, site.name);
                 if (!existsRedirect) {
                     sitecore_jss_1.debug.redirects('skipped (redirect does not exist)');
-                    return res || server_1.NextResponse.next();
+                    return response;
                 }
+                sitecore_jss_1.debug.redirects('Matched redirect rule: %o', { existsRedirect });
                 // Find context site language and replace token
                 if (REGEXP_CONTEXT_SITE_LANG.test(existsRedirect.target) &&
                     !(REGEXP_ABSOLUTE_URL.test(existsRedirect.target) &&
                         existsRedirect.target.includes(hostname))) {
                     existsRedirect.target = existsRedirect.target.replace(REGEXP_CONTEXT_SITE_LANG, site.language);
+                    req.nextUrl.locale = site.language;
                 }
-                const url = req.nextUrl.clone();
+                const url = this.normalizeUrl(req.nextUrl.clone());
                 if (REGEXP_ABSOLUTE_URL.test(existsRedirect.target)) {
-                    url.href = existsRedirect.target;
+                    return this.dispatchRedirect(existsRedirect.target, existsRedirect.redirectType, req, response, true);
                 }
                 else {
-                    const source = `${url.pathname}${url.search}`;
-                    url.search = existsRedirect.isQueryStringPreserved ? url.search : '';
-                    const urlFirstPart = existsRedirect.target.split('/')[1];
+                    const isUrl = (0, utils_1.isRegexOrUrl)(existsRedirect.pattern) === 'url';
+                    const targetParts = existsRedirect.target.split('/');
+                    const urlFirstPart = targetParts[1];
                     if (this.locales.includes(urlFirstPart)) {
-                        url.locale = urlFirstPart;
+                        req.nextUrl.locale = urlFirstPart;
                         existsRedirect.target = existsRedirect.target.replace(`/${urlFirstPart}`, '');
                     }
-                    const target = source
-                        .replace((0, regex_parser_1.default)(existsRedirect.pattern), existsRedirect.target)
-                        .replace(/^\/\//, '/')
-                        .split('?');
-                    url.pathname = target[0];
-                    if (target[1]) {
-                        const newParams = new URLSearchParams(target[1]);
-                        for (const [key, val] of newParams.entries()) {
-                            url.searchParams.append(key, val);
-                        }
-                    }
-                }
-                const redirectUrl = decodeURIComponent(url.href);
-                /** return Response redirect with http code of redirect type **/
-                switch (existsRedirect.redirectType) {
-                    case site_1.REDIRECT_TYPE_301:
-                        return server_1.NextResponse.redirect(redirectUrl, {
-                            status: 301,
-                            statusText: 'Moved Permanently',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
-                    case site_1.REDIRECT_TYPE_302:
-                        return server_1.NextResponse.redirect(redirectUrl, {
-                            status: 302,
-                            statusText: 'Found',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
-                    case site_1.REDIRECT_TYPE_SERVER_TRANSFER:
-                        return server_1.NextResponse.rewrite(redirectUrl, res);
-                    default:
-                        return res || server_1.NextResponse.next();
+                    const targetSegments = isUrl
+                        ? existsRedirect.target.split('?')
+                        : url.pathname.replace(/\/*$/gi, '') + existsRedirect.matchedQueryString;
+                    const [targetPath, targetQueryString] = isUrl
+                        ? targetSegments
+                        : targetSegments
+                            .replace((0, regex_parser_1.default)(existsRedirect.pattern), existsRedirect.target)
+                            .replace(/^\/\//, '/')
+                            .split('?');
+                    const mergedQueryString = existsRedirect.isQueryStringPreserved
+                        ? (0, utils_1.mergeURLSearchParams)(new URLSearchParams((_a = url.search) !== null && _a !== void 0 ? _a : ''), new URLSearchParams(targetQueryString || ''))
+                        : targetQueryString || '';
+                    const prepareNewURL = new URL(`${targetPath}${mergedQueryString ? `?${mergedQueryString}` : ''}`, url.origin);
+                    url.href = prepareNewURL.href;
+                    url.pathname = prepareNewURL.pathname;
+                    url.search = prepareNewURL.search;
+                    url.locale = req.nextUrl.locale;
+                    return this.dispatchRedirect(url, existsRedirect.redirectType, req, response, false);
                 }
             });
             const response = yield createResponse();
@@ -118,60 +205,95 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
             });
             return response;
         });
-        // NOTE: we provide native fetch for compatibility on Next.js Edge Runtime
-        // (underlying default 'cross-fetch' is not currently compatible: https://github.com/lquixada/cross-fetch/issues/78)
-        this.redirectsService = new site_1.GraphQLRedirectsService(Object.assign(Object.assign({}, config), { fetch: fetch }));
-        this.locales = config.locales;
     }
     /**
-     * Gets the Next.js middleware handler with error handling
-     * @returns route handler
+     * Fetches all redirects for a given site from the Sitecore instance
+     * @param {string} siteName - The name of the site to fetch redirects for
+     * @returns {Promise<RedirectInfo[]>} A promise that resolves to an array of redirect information
+     * @protected
      */
-    getHandler() {
-        return (req, res) => __awaiter(this, void 0, void 0, function* () {
-            try {
-                return yield this.handler(req, res);
-            }
-            catch (error) {
-                console.log('Redirect middleware failed:');
-                console.log(error);
-                return res || server_1.NextResponse.next();
-            }
+    getRedirects(siteName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.redirectsService.fetchRedirects(siteName);
         });
     }
     /**
-     * Method returns RedirectInfo when matches
-     * @param {NextRequest} req request
-     * @param {string} siteName site name
-     * @returns Promise<RedirectInfo | undefined>
-     * @private
+     * When a user clicks on a link generated by the Link component from next/link,
+     * Next.js adds special parameters in the route called path.
+     * This method removes these special parameters.
+     * @param {NextURL} url
+     * @returns {string} normalize url
      */
-    getExistsRedirect(req, siteName) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const redirects = yield this.redirectsService.fetchRedirects(siteName);
-            const tragetURL = req.nextUrl.pathname;
-            const targetQS = req.nextUrl.search || '';
-            const language = this.getLanguage(req);
-            const modifyRedirects = structuredClone(redirects);
-            return modifyRedirects.length
-                ? modifyRedirects.find((redirect) => {
-                    redirect.pattern = redirect.pattern.replace(RegExp(`^[^]?/${language}/`, 'gi'), '');
-                    redirect.pattern = `/^\/${redirect.pattern
-                        .replace(/^\/|\/$/g, '')
-                        .replace(/^\^\/|\/\$$/g, '')
-                        .replace(/^\^|\$$/g, '')
-                        .replace(/(?<!\\)\?/g, '\\?')
-                        .replace(/\$\/gi$/g, '')}[\/]?$/gi`;
-                    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));
-                })
-                : undefined;
+    normalizeUrl(url) {
+        if (!url.search)
+            return url;
+        /**
+         * Prepare special parameters for exclusion.
+         */
+        const splittedPathname = url.pathname
+            .split('/')
+            .filter((route) => route)
+            .map((route) => `path=${route}`);
+        /**
+         * Remove special parameters(Next.JS)
+         * Example: /about/contact/us
+         * When a user clicks on this link, Next.js should generate a link for the middleware, formatted like this:
+         * http://host/about/contact/us?path=about&path=contact&path=us
+         */
+        const newQueryString = url.search
+            .replace(/^\?/, '')
+            .split('&')
+            .filter((param) => !splittedPathname.includes(param))
+            .join('&');
+        const newUrl = new URL(`${url.pathname.toLowerCase()}?${newQueryString}`, url.origin);
+        url.search = newUrl.search;
+        url.pathname = newUrl.pathname.toLowerCase();
+        url.href = newUrl.href;
+        return url;
+    }
+    /**
+     * Dispatch a redirect or rewrite based on type.
+     * @param {NextURL | string} target Final target to redirect/rewrite to (NextURL or string for externals).
+     * @param {string} type One of `REDIRECT_TYPE_301`, `REDIRECT_TYPE_302`, or `REDIRECT_TYPE_SERVER_TRANSFER`.
+     * @param {NextRequest} req Incoming request.
+     * @param {NextResponse} res Current response (used for header cleanup/carry-over).
+     * @param {boolean} isExternal Set to `true` when target is an external absolute URL.
+     * @returns A NextResponse.
+     */
+    dispatchRedirect(target, type, req, res, isExternal = false) {
+        switch (type) {
+            case site_1.REDIRECT_TYPE_301:
+                return this.createRedirectResponse(target, res, 301, 'Moved Permanently');
+            case site_1.REDIRECT_TYPE_302:
+                return this.createRedirectResponse(target, res, 302, 'Found');
+            case site_1.REDIRECT_TYPE_SERVER_TRANSFER:
+                // rewrite expects a string; unwrap NextURL if needed
+                return this.rewrite(typeof target === 'string' ? target : target.href, req, res, isExternal);
+            default:
+                // Unknown type: return the input response unchanged
+                return res;
+        }
+    }
+    /**
+     * Helper function to create a redirect response and remove the x-middleware-next header.
+     * @param {NextURL} url The URL to redirect to.
+     * @param {Response} res The response object.
+     * @param {number} status The HTTP status code of the redirect.
+     * @param {string} statusText The status text of the redirect.
+     * @returns {NextResponse<unknown>} The redirect response.
+     */
+    createRedirectResponse(url, res, status, statusText) {
+        const redirect = server_1.NextResponse.redirect(url, {
+            status,
+            statusText,
+            headers: res === null || res === void 0 ? void 0 : res.headers,
         });
+        if (res === null || res === void 0 ? void 0 : res.headers) {
+            redirect.headers.delete('x-middleware-next');
+            redirect.headers.delete('x-middleware-rewrite');
+            redirect.headers.delete(middleware_1.REWRITE_HEADER_NAME);
+        }
+        return redirect;
     }
 }
 exports.RedirectsMiddleware = RedirectsMiddleware;

package/dist/esm/middleware/middleware.js

@@ -1,4 +1,5 @@
 import { NextResponse } from 'next/server';
+export const REWRITE_HEADER_NAME = 'x-sc-rewrite';
 export class MiddlewareBase {
     constructor(config) {
         this.config = config;
@@ -33,6 +34,27 @@ export class MiddlewareBase {
         incomingHeaders.forEach((value, key) => (headers[key] = value));
         return headers;
     }
+    /**
+     * Determines if the request is a Next.js (next/link) prefetch request
+     * @param {NextRequest} req request
+     * @returns {boolean} is prefetch
+     */
+    isPrefetch(req) {
+        const isMobile = req.headers.get('sec-ch-ua-mobile') === '?1';
+        const userAgent = req.headers.get('user-agent') || '';
+        const isKnownPlatform = /iPhone|Mac|Linux|Windows|Android/i.test(userAgent);
+        const isKnownDevice = isMobile || isKnownPlatform;
+        const purpose = req.headers.get('purpose');
+        const nextRouterPrefetch = req.headers.get('Next-Router-Prefetch');
+        const middlewarePrefetch = req.headers.get('x-middleware-prefetch');
+        // Some real navigations on different devices may incorrectly include 'prefetch' headers.
+        // To avoid skipping personalization in such cases, we treat 'x-middleware-prefetch' as a more reliable signal of true prefetch behavior.
+        if (isKnownDevice && middlewarePrefetch === '1') {
+            return false;
+        }
+        // Otherwise, standard prefetch detection
+        return purpose === 'prefetch' || nextRouterPrefetch === '1' || middlewarePrefetch === '1';
+    }
     /**
      * Provides used language
      * @param {NextRequest} req request
@@ -69,14 +91,17 @@ export class MiddlewareBase {
      * @param {string} rewritePath the destionation path
      * @param {NextRequest} req the current request
      * @param {NextResponse} res the current response
+     * @param {boolean} [skipHeader] don't write 'x-sc-rewrite' header
      */
-    rewrite(rewritePath, req, res) {
+    rewrite(rewritePath, req, res, skipHeader) {
         // Note an absolute URL is required: https://nextjs.org/docs/messages/middleware-relative-urls
         const rewriteUrl = req.nextUrl.clone();
         rewriteUrl.pathname = rewritePath;
         const response = NextResponse.rewrite(rewriteUrl, res);
         // Share rewrite path with following executed middlewares
-        response.headers.set(this.REWRITE_HEADER_NAME, rewritePath);
+        if (!skipHeader) {
+            response.headers.set(REWRITE_HEADER_NAME, rewritePath);
+        }
         return response;
     }
 }