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
'Development > React.js' 카테고리의 다른 글
| findDOMNode is deprecated in StrickMode... (0) | 2022.03.30 |
|---|---|
| React-Query (0) | 2022.03.30 |
| Next.js란? (0) | 2022.03.28 |
| Redux (0) | 2022.03.24 |
| 상태관리 라이브러리 (0) | 2022.03.24 |