Next.js에 embed link
적용하는 법입니다.
보통은 index.html 파일에 <link> 태그 안에 cdn 코드를 적용하여 폰트 또는 폰트 어썸의 아이콘 등을 삽입하는데,
Next.js 는 index.html 파일이 없습니다.
Next.js의 기본 구조를 확인하여, cdn 설치하는 방법을 알아보겠습니다.
Next.js 폴더 기본 구조
pages/ // HTML, Container, router를 이용하는 페이지 삽입
_document.js // HTML document
_app.js // container 공통으로 적용되는 레이아웃, dependency 설치, react의 app.js
_error.js // Error 페이지
index.js // Root 페이지 '/'의 path를 가진 페이지
hello.js // '/hello'의 path를 가진 페이지
static/ // 정적 파일 (이미지, 파일 등)을 업로드 한다.
next.config.js // Next.js의 환경 설정. 라우팅, typescript, less 등의 webpack 플러그인을 설정
_document.js
- _document.js는 Next.js에서 index.html이라고 생각하면 됩니다.
- 공식 문서의 의하면, Custom document를 만들때만 사용하고, 생략된 경우는 Next.js 가 기본 값을 사용합니다.
- _document를 이용하여 head, body 태그를 추가하는데 사용할 수 있습니다.
next.js 공식문서 : _document.js
https://nextjs.org/docs/advanced-features/custom-document
Advanced Features: Custom `Document` | Next.js
Extend the default document markup added by Next.js.
nextjs.org
pages > _document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
css
html,
body {
padding: 0;
margin: 0;
font-family: 'Noto Sans', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
}구글 폰트 적용하는 방법은 아래의 포스트를 확인해주세요.
https://goddino.tistory.com/173
[css] 구글 폰트 사용법 (ft. google fonts, 무료 웹폰트 적용)
웹사이트 구글 폰트 적용법을 알아보겠습니다. 구글 폰트 사이트 이동 구글에서 google fonts 또는 구글 폰트를 검색하여, 해당 사이트로 이동합니다. 원하는 폰트 선택 여기서 사용할 폰트와 폰트
goddino.tistory.com
반응형
'개발 > React' 카테고리의 다른 글
| [react] Input elements should have autocomplete attributes (suggested: "current-password") 오류 (0) | 2021.12.01 |
|---|---|
| [react] [DOM] Input elements should have autocomplete attributes (suggested: "current-password") 오류 해결 (0) | 2021.11.23 |
| [react] react hooks로 form 구현 (ft. input이 많을 때) (0) | 2021.10.17 |
| [react] redux, thunk 대화형 챗봇 코드 샘플 (0) | 2021.10.06 |
| [reast] react-toastify 사용법 (0) | 2021.10.05 |
댓글