Update legacy prop "layout"
pythoninthegrass opened this issue · 1 comments
pythoninthegrass commented
Next complains about the layout
property that changed in Next.js 13 (cf. https://github.com/techlahoma/thunderplains-2023/blob/main/app/page.tsx#L217).
Error
λ npm run dev
Debugger attached.
> dev
> next dev
Debugger attached.
Debugger attached.
Debugger attached.
Waiting for the debugger to disconnect...
▲ Next.js 13.5.3
- Local: http://localhost:3000
✓ Ready in 2.7s
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
✓ Compiled /page in 1203ms (496 modules)
Image with src "/_next/static/media/schedule_bg-img.888b1bab.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Easy fix
<Image src={scheduleBG} alt="ThunderPlains Badge" layout="fill" />
becomes
<Image src={scheduleBG} alt="ThunderPlains Badge" fill />
Opening a PR now.
pythoninthegrass commented
FWIW running npx @next/codemod next-image-to-legacy-image .
also finds two other issues with page.tsx
and LayoutNavbar.tsx
, respectively.
Not sure if it matters, but the only automated static changes are on the imports changing 'next/image'
to "next/legacy/image"
; not seeing any errors locally after the fill
prop has been updated ¯\_(ツ)_/¯