head & meta
html 페이지는 크게 <head>와 <body> 부분으로 나눌 수 있다. 이 때 <head>에는 페이지 자체에 대한 설명을 담을 수 있다.
- head 태그의 자식 요소로 여러 meta 태그가 존재할 수 있다.
- 검색 엔진 크롤러는 meta 태그의 title, desctiption과 같은 정보를 수집한다.
- 따라서 SEO를 위해서는 head 태그를 제대로 구성해야 한다.
how to add <head>?
import Head from 'next/head'
import Layout from '../components/layout/layout'
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Head>
<title>Next.js Events App</title>
<meta name="description" content="find events whatever you want" />
</Head>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
- Head 태그는 jsx 코드 상에 위치하기만 하면 된다. 어디에 코드를 위치시켜야 하는지는 관계 없다.
- main page 뿐만 아니라, 모든 페이지 컴포넌트에서 Head 태그를 사용할 수 있다.
- jsx 문법을 이용해서 Head 컨텐츠를 dynamic value로 설정할 수 있다.
- 모든 페이지에 공통적으로 적용할 Head는 _app.js 파일에서 return 할 수 있다.
- next.js는 하나의 컴포넌트에 존재할 수 있는 여러 개의 Head를 하나로 병합하고, 이 과정에서 생길 수 있는 충돌도 해결해 준다.
_document.js로 html 전체 틀 구성하기
image(공식문서)
이미지 파일을 최적화 하지 않은 상태로 network 탭을 확인해 보자. 페이지를 hard refresh 하면, 이미지 파일의 size와 확장자가 원본과 같은 것을 확인할 수 있다. 이미지 size가 크면 사용자 경험을 저해할 수 있으며, 브라우저마다 지원하는 확장자가 다를 수 있기 때문에 이미지 파일을 최적화 할 필요가 있다.
+) hard refresh | 새로고침 버튼을 마우스 우클릭하면, 캐시를 지우고 hard refresh 할 수 있다.
next.js가 제공하는 image 모듈을 이용하면, 간편하게 이미지를 최적화할 수 있다.
- request가 발생하면, 요청한 사용자의 OS와 device 크기에 맞는 이미지를 반환한다.
- 인간이 구분할 수 없는 수준에서 원본 이미지의 quality를 낮추고, 파일 크기를 줄인다.
- 뿐만 아니라 사용자의 브라우저에 최적화된 확장자의 이미지를 반환한다.
- 이 때 반환하는 이미지를 cache에 저장하고, 비슷한 크기의 device에서 request가 발생했을 때 재사용 한다.
import Image from "next/image"
<Image src={url} alt={description} width={100} height={100}/>
- image 파일을 직접 import 하는 것이 아니라면, width와 height 속성을 전달해 주어야 한다. ⇒ 이 때 width와 height은 사용자의 브라우저에서 이미지를 fetch 할 때의 크기일 뿐이고, 최종적인 스타일링은 CSS에 의해 결정된다.
- 그 외에도 다양한 속성 살펴보기
'Study > Next' 카테고리의 다른 글
| API route (0) | 2022.10.20 |
|---|---|
| what is _document.js? (1) | 2022.10.18 |
| client side data fetching (0) | 2022.10.17 |
| pre-rendering (0) | 2022.10.14 |
| how useRouter works (0) | 2022.10.09 |
