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