Hi there ðŸ‘‹ ,For a project I have created a custom Image component, which I want to preload the data through the head when a certain prop is set. In the pages-implementation of Next I could use to set this link in the head of the document through the component - however, I don't see a way to do this using the app directory - since is not supported there. How would I go about this, if at all?

Appending to Head using a component?

Answered

Atlantic salmon posted this in #help-forum

Atlantic salmonOP

2023-12-21T12:15:54.000Z

Hi there ðŸ‘‹ ,

For a project I have created a custom Image component, which I want to preload the data through the head when a certain prop is set. In the pages-implementation of Next I could use <Head> to set this link in the head of the document through the component - however, I don't see a way to do this using the app directory - since <Head> is not supported there.

How would I go about this, if at all?

Answered by Ray

you need to do this
ReactDOM.preload(href: string, options: { as: string })

View full answer

3 Replies

@Atlantic salmon Hi there ðŸ‘‹ , For a project I have created a custom Image component, which I want to preload the data through the head when a certain prop is set. In the pages-implementation of Next I could use `<Head>` to set this link in the head of the document through the component - however, I don't see a way to do this using the app directory - since `<Head>` is not supported there. How would I go about this, if at all?

Ray

2023-12-21T12:28:44.000Z

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload

Ray

2023-12-21T12:28:57.000Z

you need to do this
ReactDOM.preload(href: string, options: { as: string })

Answer

Atlantic salmonOP

2023-12-21T14:20:21.000Z

Thanks, that's the solution I was looking for!