[NEXT-811] [appDir] next/image with priority doesn't generate <link rel="preload" ...> tag. #43134
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
Binaries:
Node: 18.10.0
npm: 8.19.2
Yarn: 1.22.19
pnpm: 7.13.0
Relevant packages:
next: 13.0.5-canary.2
eslint-config-next: 13.0.4
react: 18.2.0
react-dom: 18.2.0
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
When using pages directory, the <Image /> component from next/image with priority prop will generate a <link rel="preload" as="image" ... /> on the <head />. But this is not the case when using app directory.
I believe this is because, currently, the <link> tag is injected using next/head on a client component (reference). This doesn't work given the server component setup.
Expected Behavior
<link rel="preload" as="image" ... /> will also be generated for priority <Image /> when using app directory.
Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster
https://github.com/kvnang/next-image-preload
To Reproduce
git clone https://github.com/kvnang/next-image-preload
cd next-image-preload
npm run build && npm run startUnder /app/page.tsx, the <Image /> component with src vercel.svg has a priority prop set to true, and thus should produce <link rel="preload" /> tag. But it doesn't in this case.