폴더
_app.js
- 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로(최초실행), 페이지에 적용할 공통 레이아웃의 역할을 한다.
- 공통 CSS e.g.reset-css/common.css, 페이지 전환시 레이아웃을 유지할 수 있다.
- componentDidCatch를 이용해서 커스텀에러 핸들링을 할 수 있다
- getStaticProps와 getServerSideProps 를 통해 데이터를 불러올 수 없다
pageProps
return <Component {...pageProps} />;
}
- 데이터 페칭 메서드를 통해 미리가져온 초기객체이다
- 메서드를 사용하지 않는다면 빈객체가 전달된다
_document.js
- app 다음에 실행된다(두번째로 실행됨)
- 공통적으로 활용할
<head>
(메타태그 등)나, <body>
태그 안에 들어갈 내용들을 커스텀할때 활용 (html 마크업 중심)
- 스타일시트 링크, 폰트 임포팅
- 도큐먼트 기본설정(index.html과 같은 역할)
- 클래스를 상속받는 클래스 컴포넌트로만 작성해야한다 또한 렌더 함수는 html, head, main,nextScript 요소를 리턴해줘야 한다
- 만약 페이지의 제목(
<title>
)이나 open graph 등 페이지별로 다르게 적용되어야 하는 내용들은 각 페이지별로 처리해야 한다.
- 언제나 서버에서 실행되므로 브라우저 api 또는 이벤트 핸들러가 포함된 코드는 실행되지 않는다
- main 외의 부분은 브라우저에서 실행되지 않으므로 비즈니스 로직을 추가해서는 안된다
- getStaticProps와 getServerSideProps 를 통해 데이터를 불러올 수 없다
import Document, { Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<title> react app </title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
</Head>
<body>
<div id="root">
<Main />
<NextScript />
</div>
</body>
</html>
);
}
}
imdex.js