Frontend/Next
[NextJS] NextJS 시작하기 - 4. 영화 앱 구조 잡기 & SEO
반응형
1. Patterns
NextJS 프로젝트를 만들 때 주로 따르는 패턴을 알아보자.
사람들은 대체로 너무 큰 _app.js 파일을 원하지 않는다. (왜?? 일단 그렇다고 한다.)
따라서 아래와 같이 Layout 컴포넌트를 만들어 사용한다.
(보면 볼수록 gatsby와 비슷하다. 다만, _app.js의 존재로 Layout을 각 페이지마다 직접 넣어주지 않아도 된다는 점이 next의 특징인듯)
components/Layout.js
import NavBar from './NavBar';
export default function Layout({ children }) {
return (
<>
<NavBar />
<div>{children}</div>
</>
);
}
pages/_app.js
import Layout from '../components/Layout';
import '../styles/globals.css';
export default function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
즉, 사용자가 브라우저를 통해 들어오면 Next는 _app.js 파일을 보고, Layout 컴포넌트와 props로 들어온 Component를 랜더링시킨다. Layout을 각 페이지마다 넣어주지 않아도 _app.js에서 랜더링해주기 때문에 복붙을 안해도 된다!
2. SEO
SEO를 위해 head 태그의 타이틀을 설정해야 한다.
Next에는 head 컴포넌트(?)가 이미 준비되어 있으므로 그냥 가져다 쓰면 된다.
components/Seo.js
import Head from 'next/head';
export default function Seo({ title }) {
return (
<Head>
<title>{title} | Next Movies</title>
</Head>
);
}
pages/index.js
import Seo from '../components/Seo';
export default function Hello() {
return (
<div>
<Seo title='Home' />
<h1>Hello</h1>
</div>
);
}
타이틀이 바뀐 것을 볼 수 있다!
반응형
