Creating a component to wrap every page with the hope of receiving children and title for each page is throwing error. "Title element received an array with more than 1 element as children."
import Head from "next/head";
interface IProps {
children: JSX.Element;
title?: string;
restProps?: any;
}
export default function MetaDataContainer(props: IProps) {
const {
children,
title = "Generated by create next app",
...restProps
} = props;
return (
<>
<Head>
<title>CV-stack - {title}</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>{children}</main>
</>
);
}
Creating a component to wrap every page with the hope of receiving children and title for each page is throwing error. "Title element received an array with more than 1 element as children."
import Head from "next/head";
interface IProps {
children: JSX.Element;
title?: string;
restProps?: any;
}
export default function MetaDataContainer(props: IProps) {
const {
children,
title = "Generated by create next app",
...restProps
} = props;
return (
<>
<Head>
<title>CV-stack - {title}</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>{children}</main>
</>
);
}
4 Answers
Reset to default 20You need to provide an object like so
<title>{`CV-stack - ${title}`}</title>
Because of the reasons explained in this comment (react dom string rendering) https://github.com/vercel/next.js/discussions/38256
I saw a solution online on this link.
Below is the sample code that works:
import Head from "next/head";
interface IProps {
children: JSX.Element;
title?: string;
restProps?: any;
}
export default function MetaDataContainer(props: IProps) {
const {
children,
title = "Generated by create next app",
...restProps
} = props;
return (
<>
<Head>
<title>{`CV-stack - ${title}`}</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>{children}</main>
</>
);
}Notice that the title is now a single node with {CV-stack - ${title}} instead of CV-stack - {title}
if your pulling it from your .env file, then you should use it like this:
const website_title = process.env.NEXT_PUBLIC_WEBSITE_TITLE;
<Head>
<title>{`${website_title}`}</title>
<link rel="icon" href={process.env.NEXT_PUBLIC_WEBSITE_FAVICON} />
<meta
name="description"
content={process.env.NEXT_PUBLIC_WEBSITE_META}
/>
</Head>
Just convert the {title} to a string literal and that will do it. You can't use {title} in metatags that way because it renders it as an object before converting it to a string.
<title>{`${title}`}</title>