[sitecore-jss-nexjts] Redirects don't work when file extensions present in a route

CHANGELOG.md

@@ -23,6 +23,7 @@ Our versioning strategy is as follows:
 
 ### 🐛 Bug Fixes
 
+* `[tempaltes/nextjs]` `[templates/nextjs-sxa]` `[sitecore-jss-nexjts]` Redirects don't work when file extensions present in a route ([#1566](https://github.com/Sitecore/jss/pull/1566))
 * `[templates/vue]` "lint" command is failing due to bug introduced by eslint-plugin-prettier ([#1563](https://github.com/Sitecore/jss/pull/1563))
 * `[templates/nextjs-sxa]` Fix font awesome - added CDN instead of using node_modules(problem with CORS) ([#1536](https://github.com/Sitecore/jss/pull/1536) ([#1545](https://github.com/Sitecore/jss/pull/1545))
 * `[templates/nextjs-sxa]` Fix menu component of third-level menu. ([#1540](https://github.com/Sitecore/jss/pull/1540)) ([#1546](https://github.com/Sitecore/jss/pull/1546))

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

@@ -16,7 +16,7 @@ class RedirectsPlugin implements MiddlewarePlugin {
       // These should match those in your next.config.js (i18n.locales).
       locales: ['en'],
       // This function determines if a route should be excluded from RedirectsMiddleware.
-      // Certain paths are ignored by default (e.g. files and Next.js API routes), but you may wish to exclude more.
+      // Certain paths are ignored by default (e.g. Next.js API routes), but you may wish to exclude more.
       // This is an important performance consideration since Next.js Edge middleware runs on every request.
       excludeRoute: () => false,
       // This function determines if the middleware should be turned off.

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

@@ -14,7 +14,7 @@ export const config = {
    * 3. /sitecore/api (Sitecore API routes)
    * 4. /- (Sitecore media)
    * 5. /healthz (Health check)
-   * 6. all root files inside /public (e.g. /favicon.ico)
+   * 6. all root files inside /public
    */
-  matcher: ['/', '/((?!api/|_next/|healthz|sitecore/api/|-/|[\\w-]+\\.\\w+).*)'],
+  matcher: ['/', '/((?!api/|_next/|healthz|sitecore/api/|-/|favicon.ico|sc_logo.svg).*)'],
 };

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

@@ -113,7 +113,6 @@ describe('MiddlewareBase', () => {
     it('default', () => {
       const middleware = new SampleMiddleware({ siteResolver: new MockSiteResolver([]) });
 
-      expect(middleware['excludeRoute']('/src/image.png')).to.equal(true);
       expect(middleware['excludeRoute']('/api/layout/render')).to.equal(true);
       expect(middleware['excludeRoute']('/sitecore/render')).to.equal(true);
       expect(middleware['excludeRoute']('/_next/webpack')).to.equal(true);

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

@@ -48,7 +48,6 @@ export abstract class MiddlewareBase {
 
   protected excludeRoute(pathname: string) {
     return (
-      pathname.includes('.') || // Ignore files
       pathname.startsWith('/api/') || // Ignore Next.js API calls
       pathname.startsWith('/sitecore/') || // Ignore Sitecore API calls
       pathname.startsWith('/_next') || // Ignore next service calls

packages/sitecore-jss-nextjs/src/middleware/multisite-middleware.ts

@@ -37,6 +37,11 @@ export class MultisiteMiddleware extends MiddlewareBase {
     };
   }
 
+  protected excludeRoute(pathname: string): boolean | undefined {
+    // ignore files
+    return pathname.includes('.') || super.excludeRoute(pathname);
+  }
+
   private handler = async (req: NextRequest, res?: NextResponse): Promise<NextResponse> => {
     const pathname = req.nextUrl.pathname;
     const language = this.getLanguage(req);

packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts

@@ -115,6 +115,11 @@ export class PersonalizeMiddleware extends MiddlewareBase {
     };
   }
 
+  protected excludeRoute(pathname: string): boolean | undefined {
+    // ignore files
+    return pathname.includes('.') || super.excludeRoute(pathname);
+  }
+
   private handler = async (req: NextRequest, res?: NextResponse): Promise<NextResponse> => {
     const pathname = req.nextUrl.pathname;
     const language = this.getLanguage(req);

packages/sitecore-jss-nextjs/src/middleware/redirects-middleware.test.ts

@@ -259,7 +259,6 @@ describe('RedirectsMiddleware', () => {
       it('default', async () => {
         const { middleware } = createMiddleware();
 
-        await test('/src/image.png', middleware);
         await test('/api/layout/render', middleware);
         await test('/sitecore/render', middleware);
         await test('/_next/webpack', middleware);
@@ -272,7 +271,6 @@ describe('RedirectsMiddleware', () => {
           excludeRoute,
         });
 
-        await test('/src/image.png', middleware);
         await test('/api/layout/render', middleware);
         await test('/sitecore/render', middleware);
         await test('/_next/webpack', middleware);