The documentation for using appDir on Next.js 13.4 states the following:
Step 3: Migrating next/head
In the pages directory, the next/head React component is used to manage HTML elements such as title and meta. In the app directory, next/head is replaced with the new built-in SEO support.
But the next/head component was able to add non-SEO tags too. In particular, I want to add <link rel="..."> tags. How does one accomplish this if the metadata mechanism doesn't seem to support link tags (just custom <meta> tags)?
I can't add the tags directly to the root layout because there are tags that are only supposed to live on the website home page. I could conditionally add the tags to the root layout if the layout was aware of the current route but it doesn't seem to work with SSG.
I think the document covered how to add <link rel="..."> tags, you just need to follow their predefined way.
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#manifest https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons
// in your app/page.tsx export metadata
export const metadata = {
manifest: 'https://nextjs.org/manifest.json',
icons: {
icon: '/icon.png',
shortcut: '/shortcut-icon.png',
apple: '/apple-icon.png',
other: {
rel: 'apple-touch-icon-precomposed',
url: '/apple-touch-icon-precomposed.png',
},
},
};
export default function Page() {
... // your code here
}
<link rel="manifest" href="https://nextjs.org/manifest.json" />
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
rel="apple-touch-icon-precomposed"
href="/apple-touch-icon-precomposed.png"
/>
verified with next@13.4.1