(Next.js) _app, _document, Image Optimization
NextJS• Next.js에서는 _appNext.js를 통해 html의 <head></head> 부분을 컴포넌트로 설정할 수 있으며, 이를 통해 각 페이지별로 다른 헤드를 적용하거나 모든 페이지에서 동일한 헤드를 적용할 수 있다.
• _document는 개발자가 전체적인 html 문서를 조작할 수 있도록 해주며, 만약 추가하지 않는다면 Next.js는 기본 _document를 사용하고, 만약 만들어놓는다면 그것을 따른다.
• Next.js는 모든 페이지를 Main 컴포넌트에 넣어 다른 요소들을 함께 사용할 수 있으며, 이미지를 자동으로 최적화시켜 브라우저에서 지원하는 가장 최적의 방식으로 변환하여 제공한다. 이를 통해 큰 이미지 파일이 웹사이트의 성능을 저하시키는 문제를 해결할 수 있다.
• Next.js의 이미지 최적화 기능을 사용하려면, 이미지 컴포넌트를 가져와서 이미지 태그 대신 사용하면 된다. 이렇게 하면 이미지의 크기가 크게 줄어들고, 304 코드를 통해 이미지가 자동으로 캐싱되어 계속 사용할 수 있다. 하지만, 이미지를 원하는대로 조정하기 위해서는 추가적인 CSS 설정이 필요하다.
북마크
공유하기
신고하기
devAnderson