A title element received an array with more than 1 element as children

moontag·2023년 2월 9일
1

에러

목록 보기
7/8

경고내용

  • title element에 1개 이상의 자식요소가 있다는 경고
    문자만 자식으로 가질 수 있다
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 the browser will display 
markup and comments as text in the title and hydration 
will likely fail and fall back to client rendering
at title
  • 수정 전 코드
import Head from 'next/head'

export default function Seo({ title }: { title: string }) {
  return (
    <Head>
      <title> {title} | xmunt blog</title>
    </Head>
  )
}

원인

문제되는 부분

<title> {title} | xmunt blog</title>

이부분이 React render에서는

<title> <!-- -->{title}<!-- --> | xmunt blog</title>

변수 앞뒤로 주석으로 되는데 주석은 HTML노드여서 하위노드로 간주된다
주석-글자-주석-글자 => 이런식으로 여러 개의 자식노드가 있는 셈이 되어버린다


해결

방법 1

import Head from 'next/head'

export default function Seo({ title }: { title: string }) {
  const titlemsg = `${title} | xmunt blog`
  return (
    <Head>
      <title>{titlemsg}</title>
    </Head>
  )
}

방법 2

import Head from 'next/head'

export default function Seo({ title }: { title: string }) {
  return (
    <Head>
      <title>{`${title} | xmunt blog`}</title>
    </Head>
  )
}

참고 - https://github.com/vercel/next.js/discussions/38256

profile
터벅터벅 나의 개발 일상

0개의 댓글