Layout 패턴
- 대중적으로 사용하는 패턴
/components에Layout.js파일을 생성한다Layout컴포넌트에{ children }을 매개변수로 지정한다.Layout컴포넌트의 코드 예시는 아래와 같다
// /components/Layout.js
import NavBar from "./NavBar";
export default function Layout({ children }) {
return (
<>
<NavBar />
<div>{children}</div>
</>
);
}_app.js에서Layout컴포넌트를 아래와 같이 사용한다.
// /pages/_app.js
import Layout from "../components/Layout";
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
return (
<>
<Layout>
<Component {...pageProps} />
</Layout>
</>
);
}Layout 패턴을 사용하는 이유
- 너무 큰
_app.js파일을 원하지 않아서 레이아웃 관련 부분은Layout컴포넌트로 분리한다._app.js에는 레이아웃을 제외해도 추가될 것들이 많다.
웹사이트 head 부분 생성 (HTML head 부분)
index.js에 작성한다.
- NextJS 에서 제공하는
Head컴포넌트를 사용한다.import Head from "next/head";- 아주 흔하게 쓰이는 기능들을 제공되는 작은 패키지들로 구현할 수 있는 것이 NextJS 의 아주 큰 장점이다.
- 작은 패키지들이 여러 라이브러리가 아닌 NextJS 한 곳에서 오는 것이 호환성 등의 오류 가능성을 줄여줌.
- 예를 들어 React 에서는 아주 흔하게 쓰이는 기능들을 구현하기 위해서 각각 다른 라이브러리들을 사용하게 되는데 그럴 경우 오류의 가능성이 늘어남.
index.js파일 컴포넌트 Fragment(<></>) 안에<Head>컴포넌트를 위치시킵니다.<Head>컴포넌트 안에 들어가는 모든 것들이 우리의 html 의 head 안에 보여진다.- 예시 코드
// /pages/index.js
import Head from "next/head";
export default function Home() {
return (
<>
<Head>
<title>Home | Next Movie</title>
</Head>
<h1>Hello World!</h1>
</>
);
}
Seo 컴포넌트 생성
- 위에서
index.js파일에<Head>태그를 작성하면 우리는 모든 페이지에<Head>태그와 내용을 수동으로 작성해줘야 한다.- 비효율적인 방법
- 따라서
/components폴더에<Head>태그와 head 내용을 관리하는 컴포넌트를 만들어 관리한다.- 효율적인 방법, 중복 코드 작성 방지
/components/Seo.js생성하고Seo컴포넌트의 prop 으로title을 받는다titleprop 외에 더 많은 prop 을 넣어서 SEO(head) 컴포넌트를 개인화 할수 있다.- 태그, Meta Description, 작성자 정보 등
- 코드 예시
// /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 Home() {
return (
<>
<Seo title="Home" />
<h1>Hello World!</h1>
</>
);
}- 작동 예시
참조
노마드코더 NextJS 시작하기
Aim for the TOP, Developer