_document
next.js 로 프로젝트를 만들면 html 파일이 없습니다.
이 때, _document 파일을 사용해서 페이지를 렌더링하는 데 사용되는 html을 변경할 수 있습니다. 이 파일은 서버에서만 랜더링 되기 때문에, onClick 과 같은 이벤트 핸들러는 사용할 수 없습니다.
예를 들어서 구글 폰트를 다음과 같이 불러 올 수있습니다.
import Document, { Head, Html, Main, NextScript } from "next/document";
class CustomDocument extends Document {
render(): JSX.Element {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Roboto&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default CustomDocument;Script Component
Kakao 로그인이나, 외부 sdk를 로드하고 싶은 경우에 어떻게 하는지 알아보겠습니다.
첫번째 방법은 그냥 sdk를 복사해서 _app 파일에 넣으면 됩니다.
Next.js 에서는 sdk 최적화를 위해서 Script 태그를 지원합니다.
import Script from 'next/script'
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />대부분의 sdk는 먼저 로딩될 필요가 없습니다.
예를들어 카카오 로그인같은 경우, 카카오로그인을 누르기 전까지는. sdk가 필요없습니다.
Script 의 strategy 에는 3가지 옵션이 있습니다.
1.beforeInteractive: 페이지가 로딩 되기 전에 로드
2.afterInteractive: (기본값) 페이지가 로딩 된 후에 로드
3.lazyOnload: 다른 모든 데이터나 소스를 불러온 후에 로드
프론트엔드 개발자 입니다