페이지않에 공통되는 부분을 처리 할 수 있습니다.
pages폴더안에 _app.js 파일 생성.
antd.css 공통으로 쓰여짐으로, 각 파일에서 import 하는 게 아니라. 하나의 파일안에서만 import하면된다.
app.js 가 index,profile,signup의 공통된 부분들을 감당한다. (index의 부모가 app 이라고 생각하면된다)
_app.js
import React from 'react';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css'
const NodeBird = ({Component}) => {
return(
<Component/>
)
}
NodeBird.propTypes = {
Component:PropTypes.elementType.isRequred,
}
export default NodeBird;다른메뉴를 추가할 수도 있다
_app.js
const NodeBird = ({Component}) => {
return(
<div>
<div>공통메뉴</div>
<Component/>
</div>
)
}
NodeBird.propTypes = {
Component:PropTypes.elementType.isRequred,
}
export default NodeBird;
모든 페이지에서 공통인 것들은 _app.js(paages의 공통) 에 넣는다.
특정 컴포넌트에서 공통인 것들은 components폴더에 넣는다 (폴더명 바뀌어도 상관없다)
next에서 head 수정하기
모든 페이지에서 공통으로 수정된다면 _app.js에서 수정하면된다.
_app.js
import PropTypes from 'prop-types';
const NodeBird = ({Component}) => {
return(
<>
<Head>
<meta charSet="utf-8" />
<title>NodeBird</title>
</Head>
<Component/>
</>
)
}
프로필, 회원가입 페이지는 각각 title이 다름으로, 각 페이지마다 head를 설정해주면 된다.
Profile.js
import Head from 'next/head';
const Profile = () => {
return(
<>
<Head>
<title>내 프로필 | NodeBird</title>
</Head>
<AppLayout>
<div>내 프로필</div>
</AppLayout>
</>
)
}
