diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx index 7898f7504b966..ce51949a97bb8 100644 --- a/packages/next/server/app-render.tsx +++ b/packages/next/server/app-render.tsx @@ -874,7 +874,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 new file mode 100644 index 0000000000000..90ee69c678574 --- /dev/null +++ b/test/production/app-dir-prefetch-non-iso-url/app/[slug]/page.js @@ -0,0 +1,12 @@ +export default function Slug(props) { + return ( + <> +

/[slug]

+

{JSON.stringify(props)}

+ + ) +} + +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 new file mode 100644 index 0000000000000..750eb927b1980 --- /dev/null +++ b/test/production/app-dir-prefetch-non-iso-url/app/layout.js @@ -0,0 +1,7 @@ +export default function Layout({ children }) { + return ( + + {children} + + ) +} 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 new file mode 100644 index 0000000000000..786b1ea934a51 --- /dev/null +++ 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 ( + <> +

index

+

{JSON.stringify(props)}

+ + /iso-url + +
+ + /кириллица + +
+ + ) +} 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 new file mode 100644 index 0000000000000..6acf21db99096 --- /dev/null +++ b/test/production/app-dir-prefetch-non-iso-url/index.test.ts @@ -0,0 +1,48 @@ +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 { check } 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() + await check(() => browser.elementByCss('#page').text(), '/[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() + await check(() => browser.elementByCss('#page').text(), '/[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 new file mode 100644 index 0000000000000..426499ce6de35 --- /dev/null +++ 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