From 4d2b7e573a4aa4ea3d4ef46c8679f1e730791797 Mon Sep 17 00:00:00 2001 From: Ilya Konstantinov Date: Fri, 18 Nov 2022 05:45:39 +0400 Subject: [PATCH] Fix app render: escape segment value #42626 (#42823) Fix: https://github.com/vercel/next.js/issues/42398 relates to https://github.com/vercel/next.js/pull/42626#pullrequestreview-1172032873 ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper --- packages/next/server/app-render.tsx | 8 +++- .../app/[slug]/page.js | 12 +++++ .../app/layout.js | 7 +++ .../app-dir-prefetch-non-iso-url/app/page.js | 18 +++++++ .../index.test.ts | 48 +++++++++++++++++++ .../next.config.js | 6 +++ 6 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 test/production/app-dir-prefetch-non-iso-url/app/[slug]/page.js create mode 100644 test/production/app-dir-prefetch-non-iso-url/app/layout.js create mode 100644 test/production/app-dir-prefetch-non-iso-url/app/page.js create mode 100644 test/production/app-dir-prefetch-non-iso-url/index.test.ts create mode 100644 test/production/app-dir-prefetch-non-iso-url/next.config.js diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx index 7898f7504b96693..ce51949a97bb82c 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 000000000000000..90ee69c678574b3 --- /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 000000000000000..750eb927b198012 --- /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 000000000000000..786b1ea934a51de --- /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 000000000000000..6acf21db99096b8 --- /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 000000000000000..426499ce6de355c --- /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