how to set type of meta tag without type assertion?
Unanswered
Yellow-green Vireo posted this in #help-forum
Yellow-green VireoOP
I'm working on migration my project pages router to app router. I have some code like below
but got an error with "content"
Type 'string | TemplateString | null | undefined' is not assignable to type 'string | undefined'.
Type 'null' is not assignable to type 'string | undefined'.
It can be resolve with this type assertion.
is there another way to resolve it without using type assertion?
import type { Metadata } from 'next'
import Head from 'next/head'
(...)
const metadata: Metadata = {
title: 'A title',
description: 'A description',
}
(...)
<Head>
(...)
<meta name="description" content={metadata.description} key="description" />
<meta property="og:title" content={metadata.title} key="og_title" />
(...)
</Head>but got an error with "content"
Type 'string | TemplateString | null | undefined' is not assignable to type 'string | undefined'.
Type 'null' is not assignable to type 'string | undefined'.
It can be resolve with this type assertion.
<meta name="description" content={metadata.description as string} key="description" />
<meta property="og:title" content={metadata.title as string} key="og_title" />is there another way to resolve it without using type assertion?
1 Reply
@Yellow-green Vireo I'm working on migration my project pages router to app router. I have some code like below
import type { Metadata } from 'next'
import Head from 'next/head'
(...)
const metadata: Metadata = {
title: 'A title',
description: 'A description',
}
(...)
<Head>
(...)
<meta name="description" content={metadata.description} key="description" />
<meta property="og:title" content={metadata.title} key="og_title" />
(...)
</Head>
but got an error with "content"
Type 'string | TemplateString | null | undefined' is not assignable to type 'string | undefined'.
Type 'null' is not assignable to type 'string | undefined'.
It can be resolve with this type assertion.
<meta name="description" content={metadata.description as string} key="description" />
<meta property="og:title" content={metadata.title as string} key="og_title" />
is there another way to resolve it without using type assertion?
you only either use
metadata (app router) or Head (pages router). metadata doesn't work in the pages router and Head doesn't work in the app router