MENU


HTML head (Unsupported Fields)

Some metadata types do not have built-in support, but they can still be rendered in the layout or page itself.

<meta http-equiv="...">
Use appropriate HTTP Headers via redirect(), Middleware, or Security Headers.
<base>
<noscript>
Render the tags in the layout or page itself.
<style>
<link rel="stylesheet" />
(see CSS Enhancements)
<script>
(see HTML Enhancements)
<link rel="preload />
<link rel="preconnect" />
<link rel="dns-prefetch" />
Use ReactDOM methods. 

'use client'
 
import ReactDOM from 'react-dom'
 
export function PreloadResources() {
  ReactDOM.preload('/logo.png', { as: 'image' })
  ReactDOM.preconnect('https://example.com', { crossOrigin: '...' })
  ReactDOM.prefetchDNS('/about')
 
  return '...'
}

<link rel="preload" href="..." as="..." />
<link rel="preconnect" href="..." crossorigin />
<link rel="dns-prefetch" href="..." />

These methods are currently supported only in Client Components, which are still server-side rendered during the initial page load. Next.js built-in features, such as next/font, next/image, and next/script, automatically manage the appropriate resource hints.