[에러 해결] Title element received an array with more than 1 element as children.

tags

⚠️ error

summary

type

Post

<title> 태그가 하나의 텍스트 노드만 받을 수 있기 때문에 발생하는 에러이다.

에러 발생 코드

import Head from 'next/head';

export default function Seo({ title }) {
  return (
    <Head>
      <title>{title} | Next Movie App</title>
    </Head>
  );
}

수정 코드

import Head from 'next/head';

export default function Seo({ title }) {
  return (
    <Head>
      <title>{`${title}`} | Next Movie App</title>
    </Head>
  );
}

⇒ 템플릿 문자열로 감싸서 텍스트로 만들어 사용한다.

참고

[Fix Next.js] Solve "Title element received an array with more than 1 element as children." easily - ModTheFuture

Next.js Title Warning Problem You’ve got this error when updating your project in Next.js using React: Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate ... Read more

https://modthefuture.com/fix-next-js-title-element-received-warning-react/