#42398 fix(app-render): escape segment value

Marcus-Rise · Marcus-Rise · commit 49fd97597cd2 · 2022-11-15T11:45:44.000+04:00
diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx
@@ -855,7 +855,13 @@ export async function renderToHTMLOrFlight(
       }
 
       const key = segmentParam.param
-      const value = pathParams[key]
+      let value = pathParams[key]
+
+      if (Array.isArray(value)) {
+        value = value.map((i) => encodeURIComponent(i))
+      } else if (typeof value === 'string') {
+        value = encodeURIComponent(value)
+      }
 
       if (!value) {
         // Handle case where optional catchall does not have a value, e.g. `/dashboard/[...slug]` when requesting `/dashboard`
diff --git a/test/production/app-dir-prefetch-non-iso-url/app/[slug]/page.js b/test/production/app-dir-prefetch-non-iso-url/app/[slug]/page.js
@@ -0,0 +1,12 @@
+export default function Slug(props) {
+  return (
+    <>
+      <p id="page">/[slug]</p>
+      <p id="props">{JSON.stringify(props)}</p>
+    </>
+  )
+}
+
+export function generateStaticParams() {
+  return [{ slug: 'iso-url' }, { slug: 'кириллица' }]
+}
diff --git a/test/production/app-dir-prefetch-non-iso-url/app/layout.js b/test/production/app-dir-prefetch-non-iso-url/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/production/app-dir-prefetch-non-iso-url/app/page.js b/test/production/app-dir-prefetch-non-iso-url/app/page.js
@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export default function Page(props) {
+  return (
+    <>
+      <p id="page">index</p>
+      <p id="props">{JSON.stringify(props)}</p>
+      <Link href="/iso-url" id="to-iso">
+        /iso-url
+      </Link>
+      <br />
+      <Link href="/кириллица" id="to-non-iso">
+        /кириллица
+      </Link>
+      <br />
+    </>
+  )
+}
diff --git a/test/production/app-dir-prefetch-non-iso-url/index.test.ts b/test/production/app-dir-prefetch-non-iso-url/index.test.ts
@@ -0,0 +1,58 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { join } from 'path'
+import { BrowserInterface } from '../../lib/browsers/base'
+import webdriver from 'next-webdriver'
+import { waitFor } from 'next-test-utils'
+
+describe('app-dir-prefetch-non-iso-url', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'next.config.js': new FileRef(join(__dirname, 'next.config.js')),
+        app: new FileRef(join(__dirname, 'app')),
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should go to iso url', async () => {
+    let browser: BrowserInterface
+
+    try {
+      browser = await webdriver(next.appPort, '/')
+      await browser.elementByCss('#to-iso').click()
+
+      const text = await browser.elementByCss('#page').text()
+
+      await waitFor(3000)
+
+      expect(text).toBe('/[slug]')
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+
+  it('should go to non-iso url', async () => {
+    let browser: BrowserInterface
+
+    try {
+      browser = await webdriver(next.appPort, '/')
+      await browser.elementByCss('#to-non-iso').click()
+
+      const text = await browser.elementByCss('#page').text()
+
+      await waitFor(3000)
+
+      expect(text).toBe('/[slug]')
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+})
diff --git a/test/production/app-dir-prefetch-non-iso-url/next.config.js b/test/production/app-dir-prefetch-non-iso-url/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  experimental: { appDir: true },
+}
+
+module.exports = nextConfig
