Do not add locale to link for api route and middleware preflight (#35994

)

Fixes #33578

This PR fixes `Link` component as well to not add locale for api routes since both preflight redirect and link should work the same.

Additionally, it fixes the webdriver method `browser.waitForCondition()` for playwright to not wrap with function string.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

packages/next/shared/lib/router/router.ts

@@ -125,6 +125,11 @@ function addPathPrefix(path: string, prefix?: string) {
   )
 }
 
+function hasPathPrefix(path: string, prefix: string) {
+  path = pathNoQueryHash(path)
+  return path === prefix || path.startsWith(prefix + '/')
+}
+
 export function getDomainLocale(
   path: string,
   locale?: string | false,
@@ -153,16 +158,18 @@ export function addLocale(
   defaultLocale?: string
 ) {
   if (process.env.__NEXT_I18N_SUPPORT) {
-    const pathname = pathNoQueryHash(path)
-    const pathLower = pathname.toLowerCase()
-    const localeLower = locale && locale.toLowerCase()
+    if (locale && locale !== defaultLocale) {
+      const pathname = pathNoQueryHash(path)
+      const pathLower = pathname.toLowerCase()
+      const localeLower = locale.toLowerCase()
 
-    return locale &&
-      locale !== defaultLocale &&
-      !pathLower.startsWith('/' + localeLower + '/') &&
-      pathLower !== '/' + localeLower
-      ? addPathPrefix(path, '/' + locale)
-      : path
+      if (
+        !hasPathPrefix(pathLower, '/' + localeLower) &&
+        !hasPathPrefix(pathLower, '/api')
+      ) {
+        return addPathPrefix(path, '/' + locale)
+      }
+    }
   }
   return path
 }
@@ -194,8 +201,7 @@ function pathNoQueryHash(path: string) {
 }
 
 export function hasBasePath(path: string): boolean {
-  path = pathNoQueryHash(path)
-  return path === basePath || path.startsWith(basePath + '/')
+  return hasPathPrefix(path, basePath)
 }
 
 export function addBasePath(path: string): string {

test/integration/i18n-support/pages/index.js

@@ -47,6 +47,10 @@ export default function Page(props) {
         <a id="to-gssp-slug">to /gssp/first</a>
       </Link>
       <br />
+      <Link href="/api/post/asdf">
+        <a id="to-api-post">to /api/post/[slug]</a>
+      </Link>
+      <br />
     </>
   )
 }

test/integration/i18n-support/test/index.test.js

@@ -495,6 +495,16 @@ describe('i18n Support', () => {
           expect(await browser.eval('window.location.pathname')).toBe(
             `${localePath}gssp/first/`
           )
+
+          await browser.back().waitForElementByCss('#index')
+          await browser.elementByCss('#to-api-post').click()
+
+          await browser.waitForCondition(
+            'window.location.pathname === "/api/post/asdf/"'
+          )
+          const body = await browser.elementByCss('body').text()
+          const json = JSON.parse(body)
+          expect(json.post).toBe(true)
         }
       })
     }

test/integration/middleware/core/pages/api/ok.js

@@ -0,0 +1,3 @@
+export default function handler(req, res) {
+  res.send('ok')
+}

test/integration/middleware/core/pages/redirects/_middleware.js

@@ -58,4 +58,10 @@ export async function middleware(request) {
     url.pathname = '/redirects/infinite-loop'
     return Response.redirect(url)
   }
+
+  if (url.pathname === '/redirects/to') {
+    url.pathname = url.searchParams.get('pathname')
+    url.searchParams.delete('pathname')
+    return Response.redirect(url)
+  }
 }

test/integration/middleware/core/pages/redirects/index.js

@@ -28,6 +28,10 @@ export default function Home() {
         <a>Redirect me alot (infinite loop)</a>
       </Link>
       <div />
+      <Link href="/redirects/to?pathname=/api/ok" locale="nl">
+        <a id="link-to-api-with-locale">>Redirect me to api with locale</a>
+      </Link>
+      <div />
     </div>
   )
 }

test/integration/middleware/core/test/index.test.js

@@ -579,6 +579,14 @@ function redirectTests(locale = '') {
       fetchViaHTTP(context.appPort, `${locale}/redirects/infinite-loop`)
     ).rejects.toThrow()
   })
+
+  it(`${locale} should redirect to api route with locale`, async () => {
+    const browser = await webdriver(context.appPort, `${locale}/redirects`)
+    await browser.elementByCss('#link-to-api-with-locale').click()
+    await browser.waitForCondition('window.location.pathname === "/api/ok"')
+    const body = await browser.elementByCss('body').text()
+    expect(body).toBe('ok')
+  })
 }
 
 function responseTests(locale = '') {

test/lib/browsers/playwright.ts

@@ -315,12 +315,7 @@ class Playwright extends BrowserInterface {
 
   waitForCondition(condition, timeout) {
     return this.chain(() => {
-      return page.waitForFunction(
-        `function() {
-        return ${condition}
-      }`,
-        { timeout }
-      )
+      return page.waitForFunction(condition, { timeout })
     })
   }