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

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

@@ -11,7 +11,8 @@ import regexParser from 'regex-parser';
 import { NextResponse } from 'next/server';
 import { GraphQLRedirectsService, REDIRECT_TYPE_301, REDIRECT_TYPE_302, REDIRECT_TYPE_SERVER_TRANSFER, } from '@sitecore-jss/sitecore-jss/site';
 import { debug } from '@sitecore-jss/sitecore-jss';
-import { MiddlewareBase } from './middleware';
+import { areURLSearchParamsEqual, escapeNonSpecialQuestionMarks, isRegexOrUrl, mergeURLSearchParams, } from '@sitecore-jss/sitecore-jss/utils';
+import { MiddlewareBase, REWRITE_HEADER_NAME } from './middleware';
 const REGEXP_CONTEXT_SITE_LANG = new RegExp(/\$siteLang/, 'i');
 const REGEXP_ABSOLUTE_URL = new RegExp('^(?:[a-z]+:)?//', 'i');
 /**
@@ -19,13 +20,100 @@ const REGEXP_ABSOLUTE_URL = new RegExp('^(?:[a-z]+:)?//', 'i');
  * compares with current url and redirects to target url
  */
 export class RedirectsMiddleware extends 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 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 || 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 (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 ||
+                                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 = 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 = [
+                        regexParser(redirect.pattern).test(`/${localePath}${incomingQS}`),
+                        regexParser(redirect.pattern).test(`${normalizedPath}${incomingQS}`),
+                    ].some(Boolean)
+                        ? incomingQS
+                        : undefined;
+                    // Save the matched query string (if found) into the redirect object
+                    redirect.matchedQueryString = matchedQueryString || '';
+                    return (!!(regexParser(redirect.pattern).test(`/${req.nextUrl.locale}${incomingURL}`) ||
+                        regexParser(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;
@@ -37,70 +125,69 @@ export class RedirectsMiddleware extends MiddlewareBase {
                 hostname,
             });
             const createResponse = () => __awaiter(this, void 0, void 0, function* () {
-                if (this.config.disabled && this.config.disabled(req, res || NextResponse.next())) {
+                var _a;
+                const response = res || NextResponse.next();
+                if (this.config.disabled && this.config.disabled(req, response)) {
                     debug.redirects('skipped (redirects middleware is disabled)');
-                    return res || NextResponse.next();
+                    return response;
                 }
                 if (this.isPreview(req) || this.excludeRoute(pathname)) {
                     debug.redirects('skipped (%s)', this.isPreview(req) ? 'preview' : 'route excluded');
-                    return res || 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)) {
+                    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) {
                     debug.redirects('skipped (redirect does not exist)');
-                    return res || NextResponse.next();
+                    return response;
                 }
+                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 = 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(regexParser(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 REDIRECT_TYPE_301:
-                        return NextResponse.redirect(redirectUrl, {
-                            status: 301,
-                            statusText: 'Moved Permanently',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
-                    case REDIRECT_TYPE_302:
-                        return NextResponse.redirect(redirectUrl, {
-                            status: 302,
-                            statusText: 'Found',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
-                    case REDIRECT_TYPE_SERVER_TRANSFER:
-                        return NextResponse.rewrite(redirectUrl, res);
-                    default:
-                        return res || NextResponse.next();
+                    const targetSegments = isUrl
+                        ? existsRedirect.target.split('?')
+                        : url.pathname.replace(/\/*$/gi, '') + existsRedirect.matchedQueryString;
+                    const [targetPath, targetQueryString] = isUrl
+                        ? targetSegments
+                        : targetSegments
+                            .replace(regexParser(existsRedirect.pattern), existsRedirect.target)
+                            .replace(/^\/\//, '/')
+                            .split('?');
+                    const mergedQueryString = existsRedirect.isQueryStringPreserved
+                        ? 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();
@@ -112,59 +199,94 @@ export class RedirectsMiddleware extends 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 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 || 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 ((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));
-                })
-                : 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 REDIRECT_TYPE_301:
+                return this.createRedirectResponse(target, res, 301, 'Moved Permanently');
+            case REDIRECT_TYPE_302:
+                return this.createRedirectResponse(target, res, 302, 'Found');
+            case 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 = 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(REWRITE_HEADER_NAME);
+        }
+        return redirect;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "21.10.0",
+  "version": "21.10.1-canary.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -69,9 +69,9 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "21.10.0",
-    "@sitecore-jss/sitecore-jss-dev-tools": "21.10.0",
-    "@sitecore-jss/sitecore-jss-react": "21.10.0",
+    "@sitecore-jss/sitecore-jss": "21.10.1-canary.1",
+    "@sitecore-jss/sitecore-jss-dev-tools": "21.10.1-canary.1",
+    "@sitecore-jss/sitecore-jss-react": "21.10.1-canary.1",
     "@vercel/kv": "^0.2.1",
     "node-html-parser": "^6.1.4",
     "regex-parser": "^2.2.11",
@@ -79,7 +79,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "599ccf7d2789491a0847540adca697fa580d735f",
+  "gitHead": "6c273c8e433a802efc8f07323a6c4892585e8acb",
   "files": [
     "dist",
     "types",

package/types/middleware/middleware.d.ts

@@ -1,5 +1,6 @@
 import { SiteInfo, SiteResolver } from '@sitecore-jss/sitecore-jss/site';
 import { NextRequest, NextResponse } from 'next/server';
+export declare const REWRITE_HEADER_NAME = "x-sc-rewrite";
 export type MiddlewareBaseConfig = {
     /**
      * function, determines if middleware should be turned off, based on cookie, header, or other considerations
@@ -47,6 +48,12 @@ export declare abstract class MiddlewareBase {
     protected extractDebugHeaders(incomingHeaders: Headers): {
         [key: string]: string;
     };
+    /**
+     * Determines if the request is a Next.js (next/link) prefetch request
+     * @param {NextRequest} req request
+     * @returns {boolean} is prefetch
+     */
+    protected isPrefetch(req: NextRequest): boolean;
     /**
      * Provides used language
      * @param {NextRequest} req request
@@ -71,6 +78,7 @@ export declare abstract 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
      */
-    protected rewrite(rewritePath: string, req: NextRequest, res: NextResponse): NextResponse;
+    protected rewrite(rewritePath: string, req: NextRequest, res: NextResponse, skipHeader?: boolean): NextResponse;
 }

package/types/middleware/redirects-middleware.d.ts

@@ -1,6 +1,9 @@
 import { NextResponse, NextRequest } from 'next/server';
-import { GraphQLRedirectsServiceConfig } from '@sitecore-jss/sitecore-jss/site';
+import { RedirectInfo, GraphQLRedirectsServiceConfig } from '@sitecore-jss/sitecore-jss/site';
 import { MiddlewareBase, MiddlewareBaseConfig } from './middleware';
+type RedirectResult = RedirectInfo & {
+    matchedQueryString?: string;
+};
 /**
  * extended RedirectsMiddlewareConfig config type for RedirectsMiddleware
  */
@@ -19,22 +22,59 @@ export declare class RedirectsMiddleware extends MiddlewareBase {
     protected config: RedirectsMiddlewareConfig;
     private redirectsService;
     private locales;
-    /**
-     * @param {RedirectsMiddlewareConfig} [config] redirects middleware config
-     */
     constructor(config: RedirectsMiddlewareConfig);
     /**
      * Gets the Next.js middleware handler with error handling
      * @returns route handler
      */
     getHandler(): (req: NextRequest, res?: NextResponse) => Promise<NextResponse>;
-    private handler;
     /**
      * Method returns RedirectInfo when matches
      * @param {NextRequest} req request
      * @param {string} siteName site name
-     * @returns Promise<RedirectInfo | undefined>
-     * @private
+     * @returns Promise<RedirectInfo | undefined> The redirect info or undefined if no redirect is found
+     * @protected
+     */
+    protected getExistsRedirect(req: NextRequest, siteName: string): Promise<RedirectResult | undefined>;
+    /**
+     * @param {NextRequest} req request
+     * @param {Response} res response
+     * @returns {Promise<NextResponse>} The redirect response.
+     */
+    protected processRedirectRequest(req: NextRequest, res?: NextResponse): Promise<NextResponse>;
+    /**
+     * 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
+     */
+    protected getRedirects(siteName: string): Promise<RedirectInfo[]>;
+    /**
+     * 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
+     */
+    private normalizeUrl;
+    /**
+     * 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.
+     */
+    private dispatchRedirect;
+    /**
+     * 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.
      */
-    private getExistsRedirect;
+    private createRedirectResponse;
 }
+export {};