Register HTML in app router

Question

I'm trying to register some html in the <head> and I've fallen down a bit of a rabbit hole

<link
  rel="preload"
  as="image"
  imagesrcset="..."
  fetchPriority="high"
  media="(min-width: 640px)"
/>

I'm new to Next, apparently this was possible in the pages router using <Head> but this isn't available in the app router.

The docs say to use the new metadata API instead, but it doesn't support resource hints so it says to use ReactDOM.preload() instead: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#resource-hints

However, ReactDOM.preload() doesn't support the media attribute ðŸ˜©

I need that as I'm using <picture> with different <source>'s for each breakpoint, is there no way to register arbitrary html in the <head> ?

Register <head> HTML in app router

0 Replies