Warning: A title element received an array with more than 1 element as children… in Next.js

2022.11.17

Next.js title 요소가 여러 자식 노드를 받는 경고의 원인과 해결을 다룬 기록.

Frontend, Next.js, JavaScript, TypeScript, React

<title> 요소가 두 개 이상의 요소를 받았으며, 브라우저에서 <title> 요소는 자식 노드로, 오직 텍스트 노드만을 가질 수 있다는 뜻이다.

Next.js의 <Head> 컴포넌트로 <title> 요소를 지정하다가 위의 에러를 마주쳤다.

<Head>
    <title>{title} - Market</title>
</Head>

문제가 된 코드는 위와 같다.

{title} - Market처럼 쓰게 된다면, 텍스트와 주석이 섞인 것으로 인식하기 때문에, 리액트에서 렌더링되면서 위의 코드가 두 개 이상의 텍스트 노드로 인식된 것으로 보인다.

그러므로 오직 하나의 텍스트 노드로 인식될 수 있게끔 확장 템플릿 문자열을 이용해 아래와 같이 변경했다.

<Head>
    <title>`{${title} - Market}`</title>
</Head>

아래의 출처에서 자세한 원인과 이유를 찾을 수 있었다.

원문: Medium