next - Layout

Layout : 공통된 레이아웃 컴포넌트를 만들고 각 페이지에서 사용
 

설정

: /components/layout.js 파일을 생성

1) children prop을 이용하여 Layout 컴포넌트 생성  
: {props.children}을 지운다면, Layout 요소 안에 넣은 내용이 렌더링 되지 않는다.

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

2) 생성한 layout 컴포넌트를 상위 컴포넌트로 감싸주면 된다. 

import Layout from '../components/Layout';
export default function Index() {
return (
  <Layout>
    <p>Hello Next.js</p>
  </Layout>
  );
}

출처

https://www.howdy-mj.me/next/next-js-intro/

Next.js 설치, 라우팅, 구동방식