폴더
- index.js가 가장 기본 화면의 역할, 각 폴더명이 주소가 된다(http://localhost:3000)
- export default한 컴포넌트를 라우팅한다
- http://localhost:3000/ 주소뒤에 다른 폴더명이 주소가 됨
- 각각 페이지가 될 부분들은 pages 디렉토리 밑에 작성해야한다
_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 를 통해 데이터를 불러올 수 없다
// page/_documnet.js
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
- 메인 시작 페이지('/')
:D