document 파일에 title 태그를 넣으려고했는데 워닝이 발생했다
Warning: <title> should not be used in _document.js's <Head>. https://nextjs.org/docs/messages/no-document-title
공식문서 : No Title in Document Head
next/document에서 가져온Head구성 요소 내에<title>요소가 정의되었습니다.모든 페이지에 공통되는
<head>코드에만 사용해야 합니다.제목 태그는
next/head를 사용하여 페이지 수준에서 정의해야 합니다.
공식문서에서 next/document 에서 불러온 head 태그를 사용하게 될 경우에는
처음 프리랜더에서만 랜더링이 되므로 예기치 않은 결과가 발생할 수 있다고 한다
// pages/_app.js
import React from 'react'
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<title>My new cool app</title>
</Head>
<Component {...pageProps} />
</>
)
}
export default MyApptitle 태그는 위와같이 import 해온 뒤에 pages/_app.js 에서 주는 방식으로
오류를 고칠 수 있다고 공식문서에서 안내하고 있다
아래와 같이 수정해서 타이틀을 고정해주었다!
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools />
<ThemeProvider theme={theme}>
<RecoilRoot>
<Global styles={global} />
<Head>
<title>비어비워</title>
</Head>
{getLayout(<Component {...pageProps} />)}
</RecoilRoot>
</ThemeProvider>
</QueryClientProvider>추가내용
공식문서 : <title> should not be used in _document.js's <Head>
next.js Issues : https://github.com/vercel/next.js/issues/4596
