728x90
반응형
<Head>
각 페이지별로 타이틀, 파비콘, 오픈그래프 속성, 메타데이터, 스크립트 등등 정의할 수 있다
각 페이지의 SEO(검색 엔진 최적화) 최적화
페이지 전체에 공통으로 적용하고 싶으면 _app.js에 Head 컴포넌트 적용
_app.js
<>
<Head>
<title>메인페이지</title>
<link rel="icon" href="/favicon2.ico" />
<style></style>
</Head>
</>
각 페이지 별로 Head 컴포넌트 적용하고 title 변경해주면 페이지 변경할 때 페이지 이름이 변경된다
메타데이터와 외부 리소스 설정 & 연결
import Head from 'next/head';
function HomePage() {
return (
<>
<Head>
<title>Home Page</title>
<meta name="description" content="This is the home page" />
<link rel="stylesheet" href="https://example.com/styles.css" />
<script src="https://example.com/script.js" />
</Head>
{/* 페이지 내용 */}
</>
);
}
폰트 적용
기존에 자바스크립트나 리액트, css에서 적용한 방법대로도 가능
<link>나 @import
구글폰트 적용방법
Next.js는 구글 폰트 기능을 제공함
_app.js 에 적용하기
import { Noto_Sans_KR } from '@next/font/google';
const notoSansKR = Noto_Sans_KR({
weight: ['400', '700'], //문자열로 넣기
subsets: [], // 한글인지 영문인지
style:'nomal', //'normal', 'italic 생략해도됨
});
Noto Sans Kr 폰트를 가져왔고
weight는 폰트 굵기이다.(숫자가 아닌 문자열 형태로 적어야한다)
subsets는 영문이나 한글 등 사용할 글자들만 골라서 사용할 때 씀
( ex) 영문만 사용할거면 ['latin'] 같이 써주면된다)
notoSansKR 객체의 className 프로퍼티로도 사용 가능
<div className={notoSansKr.className}>
</div>
Head 컴포넌트를 사용햐여 전역으로 전달도 가능
<Head>
<style>{`
html {
font-family: ${notoSansKR.style.fontFamily}, sans-serif;
}
`}</style>
</Head>
728x90
반응형
'Next.js' 카테고리의 다른 글
| [next.js]프리렌더링(정적생성, 서버사이드렌더링(SSR)) (0) | 2023.12.05 |
|---|---|
| [next.js] Image컴포넌트 (0) | 2023.12.04 |
| [next.js] useContext(다크모드) (0) | 2023.12.04 |
| [next.js] 리다이렉트(redirects), 커스텀 404 페이지 (0) | 2023.12.04 |
| [next.js] useRouter hook (0) | 2023.12.01 |
댓글