반응형

Next.js에서 _app.js는 global로 import 할 것들이 많고 Google Analytics 등 스크립트를 사용하는 경우가 많다. 

그렇기 때문에 React 컴포넌트까지 _app.js에 모두 작성하게 되면 너무 커지게 된다. 

 

즉, Next.js는 _app.js를 필요 이상으로 크게 만드는 것을 좋아하지 않는다. 

 

그렇기 때문에 React 컴포넌트 부분을 따로 Layout으로 빼는 것을 Layout Pattern이라고 한다. 

 

Layout Pattern 

앞서 말한 것처럼 React 컴포넌트를 분리해서 사용하기 위한 패턴이다. 

import NavBar from "../components/NavBar";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
}

NavBar 같은 부분을 말한다. 

 

이것을 따로 Layout으로 분리시켜서 _app.js에 적용한다. 

import NavBar from "./NavBar";

export default function Layout({ children }) {
  <>
    <NavBar />
    <div>{children}</div>
  </>;
}

Layout 컴포넌트를 만들어서 안에 NavBar를 넣어주고 children을 같이 출력해주었다. 

 

import Layout from "../components/Layout";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

그 후 _app.js에서 NavBar를 지우고 Layout을 호출하였다. 

이렇게 작업하면 후에 NavBar 말고 하단 정보나, 배너 같이 모든 페이지에 사용되는 부분 역시 Layout에 추가를 해서 

_app.js를 줄여준다. 

 

Head 

React에서 Head를 변경하기 위해서는 Helmet 같은 외부 패키지를 사용해서 변경해야 했다. 

하지만, Next.js는 기능을 제공해주고 있다. 

import Head from "next/head";

export default function Seo({ title }) {
  return (
    <Head>
      <title>{title}</title>
    </Head>
  );
}

next/head에서 제공하는 기능을 사용하면 title, og_img, meta 등 태그를 안에 넣어서 SEO를 관리할 수 있다. 

 

import Seo from "../components/Head";
import NavBar from "../components/NavBar";

const Home = () => {
  return (
    <div>
      <Seo title="Home | Next" />
      <h1>Home</h1>
    </div>
  );
};

export default Home;

작성한 SEO 컴포넌트를 필요한 곳에 사용하면 간단하게 페이지별 title을 변경할 수 있다. 

 

 

반응형
저작자표시 비영리 변경금지

'Next.js > 이론' 카테고리의 다른 글

[Next.js] Server Side Rendering  (1) 2022.07.04
[Next.js] Redirect & Rewrite  (1) 2022.07.03
[Next.js] Custom App  (1) 2022.07.01
[Next.js] Styles JSX  (2) 2022.06.30
[Next.js] CSS 모듈  (1) 2022.06.29

티스토리툴바