Include i18 and basePath on middleware with custom matchers

packages/next/build/analysis/get-page-static-info.ts

@@ -1,6 +1,7 @@
 import type { PageRuntime } from '../../server/config-shared'
 import type { NextConfig } from '../../server/config-shared'
 import { tryToExtractExportedConstValue } from './extract-const-value'
+import { escapeStringRegexp } from '../../shared/lib/escape-regexp'
 import { parseModule } from './parse-module'
 import { promises as fs } from 'fs'
 import { tryToParsePath } from '../../lib/try-to-parse-path'
@@ -49,7 +50,7 @@ export async function getPageStaticInfo(params: {
       runtime = 'edge'
     }
 
-    const middlewareConfig = getMiddlewareConfig(config)
+    const middlewareConfig = getMiddlewareConfig(config, nextConfig)
 
     return {
       ssr,
@@ -121,12 +122,15 @@ async function tryToReadFile(filePath: string, shouldThrow: boolean) {
   }
 }
 
-function getMiddlewareConfig(config: any): Partial<MiddlewareConfig> {
+function getMiddlewareConfig(
+  config: any,
+  nextConfig: NextConfig
+): Partial<MiddlewareConfig> {
   const result: Partial<MiddlewareConfig> = {}
 
   if (config.matcher) {
     result.pathMatcher = new RegExp(
-      getMiddlewareRegExpStrings(config.matcher).join('|')
+      getMiddlewareRegExpStrings(config.matcher, nextConfig).join('|')
     )
 
     if (result.pathMatcher.source.length > 4096) {
@@ -139,9 +143,14 @@ function getMiddlewareConfig(config: any): Partial<MiddlewareConfig> {
   return result
 }
 
-function getMiddlewareRegExpStrings(matcherOrMatchers: unknown): string[] {
+function getMiddlewareRegExpStrings(
+  matcherOrMatchers: unknown,
+  nextConfig: NextConfig
+): string[] {
   if (Array.isArray(matcherOrMatchers)) {
-    return matcherOrMatchers.flatMap((x) => getMiddlewareRegExpStrings(x))
+    return matcherOrMatchers.flatMap((matcher) =>
+      getMiddlewareRegExpStrings(matcher, nextConfig)
+    )
   }
 
   if (typeof matcherOrMatchers !== 'string') {
@@ -156,6 +165,18 @@ function getMiddlewareRegExpStrings(matcherOrMatchers: unknown): string[] {
     throw new Error('`matcher`: path matcher must start with /')
   }
 
+  if (nextConfig.i18n?.locales) {
+    matcher = `/:nextInternalLocale(${nextConfig.i18n.locales
+      .map((locale) => escapeStringRegexp(locale))
+      .join('|')})${
+      matcher === '/' && !nextConfig.trailingSlash ? '' : matcher
+    }`
+  }
+
+  if (nextConfig.basePath) {
+    matcher = `${nextConfig.basePath}${matcher === '/' ? '' : matcher}`
+  }
+
   const parsedPage = tryToParsePath(matcher)
   if (parsedPage.error) {
     throw new Error(`Invalid path matcher: ${matcher}`)

test/e2e/middleware-matcher/index.test.ts

@@ -200,3 +200,183 @@ describe('using a single matcher', () => {
     expect(response.headers.get('X-From-Middleware')).toBeNull()
   })
 })
+
+describe('using a single matcher with i18n', () => {
+  let next: NextInstance
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page({ message }) { 
+            return <div>
+              <p>{message}</p>
+            </div>
+          } 
+          export const getServerSideProps = ({ params, locale }) => ({
+            props: { message: \`(\${locale}) Hello from /\` }
+          })
+        `,
+        'pages/[...route].js': `
+          export default function Page({ message }) {
+            return <div>
+              <p>catchall page</p>
+              <p>{message}</p>
+            </div>
+          } 
+          export const getServerSideProps = ({ params, locale }) => ({
+            props: { message: \`(\${locale}) Hello from /\` + params.route.join("/") }
+          })
+        `,
+        'middleware.js': `
+          import { NextResponse } from 'next/server'
+          export const config = { matcher: '/' };
+          export default (req) => {
+            const res = NextResponse.next();
+            res.headers.set('X-From-Middleware', 'true');
+            return res;
+          }
+        `,
+        'next.config.js': `
+          module.exports = {
+            i18n: {
+              localeDetection: false,
+              locales: ['es', 'en'],
+              defaultLocale: 'en',
+            }
+          }
+        `,
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it(`adds the header for a matched path`, async () => {
+    const res1 = await fetchViaHTTP(next.url, `/`)
+    expect(await res1.text()).toContain(`(en) Hello from /`)
+    expect(res1.headers.get('X-From-Middleware')).toBe('true')
+    const res2 = await fetchViaHTTP(next.url, `/es`)
+    expect(await res2.text()).toContain(`(es) Hello from /`)
+    expect(res2.headers.get('X-From-Middleware')).toBe('true')
+  })
+
+  it(`adds the headers for a matched data path`, async () => {
+    const res1 = await fetchViaHTTP(
+      next.url,
+      `/_next/data/${next.buildId}/en.json`,
+      undefined,
+      { headers: { 'x-nextjs-data': '1' } }
+    )
+    expect(await res1.json()).toMatchObject({
+      pageProps: { message: `(en) Hello from /` },
+    })
+    expect(res1.headers.get('X-From-Middleware')).toBe('true')
+    const res2 = await fetchViaHTTP(
+      next.url,
+      `/_next/data/${next.buildId}/es.json`,
+      undefined,
+      { headers: { 'x-nextjs-data': '1' } }
+    )
+    expect(await res2.json()).toMatchObject({
+      pageProps: { message: `(es) Hello from /` },
+    })
+    expect(res2.headers.get('X-From-Middleware')).toBe('true')
+  })
+
+  it(`does not add the header for an unmatched path`, async () => {
+    const response = await fetchViaHTTP(next.url, `/about/me`)
+    expect(await response.text()).toContain('Hello from /about/me')
+    expect(response.headers.get('X-From-Middleware')).toBeNull()
+  })
+})
+
+describe('using a single matcher with i18n and basePath', () => {
+  let next: NextInstance
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page({ message }) { 
+            return <div>
+              <p>root page</p>
+              <p>{message}</p>
+            </div>
+          } 
+          export const getServerSideProps = ({ params, locale }) => ({
+            props: { message: \`(\${locale}) Hello from /\` }
+          })
+        `,
+        'pages/[...route].js': `
+          export default function Page({ message }) {
+            return <div>
+              <p>catchall page</p>
+              <p>{message}</p>
+            </div>
+          } 
+          export const getServerSideProps = ({ params, locale }) => ({
+            props: { message: \`(\${locale}) Hello from /\` + params.route.join("/") }
+          })
+        `,
+        'middleware.js': `
+          import { NextResponse } from 'next/server'
+          export const config = { matcher: '/' };
+          export default (req) => {
+            const res = NextResponse.next();
+            res.headers.set('X-From-Middleware', 'true');
+            return res;
+          }
+        `,
+        'next.config.js': `
+          module.exports = {
+            basePath: '/root',
+            i18n: {
+              localeDetection: false,
+              locales: ['es', 'en'],
+              defaultLocale: 'en',
+            }
+          }
+        `,
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it(`adds the header for a matched path`, async () => {
+    const res1 = await fetchViaHTTP(next.url, `/root`)
+    expect(await res1.text()).toContain(`(en) Hello from /`)
+    expect(res1.headers.get('X-From-Middleware')).toBe('true')
+    const res2 = await fetchViaHTTP(next.url, `/root/es`)
+    expect(await res2.text()).toContain(`(es) Hello from /`)
+    expect(res2.headers.get('X-From-Middleware')).toBe('true')
+  })
+
+  it(`adds the headers for a matched data path`, async () => {
+    const res1 = await fetchViaHTTP(
+      next.url,
+      `/root/_next/data/${next.buildId}/en.json`,
+      undefined,
+      { headers: { 'x-nextjs-data': '1' } }
+    )
+    expect(await res1.json()).toMatchObject({
+      pageProps: { message: `(en) Hello from /` },
+    })
+    expect(res1.headers.get('X-From-Middleware')).toBe('true')
+    const res2 = await fetchViaHTTP(
+      next.url,
+      `/root/_next/data/${next.buildId}/es.json`,
+      undefined,
+      { headers: { 'x-nextjs-data': '1' } }
+    )
+    expect(await res2.json()).toMatchObject({
+      pageProps: { message: `(es) Hello from /` },
+    })
+    expect(res2.headers.get('X-From-Middleware')).toBe('true')
+  })
+
+  it(`does not add the header for an unmatched path`, async () => {
+    const response = await fetchViaHTTP(next.url, `/root/about/me`)
+    expect(await response.text()).toContain('Hello from /about/me')
+    expect(response.headers.get('X-From-Middleware')).toBeNull()
+  })
+})