Skip to content

fix(image): match Next.js 16 default image sizes#2704

Open
NathanDrake2406 wants to merge 2 commits into
cloudflare:mainfrom
NathanDrake2406:nathan/fix-next16-image-sizes
Open

fix(image): match Next.js 16 default image sizes#2704
NathanDrake2406 wants to merge 2 commits into
cloudflare:mainfrom
NathanDrake2406:nathan/fix-next16-image-sizes

Conversation

@NathanDrake2406

Copy link
Copy Markdown
Contributor

Summary

  • Match Next.js 16's default images.imageSizes by removing 16
  • Reuse the shared server default when generating client image config
  • Keep explicit imageSizes configurations containing 16 supported

Why

vinext is pinned to Next.js 16.2.7, but still used the pre-v16 default:

[16, 32, 48, 64, 96, 128, 256, 384]

Next.js 16 removed 16 because it is rarely requested and adds an unnecessary
candidate to responsive srcset output. The mismatch also meant vinext's image
optimizer accepted a default width that Next.js 16 no longer accepts.

Behavior

Scenario Before After
Default 16px fixed image Emits 16px and 32px candidates Both targets snap to one 32px candidate
Default optimizer request for w=16 Accepted Rejected
Explicit images.imageSizes containing 16 Accepted Unchanged

Validation

  • vp test run tests/image-component.test.ts tests/shims.test.ts
    • 1,322 tests passed
  • vp check packages/vinext/src/config/next-config.ts packages/vinext/src/index.ts packages/vinext/src/server/image-optimization.ts packages/vinext/src/shims/image.tsx tests/image-component.test.ts tests/shims.test.ts
    • Formatting, lint, and types passed for all six files
  • node scripts/check-shim-types.mjs
    • 24 public shim modules matched their vendored types
  • Pre-commit full check, staged tests, and knip passed

Risk

This is an intentional Next.js 16 compatibility change for projects that rely
on the default image sizes. Projects that still require 16px optimization can
opt back in with images.imageSizes, matching Next.js's migration guidance.
Explicit configurations are otherwise unchanged.

References

Next.js 16 removed the 16px default, but vinext continued generating and accepting it when imageSizes was unset. This added an unnecessary srcSet candidate and diverged from the pinned Next.js behavior.

Use the shared server default for build-time defines and keep the client shim fallback aligned. Explicit imageSizes configurations that include 16px remain supported.
@NathanDrake2406
NathanDrake2406 marked this pull request as ready for review July 25, 2026 06:24
@pkg-pr-new

pkg-pr-new Bot commented Jul 25, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@vinext/cloudflare@2704
npm i https://pkg.pr.new/create-vinext-app@2704
npm i https://pkg.pr.new/@vinext/types@2704
npm i https://pkg.pr.new/vinext@2704

commit: 6344808

@github-actions

github-actions Bot commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Performance benchmarks

Compared 6344808 against base 05eee9f using alternating same-runner rounds. Next.js was unchanged and skipped.

0 improved · 0 regressed · 6 within ±1.5%

Scenario Framework Baseline Current Change
Client bundle size (gzip) vinext 132.4 KB 132.4 KB ⚫ +0.0%
Client entry size (gzip) vinext 119.7 KB 119.7 KB ⚫ +0.0%
Dev server cold start vinext 2.84 s 2.83 s ⚫ -0.5%
Production build time vinext 3.13 s 3.13 s ⚫ +0.1%
RSC entry closure size (gzip) vinext 103.3 KB 103.3 KB ⚫ +0.0%
Server bundle size (gzip) vinext 177.8 KB 177.8 KB ⚫ -0.0%

View detailed results and traces

🟢 improvement · 🔴 regression · ⚫ change below 1.5% · paired base/head

The Next.js 16 default-width change correctly updated generated App Router entries, but this behavior test still encoded the previous list. Align the expectation while preserving the neighboring explicit 16px opt-in coverage.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant