Skip to content

Commit b159d1f

Browse files
styflestyfle
committed
fix(next/image): handle undefined images.localPatterns config in images-manifest.json (#70730)
Since `images.localPatterns` config can be undefined, we need to support that when emitting `images-manifest.json`. - When `undefined`, all local images are allowed - When `[]`, no local images are allowed Note this is different than `remotePatterns` since it treats `undefined` and `[]` the same (the default being no remote images are allowed).
1 parent 9c1191a commit b159d1f

File tree

6 files changed

+144
-18
lines changed

6 files changed

+144
-18
lines changed

‎packages/next/src/build/index.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,8 @@ async function writeImagesManifest(
412412
const images = { ...config.images }
413413
const { deviceSizes, imageSizes } = images
414414
;(images as any).sizes = [...deviceSizes, ...imageSizes]
415+
416+
// By default, remotePatterns will allow no remote images ([])
415417
images.remotePatterns = (config?.images?.remotePatterns || []).map((p) => ({
416418
// Modifying the manifest should also modify matchRemotePattern()
417419
protocol: p.protocol,
@@ -420,11 +422,15 @@ async function writeImagesManifest(
420422
pathname: makeRe(p.pathname ?? '**', { dot: true }).source,
421423
search: p.search,
422424
}))
423-
images.localPatterns = (config?.images?.localPatterns || []).map((p) => ({
424-
// Modifying the manifest should also modify matchLocalPattern()
425-
pathname: makeRe(p.pathname ?? '**', { dot: true }).source,
426-
search: p.search,
427-
}))
425+
426+
// By default, localPatterns will allow all local images (undefined)
427+
if (config?.images?.localPatterns) {
428+
images.localPatterns = config.images.localPatterns.map((p) => ({
429+
// Modifying the manifest should also modify matchLocalPattern()
430+
pathname: makeRe(p.pathname ?? '**', { dot: true }).source,
431+
search: p.search,
432+
}))
433+
}
428434

429435
await writeManifest(path.join(distDir, IMAGES_MANIFEST), {
430436
version: 1,

‎packages/next/src/server/config.ts‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -374,11 +374,18 @@ function assignDefaults(
374374
`Specified images.localPatterns should be an Array received ${typeof images.localPatterns}.\nSee more info here: https://nextjs.org/docs/messages/invalid-images-config`
375375
)
376376
}
377-
// static import images are automatically allowed
378-
images.localPatterns.push({
379-
pathname: '/_next/static/media/**',
380-
search: '',
381-
})
377+
// avoid double-pushing the same pattern if it already exists
378+
const hasMatch = images.localPatterns.some(
379+
(pattern) =>
380+
pattern.pathname === '/_next/static/media/**' && pattern.search === ''
381+
)
382+
if (!hasMatch) {
383+
// static import images are automatically allowed
384+
images.localPatterns.push({
385+
pathname: '/_next/static/media/**',
386+
search: '',
387+
})
388+
}
382389
}
383390

384391
if (images.remotePatterns) {
@@ -398,9 +405,9 @@ function assignDefaults(
398405
matchRemotePattern(pattern, url)
399406
)
400407

401-
// avoid double-pushing the same remote if it already can be matched
408+
// avoid double-pushing the same pattern if it already can be matched
402409
if (!hasMatchForAssetPrefix) {
403-
images.remotePatterns?.push({
410+
images.remotePatterns.push({
404411
hostname: url.hostname,
405412
protocol: url.protocol.replace(/:$/, '') as 'http' | 'https',
406413
port: url.port,

‎test/integration/next-image-new/app-dir-localpatterns/test/index.test.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
assertNoRedbox,
66
fetchViaHTTP,
77
findPort,
8+
getImagesManifest,
89
getRedboxHeader,
910
killApp,
1011
launchApp,
@@ -64,6 +65,48 @@ function runTests(mode: 'dev' | 'server') {
6465
expect(res.status).toBe(400)
6566
}
6667
})
68+
69+
if (mode === 'server') {
70+
it('should build correct images-manifest.json', async () => {
71+
const manifest = getImagesManifest(appDir)
72+
expect(manifest).toEqual({
73+
version: 1,
74+
images: {
75+
contentDispositionType: 'attachment',
76+
contentSecurityPolicy:
77+
"script-src 'none'; frame-src 'none'; sandbox;",
78+
dangerouslyAllowSVG: false,
79+
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
80+
disableStaticImages: false,
81+
domains: [],
82+
formats: ['image/webp'],
83+
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
84+
loader: 'default',
85+
loaderFile: '',
86+
remotePatterns: [],
87+
localPatterns: [
88+
{
89+
pathname:
90+
'^(?:\\/assets(?:\\/(?!\\.{1,2}(?:\\/|$))(?:(?:(?!(?:^|\\/)\\.{1,2}(?:\\/|$)).)*?)|$))$',
91+
search: '',
92+
},
93+
{
94+
pathname:
95+
'^(?:\\/_next\\/static\\/media(?:\\/(?!\\.{1,2}(?:\\/|$))(?:(?:(?!(?:^|\\/)\\.{1,2}(?:\\/|$)).)*?)|$))$',
96+
search: '',
97+
},
98+
],
99+
minimumCacheTTL: 60,
100+
path: '/_next/image',
101+
sizes: [
102+
640, 750, 828, 1080, 1200, 1920, 2048, 3840, 16, 32, 48, 64, 96,
103+
128, 256, 384,
104+
],
105+
unoptimized: false,
106+
},
107+
})
108+
})
109+
}
67110
}
68111

69112
describe('Image localPatterns config', () => {

‎test/integration/next-image-new/app-dir/test/index.test.ts‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
import cheerio from 'cheerio'
44
import validateHTML from 'html-validator'
55
import {
6+
assertHasRedbox,
7+
assertNoRedbox,
68
check,
79
fetchViaHTTP,
810
findPort,
11+
getImagesManifest,
912
getRedboxHeader,
1013
hasRedbox,
1114
killApp,
@@ -70,7 +73,7 @@ function getRatio(width, height) {
7073
return height / width
7174
}
7275

73-
function runTests(mode) {
76+
function runTests(mode: 'dev' | 'server') {
7477
it('should load the images', async () => {
7578
let browser
7679
try {
@@ -1535,6 +1538,37 @@ function runTests(mode) {
15351538
}
15361539
}
15371540
})
1541+
1542+
if (mode === 'server') {
1543+
it('should build correct images-manifest.json', async () => {
1544+
const manifest = getImagesManifest(appDir)
1545+
expect(manifest).toEqual({
1546+
version: 1,
1547+
images: {
1548+
contentDispositionType: 'attachment',
1549+
contentSecurityPolicy:
1550+
"script-src 'none'; frame-src 'none'; sandbox;",
1551+
dangerouslyAllowSVG: false,
1552+
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
1553+
disableStaticImages: false,
1554+
domains: [],
1555+
formats: ['image/webp'],
1556+
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
1557+
loader: 'default',
1558+
loaderFile: '',
1559+
remotePatterns: [],
1560+
localPatterns: undefined,
1561+
minimumCacheTTL: 60,
1562+
path: '/_next/image',
1563+
sizes: [
1564+
640, 750, 828, 1080, 1200, 1920, 2048, 3840, 16, 32, 48, 64, 96,
1565+
128, 256, 384,
1566+
],
1567+
unoptimized: false,
1568+
},
1569+
})
1570+
})
1571+
}
15381572
}
15391573

15401574
describe('Image Component Default Tests', () => {

‎test/integration/next-image-new/unoptimized/test/index.test.ts‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { join } from 'path'
44
import {
55
check,
66
findPort,
7+
getImagesManifest,
78
killApp,
89
launchApp,
910
nextBuild,
@@ -15,7 +16,7 @@ const appDir = join(__dirname, '../')
1516
let appPort
1617
let app
1718

18-
function runTests(url: string) {
19+
function runTests(url: string, mode: 'dev' | 'server') {
1920
it('should not optimize any image', async () => {
2021
const browser = await webdriver(appPort, url)
2122
expect(
@@ -89,6 +90,37 @@ function runTests(url: string) {
8990
await browser.elementById('eager-image').getAttribute('srcset')
9091
).toBeNull()
9192
})
93+
94+
if (mode === 'server') {
95+
it('should build correct images-manifest.json', async () => {
96+
const manifest = getImagesManifest(appDir)
97+
expect(manifest).toEqual({
98+
version: 1,
99+
images: {
100+
contentDispositionType: 'attachment',
101+
contentSecurityPolicy:
102+
"script-src 'none'; frame-src 'none'; sandbox;",
103+
dangerouslyAllowSVG: false,
104+
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
105+
disableStaticImages: false,
106+
domains: [],
107+
formats: ['image/webp'],
108+
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
109+
loader: 'default',
110+
loaderFile: '',
111+
remotePatterns: [],
112+
localPatterns: undefined,
113+
minimumCacheTTL: 60,
114+
path: '/_next/image',
115+
sizes: [
116+
640, 750, 828, 1080, 1200, 1920, 2048, 3840, 16, 32, 48, 64, 96,
117+
128, 256, 384,
118+
],
119+
unoptimized: true,
120+
},
121+
})
122+
})
123+
}
92124
}
93125

94126
describe('Unoptimized Image Tests', () => {
@@ -101,7 +133,7 @@ describe('Unoptimized Image Tests', () => {
101133
await killApp(app)
102134
})
103135

104-
runTests('/')
136+
runTests('/', 'dev')
105137
})
106138
;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
107139
'production mode - component',
@@ -115,7 +147,7 @@ describe('Unoptimized Image Tests', () => {
115147
await killApp(app)
116148
})
117149

118-
runTests('/')
150+
runTests('/', 'server')
119151
}
120152
)
121153
describe('development mode - getImageProps', () => {
@@ -127,7 +159,7 @@ describe('Unoptimized Image Tests', () => {
127159
await killApp(app)
128160
})
129161

130-
runTests('/get-img-props')
162+
runTests('/get-img-props', 'dev')
131163
})
132164
;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
133165
'production mode - getImageProps',
@@ -141,7 +173,7 @@ describe('Unoptimized Image Tests', () => {
141173
await killApp(app)
142174
})
143175

144-
runTests('/get-img-props')
176+
runTests('/get-img-props', 'server')
145177
}
146178
)
147179
})

‎test/lib/next-test-utils.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -964,6 +964,10 @@ export function getBuildManifest(dir: string) {
964964
return readJson(path.join(dir, '.next/build-manifest.json'))
965965
}
966966

967+
export function getImagesManifest(dir: string) {
968+
return readJson(path.join(dir, '.next/images-manifest.json'))
969+
}
970+
967971
export function getPageFileFromBuildManifest(dir: string, page: string) {
968972
const buildManifest = getBuildManifest(dir)
969973
const pageFiles = buildManifest.pages[page]

0 commit comments

Comments
 (0)