Head component not working #53529
-
SummaryI am using the export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<Head>
<title key="title">vg</title>
</Head>
<body className={inter.className}>{children}</body>
</html>
);
}but it is not working, when i open the browser the title is not there, I also inspect and saw that there is no title tag in the head tag in html. Can anyone please tell me how to make things work? Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 10 replies
-
|
Hi, The next/head component does not work in App Router. You can use the Head is only listed for It is nowhere to be found in App Router docs: 
|
Beta Was this translation helpful? Give feedback.
-
|
Hey, I am trying to use metadata in a page while using useState. Using Head component made me to get the data from the page in client and change it. However, using metadata only works when a page is server side rendered. Is there any workaround in this? Current migration experience is just awful. |
Beta Was this translation helpful? Give feedback.
-
|
Ho can I add a custom link in the head? Like a manifest.json link for a PWA? |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
@hskang9 you might want to check out https://nextjs.org/docs/app/api-reference/functions/generate-metadata |
Beta Was this translation helpful? Give feedback.
-
so my app has dynamic content and data is fetched from api and metadata are adjusted based on api result, so since we have two separate function for metadata and page content it means that to render both metatags and page content i should fetch api twice ??? |
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to insert |
Beta Was this translation helpful? Give feedback.
-
|
Found a way to do this: Just use metadata: import type {Metadata, Viewport} from "next"; I'm using it in my layout.tsx file :) |
Beta Was this translation helpful? Give feedback.
-
|
How can I add custom <style> tag in app router? |
Beta Was this translation helpful? Give feedback.
-
|
I have tried to create a head tag in my layout.tsx file and add there some custom properties. In theory it should also work wit style tags but I'm not sure to 100%. You could give it a try ... |
Beta Was this translation helpful? Give feedback.
Hi,
The next/head component does not work in App Router. You can use the
metadataobject instead.Head is only listed for
Pages Router:It is nowhere to be found in App Router docs: