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.
2
Answers
What about file based metadata?
You MUST add a
global.css
file in app folder, … ad import it inside your layout. This is working for me.Trying Next 13 for the first time right now too, and in the default
layout.tsx
file, I placed my link tags like so:and my link tags show up correctly in the browser. This also seems to work correctly with the exported metadata object, so I left the rest of the metadata tags in the new recommended format.