Next.js Discord

Discord Forum

next/head does not work, but normal head does (kinda)

Answered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
With normal head I can set everything, but when I set predefined stuff such as viewport, charset, then its duplicated. And when I use Head from next/head, nothing is being added to the head.
I will provide screenshots bellow, the one with lot of meta tags is using normal head, and the other is using Head from next/head.

18 Replies

Alligator mississippiensisOP
Oh, yes.
The recommended way is to use metadata to add to <head> https://nextjs.org/docs/app/building-your-application/optimizing/metadata
Alligator mississippiensisOP
Okay, thanks. So I can change any meta tags such as vieport etc..?
You can see the way to set almost any meta tags you can think of in that page
Alligator mississippiensisOP
Okay, thanks.
Alligator mississippiensisOP
I am not sure if I am using metadat wrong, but it is still not being set:
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'WIPE Dashboard',
  description: 'WIPE Dashboard',
  viewport: {
    width: 'device-width',
    height: "device-height",
    initialScale: 1,
    maximumScale: 1,
    minimumScale: 1,
    viewportFit: "cover"
  },
}
Alligator mississippiensisOP
For me it doesnt
show me a reproduction repo
Alligator mississippiensisOP
Well when I create a new project it works, I am trying to firgure out whats causing the issue, but currentl I have no clue.
Alligator mississippiensisOP
Could it be that I am using "use client" inmy layout?
@Alligator mississippiensis Could it be that I am using "use client" inmy layout?
yes. metadata and generateMetadata are only supported in server components
Answer
Alligator mississippiensisOP
Oh, thanks. I will try to remove it and see.
Alligator mississippiensisOP
Now it works, thank you!