Development/React.js
Next.js - pages와 layout
moretz0921
2022. 3. 28. 22:34
Pages
: 페이지를 담당하는 컴포넌트
- pages/about.js 파일을 생성한다면 /page로 쉽게 접근
function About() {
return <div>About</div>;
}
export default About;
규칙
1) _app.js
: pages들의 공통
- 모든 페이지에서 쓰는 스타일, 레이아웃, 메타데이터 등을 넣어주면 된다.
import Head from 'next/head';
<>
<AppLayout>
<Head> // Next.js에서 지원해주는 Head 태그
<title>Node Lab | 홈</title>
</Head>
<HomeLayout />
</AppLayout>
</>
Layout
: 특정 컴포넌트에서 공통
- layout 컴포넌트를 생성 후, 생성한 layout 컴포넌트를 상위 컴포넌트로 감싸주면 된다.
출처
https://velog.io/@___pepper/next.js-layout-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
[next.js] layout 사용하기
layout를 사용해서 공통 화면 구성하기
velog.io