📍 Layout
너무 큰 _app.js 파일은 좋지 않아서 레이아웃과 관련된 부분은 Layout 컴포넌트로 따로 분리한다.
대중적으로 사용하는 패턴
- /components 에
Layout.js파일을 생성한다. - Layout 컴포넌트에 { children } 을 매개변수로 지정한다.
- Layout 컴포넌트의 코드 예시는 아래와 같다.
_app.js에서 Layout 컴포넌트를 아래와 같이 사용한다.
📍 Head 컴포넌트
NextJS에서 제공하는 Head 컴포넌트를 사용한다. Head 컴포넌트 안의 내용이 html의 head구간에 보여진다.
예를 들어 title을 사용하면 아래와 같다.
- NextJS는 자주 사용되는 기능들을 제공되는 작은 패키지들로 구현할 수 있다는 장점이 있다.
- 작은 패키지들이 여러 라이브러리가 아닌 NextJS 하나의 프레임워크에서 사용 할 수 있다는 것이 호환성 등 오류의 가능성을 줄인다.
📍 SEO
Search Engine Optimization의 약자로 웹에 올리는 컨텐츠가 구글, 네이버, 다음 같은 검색 엔진으로부터 제대로 인식이 될 수 있도록 최적화를 하는 작업이다. 최적화 방법에는 양질의 콘텐츠를 제공하거나, 접근성이나 성능적으로 뛰어난 웹을 개발하는 방법 등이 있지만 가장 기본적인 방법으로는 해당 페이지에 적합한 메타태그 를 삽입해서 크롤러가 웹을 잘 분석해서 인덱싱 하는데 도움을 주는 방법이 있다.
구글에서는 최대한 많은 페이지가 인덱싱 되는 것이 검색엔진 최적화에 도움이 된다고 언급했기 때문에 각 페이지마다 해당 페이지의 용도를 잘 설명해주는 메타태그를 삽입해 주는 것이 좋다.
NextJS의 Head 컴포넌트를 사용하면 쉽게 메타태그를 삽입할 수 있다.
위의 내용은 페이지의 소스를 보면 head태그 안에 위치한다.
index.js 파일에 Head 직접 사용할 수도 있지만. /component 폴더에 Head태그와 내용을 관리하는 컴포넌트를 따로 만들어서 효율적으로 관리할 수 도 있다. 이는 중복코드 작성을 방지할 수도 있다.
예를 들어 /components/SEO.js 컴포넌트를 생성하고 index.js 에서 SEO 컴포넌트의 prop으로 title 을 받는다
title 외에 더 많은 prop을 받아서 SEO를 변경 할 수 있다.
