Head / _app
Next.js는 html에서 부분을 컴포넌트를 통해 설정할 수 있다
이때 헤드부분에는 일반적인 html의 헤드에 들어갈 수 있는 부분이 다 들어올 수 있다.
Next.js는 우선적으로 app을 확인하기때문에, 만약 index인 메인페이지에 헤드 컴포넌트를 설정하면 그것은 첫 페이지에 해당 헤드를 적용하고 싶다는 의미가 된다.
만약, 페이지별로 다른 헤드를 적용하고 싶다면 각 페이지의 컴포넌트에 동일하게 삽입이 가능하다.
예를들어
이처럼 변동성있는 title을 설정할 수 있다.
모든 페이지에서 동일한 헤드가 적용되게 하고 싶다면, _app 파일에 적용하면된다
이렇게 하면, 베이스 head는 app에 적용되어 있는 것이지만, 각각의 페이지에 따로 헤드가 적용되어 있다면 해당 헤드를 따르게 된다.
_document
_app이 마치 react-router-dom의 route와 같은 역할을 하고 있었다면 (즉, 에플리케이션에서 어떤 컴포넌트를 보여줄지 결정했다면)
_document는 개발자에게 전체적인 html 문서를 조작할 수 있도록 만든다.
만약 추가하지 않는다면, Next.js는 기본 _document 를 사용하지만 만약 만들어놓는다면 그것을 따른다
보는 것처럼, Html을 Next.js 컴포넌트들로 표현해둔 내용인것을 확인할 수 있다.
NOTE. 여기서 보이는 Head와, 아까 전에 페이지 파일에서 사용했던 "next/head" 의 Header은 서로 다르다.
_document에 있는 Head는 그냥 html에서 head 태그를 설정해야된다고 알려주는 역할만 하고있다.
물론, 이 document가 html 문서의 일반적인 형태를 표현하기 때문에, 모든 Next.js 의 페이지가 들어가는 Main 컴포넌트의 외곽에 다른 요소들을 집어넣을 수 있다.
Img optimization
next.js의 가장 놀라운 점은, 이미지를 자동으로 최적화시켜서 가져와준다는 점이다.
이게 무슨 뜻이냐면, 예를들어 2mb의 커다란 jpeg 이미지를 해당 브라우저에서 지원하는 가장 최적의 방식으로 변환하여 제공해준다는 점이다.
말도 안되겠지만 진짜 가능하다.
만약 이것을 직접 구현하려면, 이미지를 따로 여러개 만들어놓고 media로 조건부로 이미지를 임포트하거나 해야 했겠지만, next.js는 그런 번거로운 방식을 저멀리 보내버린다.
위에는 최적화 전 이미지 파일의 크기이다. 하나당 1.5mb 이상인 파일들은 나중에 배포 환경에서 충분한 문제가 된다
Next.js는 이를 아주 손쉬운 방법으로 해결해준다.
위처럼 이미지 컴포넌트를 가져오고
위처럼 이미지 태그를 대신해서 사용하면 된다.
프로퍼티의 width와 height은 기본 이미지 크기로, 이것은 css로 얼마든지 변경 가능하다.
이렇게 해놓고 저장을 하면 어떻게 될까
새로 브라우저로 들어가보면 이제 네트워크로 들어오는 이미지의 크기는 webp 확장자에 230B인것을 볼 수 있다.
이것은 정말로 엄청난 차이이다. 또한 304 코드를 통해 이 내용이 자동 캐싱되고, 이것을 계속 사용하게 됨을 볼 수 있다.
단, 살짝 아쉬운 점이 있다면 이 내용물이 컴포넌트고, 강제로 span에 img 태그를 담아서 넣는 형태로 되어있어서
이미지를 원하는대로 조정하기 위해서는
이렇게 이미지를 감싸는 래퍼를 만들어주고, 자식의 span css를 건들여주는 방법이 있다.
