NextJS 앱 최적화하기
각 페이지에 메타데이터와 <head> 데이터를 추가할 수 있다.
사용자 경험 면에서도, 검색 엔진을 위해서도 메타데이터를 추가해주어야 한다.
페이지에서 <head> 태그 사이에 콘텐츠를 추가하고 싶다면 next/head에서 Head라는 컴포넌트를 임포트한 후, 다음과 같이 사용하면 된다.
import Head from "next/head";
import { getFeaturedEvents } from "../helpers/api-util";
const HomePage = (props) => {
return (
<div>
<Head>
<title>NextJS Events</title>
<meta
name="description"
content="Find a lot of great events that allow you to evolve..."
/>
</Head>
<EventList items={props.events} />
</div>
);
};
export async function getStaticProps(context) {
const featuredEvents = await getFeaturedEvents();
return {
props: {
events: featuredEvents,
},
};
}
export default HomePage;
모든 페이지들에 공통적으로 위 데이터를 넣고 싶다면 _app.js 파일에서 처리해주면 된다.
만약 _app.js와 특정 페이지에 둘 다 설정해주었다면 Next.js는 알아서 둘을 병합해서 나타낸다.
_app.js 파일 말고도 pages > _document.js 파일에 다음과 같이 작성해볼 수도 있다.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<div id="overlays" />
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Image 컴포넌트
Next.js에서 이미지를 최적화하려면, img 태그 대신 next/image의 Image 컴포넌트를 사용하면 된다.
import Image from "next/image";
<Image src={'/' + image} alt={title} width={340} height={160} />
이 컴포넌트를 사용하면 Next.js에서 여러 버전의 이미지를 요청이 들어올 때마다 바로바로 생성해주는데 각 운영 체제와 장치 크기에 최적화되도록 한다.
이 이미지들은 캐시에 저장돼서 유사한 장치에서 요청이 들어올 때 사용할 수 있게 된다.
그냥 img 태그의 src, alt 속성을 그대로 놔두고, img 대신 Image 태그를 사용하면 된다.
추가적으로 width, height 속성을 추가해줘야 하는데, 이는 원본 이미지 크기가 아니라 페이지에 표시하고자 하는 크기를 말하는 것이다.
그리고 이미지는 기본적으로 지연 로딩된다.
보이지 않는 상태에서는 Next.js는 이미지를 다운로드하지 않는다.
배우면서 나는 이 Image 컴포넌트 기능이 가장 신기했다.
웹 성능 최적화도 배워봤는데, 그때 이미지 지연 로딩, 조금 더 용량을 줄이기 위해서 확장자를 jpg,png에서 webp로 변경해봤던 경험이 있었다.
그런데 Image 컴포넌트를 사용하면 그 기능들이 자동으로 적용된다고 해서 왜 Next.js를 써야 하는지 한 번 더 알게 된 것 같다.
참고 자료
'Frontend > Next.js' 카테고리의 다른 글
| Next.js를 배워보자-3 (0) | 2023.07.31 |
|---|---|
| Next.js를 배워보자-2 (0) | 2023.07.31 |
| Next.js를 배워보자-1 (0) | 2023.07.31 |
