next.js: [NEXT-811] [appDir] `next/image` with `priority` doesn't generate `` tag.

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 start

Under /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.

_NEXT-811

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 17
Comments: 17 (4 by maintainers)

Commits related to this issue

fix: add missing `<preload>` for `next/image` in App Router (#52425) - Depends on https://github.com/facebook/react/pull/27096 - Fixes #43134 - Closes NEXT-811 - Closes NEXT-846 — committed to vercel/next.js by styfle a year ago

Most upvoted comments

The latest Beta docs now include a section on Resource hints, and it looks like support for next/image should be added automatically for client components:

These methods are currently only supported in Client components. Next.js in-built features such as next/font, next/image and next/script automatically handle relevant resource hints.

However, when I updated to 13.3 I am not seeing these tags in the <head> of the document.

Should I create a separate repro for this? Or should we be setting these manually as shown in e.g. this comment?

steve-marmalade on Apr 14, 2023

@balazsorban44 , regarding:

Thanks, this is currently expected, as head handling is still a work in progress: https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features, which next/image relies on to push a preload tag to the DOM.

Has anything changed in this regard with all of the effort around head.js / metadata that went into 13.2 ?

steve-marmalade on Feb 23, 2023

Thanks, this is currently expected, as head handling is still a work in progress: https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features, which next/image relies on to push a preload tag to the DOM.

https://github.com/vercel/next.js/blob/21d7d224543f00d0bbc58a0ea7b457a3d2b7d884/packages/next/client/image.tsx#L893-L899

@transitive-bullshit, I could not reproduce it with pages/, are you sure you are using priority? If so, could you link to a reproduction, as that might actually be considered a bug.

balazsorban44 on Nov 21, 2022