Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb41b737

Browse files
authored
feat(next/legacy/image)!: deprecate and warn onnext/legacy/image usage (#84622)
`next/legacy/image` was introduced in Next.js 13 as way to allowdevelopers to upgrade from 12 to 13 with minimal effort.Now that its been 3 years, its time to deprecate `next/legacy/image` inNext.js 16 so we can remove it in a future version.This will print a warning the first time the component is used.
1 parent364db96 commitb41b737

File tree

4 files changed

+21
-6
lines changed

4 files changed

+21
-6
lines changed

‎docs/02-pages/04-api-reference/01-components/image-legacy.mdx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ version: legacy
66

77
Starting with Next.js 13, the`next/image` component was rewritten to improve both the performance and developer experience. In order to provide a backwards compatible upgrade solution, the old`next/image` was renamed to`next/legacy/image`.
88

9-
View the**new**[`next/image`API Reference](/docs/pages/api-reference/components/image)
9+
>**Warning**:`next/legacy/image`is deprecated and will be removed in a future version of Next.js. Please use[`next/image`](/docs/app/api-reference/components/image) instead.
1010
1111
##Comparison
1212

@@ -642,6 +642,7 @@ Auto-detection for animated files is best-effort and supports GIF, APNG, and Web
642642

643643
##Version History
644644

645-
| Version| Changes|
646-
| ---------| -------------------------------------------|
647-
|`v13.0.0`|`next/image` renamed to`next/legacy/image`|
645+
| Version| Changes|
646+
| ---------| -------------------------------------------------------------------------------------------------------------------|
647+
|`v16.0.0`|`next/legacy/image` deprecated and will be removed in a future version of Next.js. Please use`next/image` instead.|
648+
|`v13.0.0`|`next/image` renamed to`next/legacy/image`|

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -616,6 +616,9 @@ const ImageElement = ({
616616
)
617617
}
618618

619+
/**
620+
*@deprecated The `next/legacy/image` component is deprecated and will be removed in a future version of Next.js. Please use `next/image` instead.
621+
*/
619622
exportdefaultfunctionImage({
620623
src,
621624
sizes,
@@ -697,6 +700,10 @@ export default function Image({
697700
}
698701
src=typeofsrc==='string' ?src :staticSrc
699702

703+
warnOnce(
704+
`Image with src "${src}" is using next/legacy/image which is deprecated and will be removed in a future version of Next.js.`
705+
)
706+
700707
letisLazy=
701708
!priority&&(loading==='lazy'||typeofloading==='undefined')
702709
if(src.startsWith('data:')||src.startsWith('blob:')){

‎test/integration/next-image-legacy/default/test/index.test.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1057,13 +1057,17 @@ function runTests(mode) {
10571057
constwarnings=(awaitbrowser.log())
10581058
.map((log)=>log.message)
10591059
.filter((log)=>log.startsWith('Image with src'))
1060+
10601061
expect(warnings[0]).toMatch(
1061-
'Image with src "/test.png"has "sizes" property but itwill beignored.'
1062+
'Image with src "/test.png"is using next/legacy/image which is deprecated andwill beremoved in a future version of Next.js.'
10621063
)
10631064
expect(warnings[1]).toMatch(
1065+
'Image with src "/test.png" has "sizes" property but it will be ignored.'
1066+
)
1067+
expect(warnings[2]).toMatch(
10641068
'Image with src "/test.png" was detected as the Largest Contentful Paint (LCP).'
10651069
)
1066-
expect(warnings.length).toBe(2)
1070+
expect(warnings.length).toBe(3)
10671071
})
10681072
}else{
10691073
//server-only tests

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,9 @@ function runTests(mode: 'dev' | 'server') {
398398
expect(warnings).not.toMatch(
399399
/wasdetectedastheLargestContentfulPaint/gm
400400
)
401+
expect(warnings).not.toMatch(
402+
'using next/legacy/image which is deprecated and will be removed in a future version'
403+
)
401404
expect(warnings).not.toMatch(/Reactdoesnotrecognizethe(.+)prop/gm)
402405
}finally{
403406
if(browser){

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp