next-image: fix dpl handling with unicode by mischnic · Pull Request #90420 · vercel/next.js

mischnic · 2026-02-24T11:04:31Z

With skew protection enabled, image srcs were double-encoded:

The imported value might be '/_next/static/media/äöüščří.55df2443.png?dpl=1234'
Then new URL(src, 'http://n') would normalize the URL, leading to /_next/static/media/%C3%A4%C3%B6%C3%BC%C5%A1%C4%8D%C5%99%C3%AD.55df2443.png?dpl=1234
The the existing ?url=${encodeURIComponent(src)} causes the already percent-encoded unicode characters to be encoded yet again.

It's unfortunate that we have to handroll some URL parsing here, maybe someone has a better idea

  ● Image Component Unicode Image URL › production mode › should load static unicode image

    expect(received).toMatch(expected)

    Expected pattern: /_next%2Fstatic%2Fmedia%2F%C3%A4%C3%B6%C3%BC%C5%A1%C4%8D%C5%99%C3%AD(.+)png/
    Received string:  "/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F%25C3%25A4%25C3%25B6%25C3%25BC%25C5%25A1%25C4%258D%25C5%2599%25C3%25AD.55df2443.png&w=828&q=75&dpl=test-immutable-tkn-7890"

      21 |   it('should load static unicode image', async () => {
      22 |     const src = await browser.elementById('static').getAttribute('src')
    > 23 |     expect(src).toMatch(
         |                 ^
      24 |       /_next%2Fstatic%2Fmedia%2F%C3%A4%C3%B6%C3%BC%C5%A1%C4%8D%C5%99%C3%AD(.+)png/
      25 |     )
      26 |     const fullSrc = new URL(src, `http://localhost:${appPort}`)

      at Object.toMatch (integration/next-image-legacy/unicode/test/index.test.ts:23:17)



  ● Image Component Unicode Image URL › production mode › should load static unicode image

    expect(received).toMatch(expected)

    Expected pattern: /_next%2Fstatic%2Fmedia%2F%C3%A4%C3%B6%C3%BC%C5%A1%C4%8D%C5%99%C3%AD(.+)png/
    Received string:  "/_next/image?url=%2F_next%2Fstatic%2Fmedia%2F%25C3%25A4%25C3%25B6%25C3%25BC%25C5%25A1%25C4%258D%25C5%2599%25C3%25AD.55df2443.png&w=828&q=75&dpl=test-immutable-tkn-7890"

      22 |   it('should load static unicode image', async () => {
      23 |     const src = await browser.elementById('static').getAttribute('src')
    > 24 |     expect(src).toMatch(
         |                 ^
      25 |       /_next%2Fstatic%2Fmedia%2F%C3%A4%C3%B6%C3%BC%C5%A1%C4%8D%C5%99%C3%AD(.+)png/
      26 |     )
      27 |     const fullSrc = new URL(src, `http://localhost:${appPort}`)

      at Object.toMatch (integration/next-image-new/unicode/test/index.test.ts:24:17)

mischnic · 2026-02-24T11:04:47Z

Turbopack: experimental.immutableAssetToken #88607
next-image: fix dpl handling with unicode #90420 👈 (View in Graphite)
next-image: fix deployment id handling for unoptimized #90416
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

packages/next/src/shared/lib/image-loader.ts

nextjs-bot · 2026-02-24T11:34:53Z

Stats from current PR

✅ No significant changes detected

📊 All Metrics

📖 Metrics Glossary

Dev Server Metrics:

Listen = TCP port starts accepting connections
First Request = HTTP server returns successful response
Cold = Fresh build (no cache)
Warm = With cached build artifacts

Build Metrics:

Fresh = Clean build (no .next directory)
Cached = With existing .next directory

Change Thresholds:

Time: Changes < 50ms AND < 10%, OR < 2% are insignificant
Size: Changes < 1KB AND < 1% are insignificant
All other changes are flagged to catch regressions

⚡ Dev Server

Metric	Canary	PR	Change	Trend
Cold (Listen)	455ms	455ms	✓	▁█▁▁▁
Cold (Ready in log)	437ms	439ms	✓	▂█▂▂▂
Cold (First Request)	1.257s	1.264s	✓	▅█▅▄▅
Warm (Listen)	456ms	456ms	✓	▁█▁▁▁
Warm (Ready in log)	443ms	443ms	✓	▁█▁▁▁
Warm (First Request)	348ms	351ms	✓	▁█▁▁▁

📦 Dev Server (Webpack) (Legacy)

📦 Dev Server (Webpack)

Metric	Canary	PR	Change	Trend
Cold (Listen)	455ms	456ms	✓	▁▁███
Cold (Ready in log)	436ms	437ms	✓	█▇▆▇█
Cold (First Request)	1.953s	1.928s	✓	▅▄▄▄▅
Warm (Listen)	456ms	456ms	✓	▅▅█▁▁
Warm (Ready in log)	435ms	436ms	✓	▆▆▆▇▇
Warm (First Request)	1.957s	1.942s	✓	▃▃▃▄▄

⚡ Production Builds

Metric	Canary	PR	Change	Trend
Fresh Build	3.906s	4.011s	✓	▁█▁▁▁
Cached Build	4.001s	3.960s	✓	▁█▁▁▁

📦 Production Builds (Webpack) (Legacy)

📦 Production Builds (Webpack)

Metric	Canary	PR	Change	Trend
Fresh Build	13.865s	13.896s	✓	▁▁▁▁▁
Cached Build	14.095s	14.111s	✓	▁▁▁▁▁
node_modules Size	474 MB	474 MB	✓	▁▁▁▁▁

📦 Bundle Sizes

Bundle Sizes

⚡ Turbopack

Client

Main Bundles: **399 kB** → **399 kB** ⚠️ +84 B

80 files with content-based hashes (individual files not comparable between builds)

Server

Middleware

	Canary	PR	Change
middleware-b..fest.js gzip	769 B	762 B	✓
Total	769 B	762 B	✅ -7 B

Build Details

Build Manifests

	Canary	PR	Change
_buildManifest.js gzip	450 B	451 B	✓
Total	450 B	451 B	⚠️ +1 B

📦 Webpack

Client

Main Bundles

	Canary	PR	Change
5528-HASH.js gzip	5.48 kB	N/A	-
6280-HASH.js gzip	57.5 kB	N/A	-
6335.HASH.js gzip	169 B	N/A	-
912-HASH.js gzip	4.53 kB	N/A	-
e8aec2e4-HASH.js gzip	62.6 kB	N/A	-
framework-HASH.js gzip	59.7 kB	59.7 kB	✓
main-app-HASH.js gzip	256 B	254 B	✓
main-HASH.js gzip	39.1 kB	39.1 kB	✓
webpack-HASH.js gzip	1.68 kB	1.68 kB	✓
262-HASH.js gzip	N/A	4.59 kB	-
2889.HASH.js gzip	N/A	169 B	-
5602-HASH.js gzip	N/A	5.55 kB	-
6948ada0-HASH.js gzip	N/A	62.6 kB	-
9544-HASH.js gzip	N/A	58.3 kB	-
Total	231 kB	232 kB	⚠️ +873 B

Polyfills

	Canary	PR	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Total	39.4 kB	39.4 kB	✓

Pages

	Canary	PR	Change
_app-HASH.js gzip	194 B	194 B	✓
_error-HASH.js gzip	183 B	180 B	🟢 3 B (-2%)
css-HASH.js gzip	331 B	330 B	✓
dynamic-HASH.js gzip	1.81 kB	1.81 kB	✓
edge-ssr-HASH.js gzip	256 B	256 B	✓
head-HASH.js gzip	351 B	352 B	✓
hooks-HASH.js gzip	384 B	383 B	✓
image-HASH.js gzip	580 B	581 B	✓
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	2.5 kB	2.5 kB	✓
routerDirect..HASH.js gzip	320 B	319 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	315 B	315 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Total	7.97 kB	7.97 kB	✅ -2 B

Server

Edge SSR

	Canary	PR	Change
edge-ssr.js gzip	125 kB	125 kB	✓
page.js gzip	252 kB	253 kB	✓
Total	377 kB	378 kB	⚠️ +502 B

Middleware

	Canary	PR	Change
middleware-b..fest.js gzip	615 B	614 B	✓
middleware-r..fest.js gzip	156 B	155 B	✓
middleware.js gzip	43.8 kB	44 kB	✓
edge-runtime..pack.js gzip	842 B	842 B	✓
Total	45.4 kB	45.6 kB	⚠️ +232 B

Build Details

Build Manifests

	Canary	PR	Change
_buildManifest.js gzip	715 B	718 B	✓
Total	715 B	718 B	⚠️ +3 B

Build Cache

	Canary	PR	Change
0.pack gzip	3.98 MB	3.99 MB	🔴 +13.6 kB (+0%)
index.pack gzip	104 kB	102 kB	🟢 1.35 kB (-1%)
index.pack.old gzip	102 kB	103 kB	🔴 +1.15 kB (+1%)
Total	4.18 MB	4.2 MB	⚠️ +13.4 kB

🔄 Shared (bundler-independent)

Runtimes

	Canary	PR	Change
app-page-exp...dev.js gzip	318 kB	318 kB	✓
app-page-exp..prod.js gzip	168 kB	168 kB	✓
app-page-tur...dev.js gzip	318 kB	318 kB	✓
app-page-tur..prod.js gzip	168 kB	168 kB	✓
app-page-tur...dev.js gzip	314 kB	314 kB	✓
app-page-tur..prod.js gzip	166 kB	166 kB	✓
app-page.run...dev.js gzip	315 kB	315 kB	✓
app-page.run..prod.js gzip	167 kB	167 kB	✓
app-route-ex...dev.js gzip	70.7 kB	70.7 kB	✓
app-route-ex..prod.js gzip	49.1 kB	49.1 kB	✓
app-route-tu...dev.js gzip	70.7 kB	70.7 kB	✓
app-route-tu..prod.js gzip	49.2 kB	49.2 kB	✓
app-route-tu...dev.js gzip	70.3 kB	70.3 kB	✓
app-route-tu..prod.js gzip	48.9 kB	48.9 kB	✓
app-route.ru...dev.js gzip	70.2 kB	70.2 kB	✓
app-route.ru..prod.js gzip	48.9 kB	48.9 kB	✓
dist_client_...dev.js gzip	324 B	324 B	✓
dist_client_...dev.js gzip	326 B	326 B	✓
dist_client_...dev.js gzip	318 B	318 B	✓
dist_client_...dev.js gzip	317 B	317 B	✓
pages-api-tu...dev.js gzip	43.2 kB	43.2 kB	✓
pages-api-tu..prod.js gzip	32.9 kB	32.9 kB	✓
pages-api.ru...dev.js gzip	43.2 kB	43.2 kB	✓
pages-api.ru..prod.js gzip	32.8 kB	32.8 kB	✓
pages-turbo....dev.js gzip	52.5 kB	52.5 kB	✓
pages-turbo...prod.js gzip	38.5 kB	38.5 kB	✓
pages.runtim...dev.js gzip	52.5 kB	52.5 kB	✓
pages.runtim..prod.js gzip	38.4 kB	38.4 kB	✓
server.runti..prod.js gzip	62 kB	62 kB	✓
Total	2.81 MB	2.81 MB	✅ -3 B

📎 Tarball URL

next@https://vercel-packages.vercel.app/next/prs/90420/next

packages/next/src/client/legacy/image.tsx

styfle · 2026-02-24T14:26:35Z

packages/next/src/client/legacy/image.tsx

+        params.delete('dpl')
+        const remaining = params.toString()
+        src = src.slice(0, qIndex) + (remaining ? '?' + remaining : '')
+      }


Can you add a test for this one? The tests you added seem to only be for the new image component but we also want to test the legacy image component too.

I added something in test/unit/next-image-legacy.test.ts

but this is also covered by

test/integration/next-image-new/unicode/test/index.test.ts

test/integration/next-image-legacy/unicode/test/index.test.ts

once I enabled skew protection for all e2e tests

Previously ```jsx import img from "./x.png"; // x is "/_next/static/media/test.abc123.png?dpl=foo" <Image id="static-unoptimized" src={x} unoptimized /> ``` would lead to `/_next/static/media/test.abc123.png?dpl=foo&dpl=foo` #90420 adds some related tests for the legacy loader as well

nextjs-bot · 2026-02-24T16:03:14Z

Tests Passed

mischnic · 2026-02-24T16:28:53Z

Merge activity

Feb 24, 4:28 PM UTC: @mischnic merged this pull request with Graphite.

nextjs-bot added created-by: Turbopack team PRs by the Turbopack team. tests type: next labels Feb 24, 2026

This was referenced Feb 24, 2026

Turbopack: experimental.immutableAssetToken #88607

Draft

next-image: fix deployment id handling for unoptimized #90416

Merged

mischnic marked this pull request as ready for review February 24, 2026 11:07

vercel bot reviewed Feb 24, 2026

View reviewed changes

packages/next/src/shared/lib/image-loader.ts Outdated Show resolved Hide resolved

mischnic force-pushed the mischnic/next-img-unicode-dpl branch from e9de5e6 to 84e73c2 Compare February 24, 2026 11:14

mischnic requested review from sokra and styfle February 24, 2026 11:14

mischnic force-pushed the mischnic/fix-next-image-unoptimized branch from 3d39a61 to d3afbf7 Compare February 24, 2026 13:11

mischnic force-pushed the mischnic/next-img-unicode-dpl branch from 84e73c2 to 80be6f9 Compare February 24, 2026 13:11

styfle reviewed Feb 24, 2026

View reviewed changes

packages/next/src/client/legacy/image.tsx Outdated Show resolved Hide resolved

mischnic force-pushed the mischnic/next-img-unicode-dpl branch from 80be6f9 to 781e3cc Compare February 24, 2026 14:26

styfle reviewed Feb 24, 2026

View reviewed changes

sokra approved these changes Feb 24, 2026

View reviewed changes

mischnic force-pushed the mischnic/next-img-unicode-dpl branch from a024d73 to d8d8e77 Compare February 24, 2026 15:17

mischnic changed the base branch from mischnic/fix-next-image-unoptimized to graphite-base/90420 February 24, 2026 15:53

mischnic added 2 commits February 24, 2026 15:53

next-image: fix dpl handling with unicode

77a2cd2

not protocol-relative

c6ed71e

mischnic force-pushed the mischnic/next-img-unicode-dpl branch from d8d8e77 to 0bada2e Compare February 24, 2026 15:53

mischnic force-pushed the graphite-base/90420 branch from 8ae61f8 to 5c425fe Compare February 24, 2026 15:53

graphite-app bot changed the base branch from graphite-base/90420 to canary February 24, 2026 15:53

unit tests for legacy loader

0927924

mischnic force-pushed the mischnic/next-img-unicode-dpl branch from 0bada2e to 0927924 Compare February 24, 2026 15:54

mischnic merged commit c61d96e into canary Feb 24, 2026
283 of 286 checks passed

mischnic deleted the mischnic/next-img-unicode-dpl branch February 24, 2026 16:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

next-image: fix dpl handling with unicode#90420

next-image: fix dpl handling with unicode#90420
mischnic merged 3 commits intocanaryfrom
mischnic/next-img-unicode-dpl

mischnic commented Feb 24, 2026 •

edited

Loading

Uh oh!

mischnic commented Feb 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

nextjs-bot commented Feb 24, 2026 •

edited

Loading

⚡ Dev Server

📦 Dev Server (Webpack)

⚡ Production Builds

📦 Production Builds (Webpack)

Bundle Sizes

⚡ Turbopack

📦 Webpack

🔄 Shared (bundler-independent)

Uh oh!

Uh oh!

styfle Feb 24, 2026

Uh oh!

mischnic Feb 24, 2026 •

edited

Loading

Uh oh!

nextjs-bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

mischnic commented Feb 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Comments

Conversation

mischnic commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mischnic commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

nextjs-bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats from current PR

✅ No significant changes detected

⚡ Dev Server

📦 Dev Server (Webpack)

⚡ Production Builds

📦 Production Builds (Webpack)

Bundle Sizes

⚡ Turbopack

📦 Webpack

🔄 Shared (bundler-independent)

Uh oh!

Uh oh!

styfle Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

mischnic Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nextjs-bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests Passed

Uh oh!

Uh oh!

mischnic commented Feb 24, 2026

Merge activity

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mischnic commented Feb 24, 2026 •

edited

Loading

mischnic commented Feb 24, 2026 •

edited

Loading

nextjs-bot commented Feb 24, 2026 •

edited

Loading

mischnic Feb 24, 2026 •

edited

Loading

nextjs-bot commented Feb 24, 2026 •

edited

Loading