(1) Layout Pattern
Layout pattern은 많은 사람들이 NextJS를 이용할 때 따르는 아주 흔한 패턴이다.
이는 custom app component를 사용할 때 쓰이는 패턴으로 _app.js 파일이 커지도록 하는 것을 방지하기 위해 레이아웃 파일을 따로 만들어 _app.js에 넣는 것이다
사용법
먼저 Layout.js라는 react component를 만들고 children prop을 넣어준다
children이란 react.js가 제공하는 prop으로 하나의 component를 또 다른 component 안에 넣을 때 쓸 수 있다
그리고 _app.js 를 <Component {...pageProps}/>을 <Layout>으로 감싸준다.
./components/Layout.js
import Layout from "../components/Layout";
import "../styles/globals.css"
export default function App({Component, pageProps}) {
return (
<Layout>
<Component {...pageProps}/>
</Layout>
);
}
./pages/_app.js
import NavBar from "./NavBar";
export default function Layout({children}) {
return (
<>
<NavBar />
<div>
{children}
</div>
</>
)
}
결과적으로 Layout은 children을 아래와 같이 나타낸다
(2) Head Component
위를 수정하기 위해서는 NextJS에서 제공하는 head component를 사용하면 된다
다음과 같이 component를 생성하고 페이지마다 이를 import 하면 된다
components/Seo.js
import Head from "next/head";
export default function Seo({ title }) {
return (
<Head>
<title>{title} | Next Movies</title>
</Head>
);
}
pages/about.js
import Seo from "../components/Seo";
export default function About() {
return (
<div>
<Seo title="About" />
<h1>About Us</h1>
</div>
)
}
결과